Добавьте комментарии на свой сайт Hugo

Чтобы просмотреть все шорткоды и частичные шаблоны темы, работающие локально с публичным тенантом 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   # только если ваш сайт ещё не является модулем
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

Затем либо подключите виджет комментариев к вашей теме (см. Интеграция темы), либо вставьте шорткод в 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
+++

Чтобы показать количество комментариев рядом с несколькими страницами одновременно (например, индекс блога или список раздела), используйте виджет массового подсчёта (bulk count). Он получает все значения на странице одним запросом. Состоит из двух частей: маркер рядом с каждым элементом и один вызов инициализации после списка.

В шаблоне списка (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), не восстанавливаются. Настраивайте их через UI кастомизации в панели управления FastComments.

Полный список опций виджетов см. в документации по настройке FastComments. Два виджета принимают обязательный параметр, у которого нет значения по умолчанию:

• fastcomments-collab-chat и fastcomments-image-chat требуют target, CSS‑селектор элемента, к которому привязываются.
• fastcomments-user-activity-feed требует userId.

• Документация FastComments
• Настройка и конфигурация
• Документация Hugo

Эти компоненты — тонкие оболочки вокруг наших основных виджетов VanillaJS. Мы можем обновлять эти виджеты (исправлять ошибки, добавлять функции) без публикации этого репозитория, поэтому спокойная история релизов не означает, что FastComments неактивен. Следите за обновлениями в нашем блоге. Изменения, ломающие совместимость в базовых виджетах, публикуются здесь вместе с повышением версии.