Dodavanje komentara na vašu Hugo stranicu

Da biste lokalno vidjeli svaki shortcode i partial teme u radu protiv javnog demo tenanta, klonirajte repozitorij i pokrenite priloženi exampleSite:

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

Svaki widget ima svoju stranicu unutar exampleSite/content/ koju možete izravno kopirati na vlastitu web-stranicu.

Odaberite jedan od dva standardna načina za dodavanje komponente Hugo teme.

Opcija A: Hugo modul (preporučeno)

Iz korijena vašeg sajta:

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

Zatim dodajte uvoz u svoj hugo.toml:

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

Opcija B: Komponenta teme (Git podmodul)

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

Zatim se pozovite na nju iz svog hugo.toml. Navedite je zajedno s vašom temom; kasniji unosi imaju prednost, stoga stavite svoju temu prvu:

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

Postavite svoj tenant ID jednom u hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # zamijenite "demo" svojim FastComments tenant ID-jem

Zatim povežite widget za komentare u svoju temu (pogledajte Integracija teme), ili ubacite shortcode u Markdown bilo koje stranice:

\{{< fastcomments >}}

Primjeri

Broj komentara unutar teksta:

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

Chat uživo:

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

Kolaborativni chat, ciljanje elementa sadržaja pomoću CSS selektora:

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

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

Chat za slike, ciljanje elementa slike pomoću CSS selektora:

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

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

Sažetak recenzija:

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

Feed aktivnosti korisnika:

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

Da biste dodali komentare svakom objavi na način na koji to radi ugrađena Hugo podrška za Disqus, dodajte jedan redak u single predložak vaše teme (layouts/_default/single.html):

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

Partial se prikazuje samo kada je konfiguriran tenantId. Onemogućite komentare na pojedinačnoj stranici pomoću front mattera:

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

Da biste prikazali broj komentara pokraj više stranica odjednom (popis bloga, popis odjeljka), upotrijebite widget za masovno brojanje. On dohvaća sve brojeve na stranici u jednom zahtjevu. Postoje dva dijela: marker pored svakog stavka i jedan poziv za inicijalizaciju nakon popisa.

U predlošku popisa (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 renderira <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, koristeći isti identifikator koji widget za komentare koristi za tu stranicu (njegov urlId, ili njegov permalink ako urlId nije postavljen), tako da se brojevi podudaraju s pravim nitima. bulk-count.html šalje jedan zahtjev koji ih popunjava.

Ako markere napišete sami (na primjer u Markdownu stranice), umjesto toga upotrijebite shortcode da pokrenete poziv za inicijalizaciju:

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

Sve FastComments widget opcije postavljaju se pod [params.fastcomments] u hugo.toml, i mogu se nadjačati po stranici u front matteru pod [fastcomments]. Prioritet, od najnižeg do najvišeg: site parametri, front matter stranice, parametri shortcode-a.

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

Kada nije naveden ni url ni urlId, url se zadano postavlja na permalink stranice tako da su niti komentara vezane uz stabilan URL.

EU smještaj podataka

Kupci iz EU postave region = "eu" kako bi usmjerili widget na cdn-eu.fastcomments.com:

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

Napomena o veličini slova u ključevima

Hugo pretvara svaki ključ u mala slova u hugo.toml i front matteru, ali FastComments widgeti zahtijevaju camelCase ključeve (tenantId, hasDarkBackground). Ova komponenta automatski vraća ispravno pisanje velikih i malih slova za svaku poznatu vrhunsku opciju, pa upisujte opcije u njihovom uobičajenom camelCase obliku. Ključevi ugniježđeni unutar vrijednosti objekta (na primjer ključevi mape translations, ili polja pageReactConfig) se ne obnavljaju. Umjesto toga, konfigurirajte ih kroz FastComments sučelje za prilagodbu (dashboard).

Za potpuni popis opcija widgeta, pogledajte FastComments dokumentaciju o prilagodbama i konfiguraciji. Dva widgeta imaju obaveznu opciju koja nema zadanu vrijednost:

• fastcomments-collab-chat i fastcomments-image-chat zahtijevaju target, CSS selektor elementa na koji će se pričvrstiti.
• fastcomments-user-activity-feed zahtijeva userId.

• Dokumentacija FastComments
• Prilagodba & konfiguracija
• Dokumentacija Huga

Ove komponente su tanke omotnice oko naših temeljnih VanillaJS widgeta. Možemo ažurirati te widgete (ispraviti greške, dodati značajke) bez objavljivanja ovog repozitorija, pa mirna povijest izdanja ne znači da FastComments nije aktivan. Pogledajte naš blog za ažuriranja. Nekompatibilne promjene u temeljnih widgetima objavljuju se ovdje uz povećanje verzije.