Тут ми навчимося створювати матеріали на нашому сайті.
Виділення тексту з емоджі
{{< callout emoji="💯" text="Не вставляйте сюди більше одного параграфу. На маку список емоджі відкривається 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-файла, далі назва діаграми (можна не вказувати, тоді вона не виведеться) і sgflink
потрібен лінк для скачування SGF-файла (sgflink діє тільки якщо є назва діаграми).
{{< sgfbasic "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" "Партія Доcаку." "sgflink" >}}
Діаграма з гілками варіантів
Найширший варіант, з коментарями та варіантами розвитку подій. Трошки громіздкий.
{{< 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-файла.
{{< sgfcomment "sgf/Yasui Shunchi-Honinbo Dosaku-1684-01-05.sgf" >}}
Як влаштовано відображення діаграм ґо всередені
maxiGos це віджет для відображення діаграм для гри ґо в форматі SGF, що використовується на формі.
Налаштування maxiGos
Параметри maxiGos
Компонент | Назва | Опис | Значення |
---|---|---|---|
Глобальний | data-maxigos-init-method |
Яким ходом відображати діаграму при старті | first , last , loop або ціле число |
Як вставляти зображення та відео з Youtube
Hugo постачається з кількома вбудованими шорткодами для збагаченого контенту та набором простиш шорткодів що дозволяють вбудовування різноманітного контенту з соціального медіа.
Шорткод Figure (PaperMod enhanced)
{{< figure src="https://images.unsplash.com/photo-1633974026122-2861ae7b6087" attr="Photo by [Elena Popova](https://unsplash.com/@elenapopova) on [Unsplash](https://images.unsplash.com/photo-1633974026122-2861ae7b6087)" align=center link="https://unsplash.com/photos/a-close-up-of-a-board-game-with-black-and-white-balls-xdXxY5C9PUo" target="_blank" >}}
YouTube
{{< youtube sLmZCQA1b7c >}}
{{< instagram CxOWiQNP2MO >}}
Twitter Shortcode
{{< twitter user="skalinets" id="1766029845618667973" >}}
сьогодні день крінжовий привітань. Давайте їх усі зберемо у цьому треді
— Serhii Kalinets fella 🇺🇦 (@skalinets) March 8, 2024
Vimeo Shortcode
{{< vimeo 263012058 >}}