Dodajte komentarje na svojo Hugo stran

Če želite lokalno pregledati vse shortcode-e in delne predloge teme, ki tečejo proti javnemu najemniku demo, klonirajte repozitorij in zaženite priloženi exampleSite:

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

Vsak widget ima svojo stran pod exampleSite/content/, ki jo lahko neposredno kopirate v svojo spletno stran.

Izberite enega izmed dveh standardnih načinov za dodajanje komponente teme Hugo.

Možnost A: Hugo modul (priporočeno)

Iz korenske mape vaše strani:

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

Nato dodajte uvoz v vašo datoteko hugo.toml:

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

Možnost B: Komponenta teme (Git podmodul)

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

Nato se nanj sklicujte iz vaše datoteke hugo.toml. Navedite ga skupaj z vašo lastno temo; kasnejši vnosi imajo prednost, zato naj bo vaša tema prva:

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

Nastavite svoj ID najemnika enkrat v hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # zamenjajte "demo" z ID-jem najemnika FastComments

Nato bodisi vključite pripomoček za komentarje v svojo temo (glejte Integracija teme), ali vstavite shortcode v Markdown poljubne strani:

\{{< fastcomments >}}

Primeri

Štetje komentarjev v besedilu:

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

Klepet v živo:

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

Sodelovalni klepet, ciljanje elementa vsebine s CSS selektorjem:

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

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

Klepet za slike, ciljanje elementa slike s CSS selektorjem:

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

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

Povzetek ocen:

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

Vir aktivnosti uporabnika:

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

Če želite priložiti komentarje k vsakemu prispevku na enak način, kot to stori Hugojeva vgrajena podpora za Disqus, dodajte eno vrstico v predlogo single vaše teme (layouts/_default/single.html):

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

Delni predlogo (partial) se prikaže le, ko je konfiguriran tenantId. Komentarje onemogočite na posamezni strani z uporabo front matter:

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

Če želite ob številnih straneh hkrati prikazati število komentarjev (npr. indeks bloga ali seznam razdelkov), uporabite pripomoček za množično štetje (bulk count widget). V enem samem zahtevku pridobi vse števce na strani. Sestavljen je iz dveh delov: marker ob vsakem elementu in en inicializacijski klic po seznamu.

V predlogi seznama (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 izriše <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, pri čemer uporablja isti identifikator, ki ga comments widget uporablja za to stran (its urlId, or its permalink when no urlId is set), tako se števci ujemajo z dejanskimi nitmi. bulk-count.html odda en sam zahtevek, ki jih napolni.

Če markerje napišete sami (na primer v Markdownu strani), uporabite shortcode, da namesto tega oddate inicializacijski klic:

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

Vse možnosti vtičnika FastComments so nastavljene pod [params.fastcomments] v hugo.toml in jih je mogoče preglasiti za vsako stran posebej v front matter pod [fastcomments]. Prednost, od najnižje do najvišje: parametri spletnega mesta, front matter strani, parametri 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
+++

Ko ni podanega niti url niti urlId, se url privzeto nastavi na permalink strani, tako da so nitke komentarjev vezane na stabilen URL.

Rezidenca podatkov v EU

Stranke v EU nastavijo region = "eu" za usmeritev vtičnika na cdn-eu.fastcomments.com:

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

Opomba o velikosti črk ključev

Hugo pretvori vse ključe v hugo.toml in front matter v male črke, vendar FastComments vtičniki zahtevajo ključe v camelCase (tenantId, hasDarkBackground). Ta komponenta samodejno obnovi pravilno zapisovanje črk za vse znane vrhnje možnosti, zato vnesite možnosti v njihovi običajni camelCase obliki. Ključi, vgrajeni znotraj vrednosti objekta (na primer ključi v mapi translations ali polja pageReactConfig), niso obnovljeni. Namesto tega jih konfigurirajte preko uporabniškega vmesnika za prilagajanje na nadzorni plošči FastComments.

Za celoten seznam možnosti widgetov si oglejte dokumentacijo FastComments o prilagajanju in konfiguraciji. Dva widgeta zahtevata obvezno možnost, ki nima privzete vrednosti:

• fastcomments-collab-chat in fastcomments-image-chat zahtevata target, CSS selektor elementa, na katerega se pripne.
• fastcomments-user-activity-feed zahteva userId.

• Dokumentacija FastComments
• Prilagajanje in konfiguracija
• Dokumentacija Hugo

Te komponente so tanke ovojnice okoli naših osnovnih VanillaJS gradnikov. Te gradnike lahko posodobimo (odpravimo napake, dodamo funkcionalnosti) brez objave tega repozitorija, zato mirna zgodovina izdaj ne pomeni, da FastComments ni aktiven. Preverite naš blog za posodobitve. Prelomne spremembe v osnovnih gradnikih so objavljene tukaj ob povišanju različice.