Тут ми навчимося створювати матеріали на нашому сайті.

Виділення тексту з емоджі

{{< callout emoji="💯" text="Не вставляйте сюди більше одного параграфу. На маку список емоджі відкривається Ctrl+Command+Space, на Windows Win+;" >}}
😜
Не вставляйте сюди більше одного параграфу. На маку список емоджі відкривається Ctrl+Command+Space, на Windows Win+;

Як вставляти діаграм ґо

Діаграми можна вставляти за допомогою SGF-файлів. SGF це формат зберігання діаграм для ґо, який підтримують популярні редактори, такі як Drago, Gowrite2, SmartGo, q5go, Sabaki. В ньому можна показувати різні варіанти, позначати певні точки на дошці, коментувати ходи.

Очікується що SGF-файли містять тег CA на початку файла, що вказує на їх кодування (наприклад, CA[UTF-8] якщо кодування UTF-8).

Приклад вмісту SGF файла:

(;
CA[UTF-8]
EV[Замкові ігри]
PB[Ясуі Шунчі]
BR[7p]
PW[Хонінбо Досаку]
WR[Мейджін]
KM[0]
RE[B+1]
DT[1684-01-05]
JD[Tenna 3-11-19]
PC[Замок Едо]
HA[2]
AB[dp][pd]

;W[cd];B[ec];W[nc];B[qg];W[ic];B[qp];W[oq];B[lq];W[dc];B[cm];W[qc];B[pc];W[qd];B[qe];W[re];B[qf];W[pb];B[ob];W[qb];B[oc];W[qm];B[po];W[qj];B[nd];W[ed];B[cj];W[lp];B[kp];W[mq];B[lo];W[mp];B[kq];W[on];B[pq];W[ko];B[jo];W[kn];B[jn];W[ip];B[km];W[ln];B[jp];W[fq];B[eq];W[fp];B[hq];W[iq];B[hp];W[do];B[co];W[dn];B[cn];W[er];B[dr];W[gr];B[hr];W[cq];B[es];W[dq];B[fr];W[ep];B[cp];W[er];B[lm];W[mn];B[eq];W[pr];B[er];W[qr];B[rf];W[nb];B[mc];W[mb];B[lc];W[lb];B[oa];W[kc];B[rd];W[ho];B[go];W[gn];B[hn];W[io];B[ir];W[fo];B[gp];W[dj];B[ci];W[dl];B[cl];W[hm];B[in];W[cg];B[gm];W[fn];B[gl];W[gk];B[hk];W[gj];B[fl];W[el];B[ej];W[ei];B[di];W[fk];B[hl];W[eh];B[dg];W[dh];B[ch];W[eg];B[bg];W[df];B[hj];W[md];B[if];W[ne];B[oe];W[of];B[ql];W[pl];B[qk];W[pk];B[rm];W[qn];B[rj];W[ri];B[qi];W[pj];B[rk];W[rn];B[bf];W[od];B[gi];W[ek];B[nd];W[hh];B[ih];W[od];B[pe];W[hg];B[ig];W[hf];B[hi];W[qh];B[rh];W[pi];B[si];W[sm];B[sl];W[rl];B[dm];W[em];B[rm];W[sn];B[ad];W[bc];B[he];W[ie];B[je];W[id];B[gf];W[ge];B[gg];W[hd];B[dk];W[fi];B[gh];W[sj];B[qi];W[rc];B[se];W[ri];B[sh];W[qi];B[mj];W[rl];B[en];W[fm];B[rm];W[ml];B[mm];W[nm];B[ll];W[rl];B[mg];W[mk];B[lk];W[nj];B[nk];W[nl];B[ni];W[mi];B[lj];W[nh];B[oj];W[mh];B[lh];W[lg];B[li];W[kf];B[jf];W[kh];B[kg];W[lf];B[rm];W[sd];B[sc];W[rl];B[eo];W[gq];B[gs];W[fj];B[sb];W[jg];B[ki];W[lr];B[kr];W[be];B[ae];W[ac];B[rm];W[cr];B[br];W[rl];B[ff];W[cf];B[fe];W[fd];B[rm];W[hs];B[is];W[rl];B[nd];W[me];B[rm];W[bh];B[bi];W[rl];B[he];W[hf];B[mr];W[nr];B[ls];W[sk];B[ke];W[le];B[og];W[ng];B[pf];W[ok];B[nf];W[oh];B[nj];W[dj];B[ah];W[ck];B[bk];W[af];B[ag];W[dk];B[hg];W[he];B[ee];W[de];B[jh];W[kg];B[na];W[ma];B[jd];W[jc];B[kd];W[ld];B[ns];W[os];B[ms];W[od])

Найзручнішими для використання є проста діаграма, діаграма з гілками варіантів та задача.

Проста діаграма

Є два методи, вказувати назви кожного параметра, або використати позиційні.

Спочатку приклад із іменованими параметрами:

{{< sgfbasic sgf="sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" showmove="5" caption="Моя діаграма" sgflink="true" >}}

Моя діаграма sgf

Першим параметром іде шлях до SGF-файла, далі назва діаграми (можна не вказувати, тоді вона не виведеться) і sgflink потрібен лінк для скачування SGF-файла (sgflink діє тільки якщо є назва діаграми).

{{< sgfbasic "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" "Партія Доcаку." "sgflink" >}}

Партія Доcаку. sgf

Діаграма з гілками варіантів

Найширший варіант, з коментарями та варіантами розвитку подій. Трошки громіздкий.

{{< sgftree "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" >}}

Задача / Цумеґо

Для звичайних партій цей шорткод дає можливість вгадувати наступний хід.

{{< sgfproblem "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" "Хід білих." >}}

Хід білих

Діаграма з нумерацією ходів

{{< sgfdiagram "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" "Як бачите, було ко." "sgflink" >}}

Як бачите, було ко. sgf

Діаграма з коментарями

Виводиться додатково поле з коментарями з SGF-файла.

{{< sgfcomment "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf"  >}}

Як влаштовано відображення діаграм ґо всередені

maxiGos це віджет для відображення діаграм для гри ґо в форматі SGF, що використовується на формі.

Документація maxiGos.

Налаштування maxiGos

Параметри maxiGos

Компонент Назва Опис Значення
Глобальний data-maxigos-init-method Яким ходом відображати діаграму при старті first, last, loop або ціле число

Як вставляти зображення та відео з Youtube

Hugo постачається з кількома вбудованими шорткодами для збагаченого контенту та набором простиш шорткодів що дозволяють вбудовування різноманітного контенту з соціального медіа.

Шорткод Figure (PaperMod enhanced)

{{< figure src="https://source.unsplash.com/Z0lL0okYjy0" attr="Photo by [Aditya Telange](https://unsplash.com/@adityatelange) on [Unsplash](https://unsplash.com/photos/Z0lL0okYjy0)" align=center link="https://unsplash.com/photos/Z0lL0okYjy0" target="_blank" >}}

Photo by Aditya Telange on Unsplash

YouTube

{{< youtube sLmZCQA1b7c >}}

Instagram

{{< instagram CxOWiQNP2MO >}}

Twitter Shortcode

{{< twitter user="skalinets" id="1766029845618667973" >}}

Vimeo Shortcode

{{< vimeo 263012058 >}}