Добавление комментариев на сайт 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 submodule)

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

Частичный шаблон рендерится только тогда, когда настроен 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, or its permalink when no urlId is set), так что счётчики соответствуют реальным обсуждениям. 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

# 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 неактивен. Следите за обновлениями в нашем блоге. Ломающие изменения в базовых виджетах сопровождаются повышением версии в этом репозитории.