Dodaj komentarze do swojej strony Hugo

Aby zobaczyć wszystkie shortcode'y i fragmenty motywu uruchomione lokalnie wobec publicznego tenanta demo, sklonuj repozytorium i uruchom dołączone exampleSite:

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

Każdy widget ma własną stronę w katalogu exampleSite/content/, którą możesz skopiować bezpośrednio do swojej witryny.

Wybierz jedną z dwóch standardowych metod dodania komponentu motywu Hugo.

Opcja A: Moduł Hugo (zalecane)

Z katalogu głównego swojej witryny:

hugo mod init github.com/you/your-site   # tylko jeśli twoja witryna nie jest jeszcze modułem
hugo mod get github.com/FastComments/fastcomments-hugo

Następnie dodaj import do pliku hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/FastComments/fastcomments-hugo"

Opcja B: Komponent motywu (podmoduł Git)

git submodule add https://github.com/FastComments/fastcomments-hugo.git themes/fastcomments-hugo

Następnie odwołaj się do niego w hugo.toml. Umieść go obok własnego motywu; późniejsze wpisy mają pierwszeństwo, więc umieść swój motyw jako pierwszy:

theme = ["your-theme", "fastcomments-hugo"]

Ustaw identyfikator najemcy raz w hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # zamień "demo" na identyfikator najemcy FastComments

Następnie albo podłącz widget komentarzy do motywu (zobacz Integracja motywu), albo wstaw shortcode na dowolnej stronie w Markdown:

\{{< fastcomments >}}

Przykłady

Liczba komentarzy w tekście:

This page has \{{< fastcomments-comment-count >}} comments.

Czat na żywo:

\{{< fastcomments-live-chat >}}

Czat współpracy, kierowany do elementu treści za pomocą selektora CSS:

<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>

\{{< fastcomments-collab-chat target="#post-body" >}}

Czat obrazkowy, kierowany do elementu obrazu za pomocą selektora CSS:

<img id="hero" src="/hero.jpg" alt="Hero image" />

\{{< fastcomments-image-chat target="#hero" >}}

Podsumowanie recenzji:

\{{< fastcomments-reviews-summary >}}

Kanał aktywności użytkownika:

\{{< fastcomments-user-activity-feed userId="demo:demo-user" >}}

Aby dołączyć komentarze do każdego wpisu tak jak robi to wbudowane wsparcie Disqus w Hugo, dodaj jedną linię do szablonu single swojego motywu (layouts/_default/single.html):

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

Ten partial jest renderowany tylko wtedy, gdy skonfigurowano tenantId. Wyłącz komentarze na pojedynczej stronie za pomocą front matter:

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

Aby wyświetlić liczbę komentarzy obok wielu stron naraz (indeks bloga, lista sekcji), użyj widżetu zbiorczego licznika. Pobiera on wszystkie liczniki na stronie w jednym żądaniu. Składa się z dwóch elementów: znacznika obok każdego elementu oraz jednego wywołania inicjalizującego po liście.

W szablonie listy (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 renderuje <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, używając tego samego identyfikatora, którego widżet komentarzy używa dla tej strony (jej urlId, albo jej permalink jeśli urlId nie jest ustawione), dzięki czemu liczniki odpowiadają rzeczywistym wątkom. bulk-count.html wysyła pojedyncze żądanie, które je wypełnia.

Jeśli utworzysz znaczniki samodzielnie (na przykład w Markdown strony), użyj shortcode'a, aby zamiast tego wygenerować wywołanie inicjalizujące:

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

Wszystkie opcje widżetu FastComments ustawiane są w sekcji [params.fastcomments] w hugo.toml, i mogą być nadpisane dla każdej strony we front matter pod [fastcomments]. Kolejność priorytetu, od najniższego do najwyższego: parametry witryny, front matter strony, parametry shortcode.

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

When neither url nor urlId is provided, url defaults to the page's permalink so comment threads stay tied to a stable URL.

Rezydencja danych w UE

Klienci z UE ustawiają region = "eu" aby kierować widżet do cdn-eu.fastcomments.com:

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

Uwaga dotycząca wielkości liter kluczy

Hugo zamienia na małe litery każdy klucz w hugo.toml i we front matter, ale widżety FastComments wymagają kluczy w formacie camelCase (tenantId, hasDarkBackground). Ten komponent automatycznie przywraca poprawne odmiany wielkości liter dla każdej znanej opcji najwyższego poziomu, więc wpisuj opcje w ich normalnej formie camelCase. Klucze zagnieżdżone wewnątrz wartości obiektu (na przykład klucze mapy translations lub pola pageReactConfig) nie są przywracane. Skonfiguruj je zamiast tego poprzez interfejs dostosowywania w panelu FastComments.

Aby uzyskać pełną listę opcji widgetów, zobacz dokumentacja dostosowywania FastComments. Dwa widgety wymagają opcji obowiązkowej, która nie ma wartości domyślnej:

• fastcomments-collab-chat i fastcomments-image-chat wymagają target, selektora CSS elementu, do którego mają zostać dołączone.
• fastcomments-user-activity-feed wymaga userId.

• Dokumentacja FastComments
• Dostosowywanie i konfiguracja
• Dokumentacja Hugo

Te komponenty są cienkimi powłokami wokół naszych podstawowych widżetów VanillaJS. Możemy aktualizować te widżety (naprawiać błędy, dodawać funkcje) bez publikowania tego repozytorium, więc cicha historia wydań nie oznacza, że FastComments jest nieaktywny. Sprawdź nasz blog po aktualizacje. Zmiany łamiące kompatybilność w podstawowych widżetach są wydawane wraz ze zwiększeniem numeru wersji tutaj.