Добавете коментари към вашия сайт на Hugo

За да видите всеки шорткод и част от темата (theme partial), работещи локално срещу публичния demo наемател, клонирайте хранилището и стартирайте включения 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"]

Задайте своя 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" >}}

За да прикачите коментари към всяка публикация по същия начин, както вградената в Hugo поддръжка за Disqus, добавете един ред в single шаблона на темата си (layouts/_default/single.html):

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

Частичният шаблон се рендерира само когато е конфигуриран tenantId. Забранете коментарите за отделна страница чрез front matter:

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

За да покажете брой коментари до множество страници едновременно (като индекс на блог, списък на секция), използвайте уиджетa за масово преброяване. Той извлича всички броячи на страницата в една заявка. Има две части: маркер до всеки елемент и едно извикване за инициализация след списъка.

В шаблон за списък (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 на страницата), използвайте shortcode-а, за да изведете извикването за инициализация вместо това:

<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 widget-а се задават под [params.fastcomments] в hugo.toml, и могат да бъдат преопределени за всяка страница във front matter под [fastcomments]. Предпочитание, от ниско към високо: site params, page front matter, shortcode parameters.

# 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", за да пренасочат widget-а към cdn-eu.fastcomments.com:

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

Забележка относно регистра на ключовете

Hugo прави всички ключове с малки букви в hugo.toml и във front matter, но FastComments widgets изискват camelCase ключове (tenantId, hasDarkBackground). Този компонент автоматично възстановява правилния регистър за всяка известна опция от най-високо ниво, затова задавайте опциите в тяхната нормална camelCase форма. Ключовете, вложени в стойност на обект (например ключовете на translations map или полетата на pageReactConfig), не се възстановяват. Конфигурирайте тези чрез потребителския интерфейс за персонализиране на таблото за управление на FastComments вместо това.

За пълен списък с опции за джаджите, вижте документацията за персонализиране на FastComments. Две джаджи изискват задължителна опция, която няма стойност по подразбиране:

• fastcomments-collab-chat и fastcomments-image-chat изискват target, CSS селектор за елемента, към който да се прикрепят.
• fastcomments-user-activity-feed изисква userId.

• Документация на FastComments
• Персонализиране и конфигуриране
• Документация на Hugo

Тези компоненти са тънки обвивки около нашите основни компоненти на VanillaJS. Можем да обновяваме тези компоненти (да коригираме грешки, да добавяме функции) без да публикуваме това хранилище, затова тихата история на релийзите не означава, че FastComments е неактивен. Вижте нашия блог за актуализации. Промени, които нарушават съвместимостта в основните компоненти, се въвеждат тук заедно с повишение на версията.