Додајте коментаре на ваш 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 >}}

Све 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 контролне табле за прилагођавање уместо тога.

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

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

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

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