Dodajte komentare na vaš Hugo sajt

Da biste videli svaki shortcode i theme partial koji se pokreće lokalno protiv javnog demo tenant-a, klonirajte repozitorijum 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 u exampleSite/content/ koju možete direktno kopirati u svoj sajt.

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

Opcija A: Hugo modul (preporučeno)

Iz korena vašeg sajta:

hugo mod init github.com/you/your-site   # samo ako vaš sajt već nije modul
hugo mod get github.com/FastComments/fastcomments-hugo

Zatim dodajte import u vaš 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 ga referencirajte u svom hugo.toml. Navedite ga pored svoje teme; kasniji unosi imaju prednost, zato stavite svoju temu prvu:

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

Podesite svoj tenant ID jednom u hugo.toml:

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

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

\{{< fastcomments >}}

Primeri

Broj komentara umetnut u tekst:

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 prikačili komentare na svaki post na isti način na koji to radi Hugo-ova ugrađena podrška za Disqus, dodajte jednu liniju u single template vaše teme (layouts/_default/single.html):

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

Partial se prikazuje samo kada je tenantId konfigurisan. Isključite komentare na pojedinačnoj stranici pomoću front matter-a:

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

Da biste prikazali broj komentara pored više stranica odjednom (index bloga, lista sekcije), koristite bulk count widget. On preuzima sve brojače komentara na stranici u jednom zahtevu. Postoje dve komponente: marker pored svake stavke, i jedan init poziv nakon liste.

U šablonu liste (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 renders <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, using the same identifier the comments widget uses for that page (its urlId, or its permalink when no urlId is set), so the counts line up with the real threads. bulk-count.html emits the single request that fills them in.

Ako sami napišete markere (na primer u Markdownu stranice), koristite shortcode da umesto toga emitujete init poziv:

<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 opcije vidžeta su podešene pod [params.fastcomments] u hugo.toml, i mogu biti prepisane po stranici u front matter-u pod [fastcomments]. Precedenca, od najnižeg do najvišeg: parametri sajta, front matter stranice, parametri shortkoda.

# 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 ni url ni urlId nisu navedeni, url podrazumevano postaje permalink stranice kako bi se konverzacije u komentarima vezale za stabilan URL.

EU rezidencija podataka

Kupci iz EU postave region = "eu" da usmere vidžet na cdn-eu.fastcomments.com:

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

Napomena o pisanju ključeva

Hugo pretvara svaki ključ u mala slova u hugo.toml i front matter, ali FastComments vidžeti zahtevaju camelCase ključeve (tenantId, hasDarkBackground). Ovaj modul automatski vraća ispravan oblik pisanja za svaku poznatu top-level opciju, pa opcije pišite u uobičajenom camelCase obliku. Ključevi koji su ugnježdeni unutar objekta (na primer ključevi mape translations, ili polja pageReactConfig) se ne vraćaju. Umesto toga, njih konfigurišite kroz FastComments kontrolnu tablu za prilagođavanje.

Za kompletan spisak opcija za widgete, pogledajte FastComments dokumentaciju o prilagođavanju. Dva widgeta zahtevaju obaveznu opciju koja nema podrazumevanu vrednost:

• fastcomments-collab-chat i fastcomments-image-chat zahtevaju target, CSS selektor za element na koji treba da se prikači.
• fastcomments-user-activity-feed zahteva userId.

• FastComments Dokumentacija
• Prilagođavanje i konfiguracija
• Hugo Dokumentacija

Ove komponente su tanki omotači oko naših osnovnih VanillaJS widgeta. Možemo ažurirati te widgete (ispraviti greške, dodati funkcionalnosti) bez objavljivanja ovog repozitorijuma, pa mirna istorija izdanja ne znači da FastComments nije aktivan. Pogledajte naš blog za ažuriranja. Promene koje remete kompatibilnost u osnovnim widgetima se objavljuju ovde uz povećanje verzije.