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

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

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

Сваки видгет има своју страницу под 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

Затим додајте увоз у ваш 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"]

Podesite svoj tenant ID jednom u hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # zamenite "demo" sa vašim FastComments tenant ID-om

Zatim povežite widget za komentare sa svojom temom (pogledajte Integracija teme), ili ubacite shortcode u Markdown bilo koje stranice:

\{{< 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-у странице), уместо тога користите шорткод да емитујете init позив:

<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 >}}

Све опције FastComments виџета се подешавају под [params.fastcomments] у hugo.toml, и могу се по страници прекрити у front matter под [fastcomments]. Приоритет, од најнижег до највишег: параметри сајта, front matter странице, параметри шорткода.

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

# a page's front matter
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

Кад ни url ни urlId нису обезбеђени, url подразумевано постаје permalink странице тако да нит коментара остане везана за стабилан URL.

Резиденција података у ЕУ

Клијенти из ЕУ подешавају region = "eu" да усмере виџет ка cdn-eu.fastcomments.com:

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

Напомена о регистру кључева

Hugo претвара сваки кључ у hugo.toml и у front matter у мала слова, али FastComments виџети захтијевају camelCase кључеве (tenantId, hasDarkBackground). Ова компонента аутоматски враћа тачан регистар за сваку познату опцију највишег нивоа, па упишите опције у њиховом уобичајеном camelCase облику. Кључеви угнеждени унутар вредности објекта (на примјер кључеви мапе translations, или поља pageReactConfig) се не враћају. Конфигуришите те кроз кориснички интерфејс за прилагођавање у FastComments контролној табли уместо тога.

Za potpuni spisak opcija widgeta, pogledajte FastComments dokumentaciju za prilagođavanje. Dva widgeta zahtijevaju obaveznu opciju koja nema podrazumijevanu vrijednost:

• fastcomments-collab-chat i fastcomments-image-chat zahtijevaju target, CSS selektor za element na koji će se pričvrstiti.
• fastcomments-user-activity-feed zahtijeva userId.

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

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