Додайте коментарі на ваш сайт Hugo

Щоб побачити всі шорткоди та часткові шаблони теми, що працюють локально проти публічного тенанта demo, клонувати репозиторій і запустіть включений exampleSite:

git clone https://github.com/FastComments/fastcomments-hugo.git
cd fastcomments-hugo/exampleSite
hugo server

Кожен віджет має власну сторінку під exampleSite/content/, яку ви можете скопіювати безпосередньо у свій сайт.

Оберіть один із двох стандартних способів додати компонент теми Hugo.

Варіант A: Hugo Module (рекомендовано)

У кореневому каталозі вашого сайту:

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
+++

Щоб показати кількість коментарів поряд із багатьма сторінками одночасно (індекс блогу, список розділу), використайте віджет масового підрахунку. Він отримує всі лічильники на сторінці одним запитом. Є дві частини: маркер біля кожного елемента та один виклик ініціалізації після списку.

У шаблоні списку (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

# front matter сторінки
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

When neither url nor urlId is provided, url defaults to the page's permalink so comment threads stay tied to a stable 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 неактивний. Перевірте наш блог щодо оновлень. Зміни, що порушують сумісність, у базових віджетах постачаються тут із підвищенням версії.