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

Да бисте видели све shortcode-ове и theme partial који се покрећу локално против јавног 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"]

Postavite svoj tenant ID jednom u hugo.toml:

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

Zatim ili povežite widget za komentare u svoju temu (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-у странице), користите шорткод да бисте уместо тога емитовали позив за иницијализацију:

<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) се не враћају. Умјесто тога конфигуришите их преко корисничког интерфејса за прилагођавање (customization UI) на контролној табли FastComments.

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

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

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

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