Додајте коментаре на ваш Hugo сајт

Да бисте видели све shortcode-ове и theme partial-ове који раде локално против јавног demo tenant-а, клонирајте репозиторијум и покрените уграђени exampleSite:

git clone https://github.com/FastComments/fastcomments-hugo.git
cd fastcomments-hugo/exampleSite
hugo server

Сваки widget има своју страницу у exampleSite/content/ коју можете директно копирати у свој сајт.

Изаберите један од два стандардна начина да додате компоненту теме за Hugo.

Опција A: Hugo модул (препоручено)

Из корена вашег сајта:

hugo mod init github.com/you/your-site   # only if your site is not already a module
hugo mod get github.com/FastComments/fastcomments-hugo

Затим додајте import у ваш hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/FastComments/fastcomments-hugo"

Опција B: Компонента теме (Git подмодул)

git submodule add https://github.com/FastComments/fastcomments-hugo.git themes/fastcomments-hugo

Затим референцирајте то из вашег hugo.toml. Наведите га поред ваше теме; каснији уноси имају предност, па ставите вашу тему прву:

theme = ["your-theme", "fastcomments-hugo"]

Подесите ваш tenant ID једном у hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # замените "demo" вашим FastComments tenant ID-ом

Затим или повежите видгет коментара у вашу тему (види Интеграција теме), или убаците shortcode у било коју страницу у Markdown:

\{{< fastcomments >}}

Примери

Број коментара у тексту:

This page has \{{< fastcomments-comment-count >}} comments.

Разговор уживо:

\{{< fastcomments-live-chat >}}

Колаборативни чет, циљање елемента садржаја помоћу CSS селектора:

<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>

\{{< fastcomments-collab-chat target="#post-body" >}}

Чет за слике, циљање елемента слике помоћу CSS селектора:

<img id="hero" src="/hero.jpg" alt="Hero image" />

\{{< fastcomments-image-chat target="#hero" >}}

Сажетак рецензија:

\{{< fastcomments-reviews-summary >}}

Фид активности корисника:

\{{< fastcomments-user-activity-feed userId="demo:demo-user" >}}

Да бисте додали коментаре на сваки пост на исти начин као што то ради уграђена подршка за Disqus у Hugo-у, додајте једну линију у single шаблон ваше теме (layouts/_default/single.html):

\{{ partial "fastcomments/comments.html" . }}

Део шаблона (partial) ће се приказати само када је tenantId конфигурисан. Искључите коментаре на појединачној страници помоћу front matter-а:

+++
title = "A page with no comments"
comments = false
+++

Да бисте приказали број коментара поред више страница одједном (индекс блога, листа одељка), користите видгет за масовно бројање. Он преузима све бројеве на страници у једном захтеву. Састоји се из два дела: маркера поред сваке ставке и једног иницијализационог позива након листе.

У шаблону листе (layouts/_default/list.html):

<ul>
  \{{ range .Pages }}
    <li>
      <a href="\{{ .RelPermalink }}">\{{ .Title }}</a>
      \{{ partial "fastcomments/count-marker.html" . }}
    </li>
  \{{ end }}
</ul>
\{{ partial "fastcomments/bulk-count.html" (dict "page" .) }}

count-marker.html рендерује <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, користећи исти идентификатор који видгет за коментаре користи за ту страницу (urlId странице, или permalink странице када urlId није подешен), тако да се бројеви поклапају са стварним нитима. bulk-count.html шаље један захтев који их попуњава.

Ако маркере пишете сами (на пример у Markdown-у странице), користите шорткод да бисте уместо тога емитовали иницијализациони позив:

<span class="fast-comments-count" data-fast-comments-url-id="article-1"></span>
<span class="fast-comments-count" data-fast-comments-url-id="article-2"></span>

\{{< fastcomments-comment-count-bulk >}}

Sve FastComments widget opcije se podešavaju pod [params.fastcomments] u hugo.toml, i mogu se prepisati po strani u front matter pod [fastcomments]. Prednost, od najniže do najviše: parametri sajta, front matter stranice, parametri shortcode-a.

# hugo.toml
[params.fastcomments]
  tenantId = "your-tenant-id"
  hasDarkBackground = true
  voteStyle = 1
  enableSearch = true

# front matter stranice
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

Kada nisu navedeni ni url ni urlId, url podrazumevano koristi permalink stranice kako bi niti komentara ostale vezane za stabilan URL.

EU rezidencija podataka

EU kupci postavljaju region = "eu" da usmere widget na cdn-eu.fastcomments.com:

[params.fastcomments]
  tenantId = "your-tenant-id"
  region = "eu"

Napomena o pisanju ključeva (casing)

Hugo pretvara svaki ključ u hugo.toml i front matter u mala slova, ali FastComments widgeti zahtevaju camelCase ključeve (tenantId, hasDarkBackground). Ovaj komponent automatski vraća ispravan zapis velikih/malih slova za svaku poznatu top-level opciju, tako da pišite opcije u njihovom uobičajenom camelCase obliku. Ključevi ugnježdeni unutar vrednosti objekta (na primer ključevi mape translations, ili polja pageReactConfig) se ne vraćaju. Podesite te kroz kontrolni panel FastComments za prilagođavanje umesto toga.

За комплетну листу опција виџета, погледајте FastComments документацију за прилагођавање. Два виџета захтевају обавезну опцију која нема подразумевану вредност:

• fastcomments-collab-chat и fastcomments-image-chat захтевају target, CSS селектор за елемент на који ће се прикачити.
• fastcomments-user-activity-feed захтева userId.

• FastComments документација
• Прилагођавање & конфигурација
• Hugo документација

Ове компоненте су танки омотачи око наших основних VanillaJS видџета. Можемо ажурирати те видџете (поправљати грешке, додавати функције) без објављивања овог репозиторијума, па тиха историја издања не значи да FastComments није активан. Погледајте наш блог за ажурирања. Промене које ремете компатибилност у основним видџетима испоручују се уз повећање верзије овде.