Aggiungi commenti al tuo sito Hugo

Per vedere ogni shortcode e il partial del tema in esecuzione localmente contro il tenant pubblico demo, clona il repository ed esegui l'exampleSite incluso:

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

Ogni widget ha la sua pagina sotto exampleSite/content/ che puoi copiare direttamente nel tuo sito.

Scegli uno dei due metodi standard per aggiungere un componente del tema Hugo.

Opzione A: Modulo Hugo (consigliato)

Dalla directory principale del tuo sito:

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

Quindi aggiungi l'import nel tuo hugo.toml:

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

Opzione B: Componente del tema (sottomodulo Git)

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

Poi fai riferimento a esso dal tuo hugo.toml. Elencalo insieme al tuo tema; le voci successive hanno la precedenza, quindi mantieni il tuo tema per primo:

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

Imposta il tuo tenant ID una volta in hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # sostituire "demo" con il tuo tenant ID FastComments

Poi collega il widget dei commenti al tuo tema (vedi Integrazione del tema), oppure inserisci uno shortcode nel Markdown di qualsiasi pagina:

\{{< fastcomments >}}

Esempi

Conteggio commenti inline nel testo:

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

Chat in tempo reale:

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

Chat collaborativa, mirata a un elemento di contenuto tramite selettore CSS:

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

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

Chat per immagini, mirata a un elemento immagine tramite selettore CSS:

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

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

Riepilogo recensioni:

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

Feed attività per utente:

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

Per aggiungere commenti a ogni post, come fa il supporto Disqus integrato di Hugo, aggiungi una riga al template single del tuo tema (layouts/_default/single.html):

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

La partial viene visualizzata solo quando è configurato un tenantId. Disabilita i commenti su una singola pagina tramite il front matter:

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

Per mostrare il conteggio dei commenti accanto a molte pagine contemporaneamente (un indice del blog, una lista di sezioni), usa il widget di conteggio bulk. Recupera ogni conteggio presente nella pagina in una singola richiesta. Ci sono due parti: un marcatore accanto a ogni elemento e una chiamata di init dopo la lista.

In un template di lista (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 rende <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, usando lo stesso identificatore che il widget dei commenti usa per quella pagina (il suo urlId, oppure il suo permalink quando non è impostato un urlId), così i conteggi corrispondono ai thread reali. bulk-count.html emette la singola richiesta che li popola.

Se scrivi i marker da solo (ad esempio nel Markdown di una pagina), usa lo shortcode per emettere invece la chiamata di inizializzazione:

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

Tutte le opzioni del widget FastComments sono impostate sotto [params.fastcomments] in hugo.toml, e possono essere sovrascritte per pagina nel front matter sotto [fastcomments]. Precedenza, dalla più bassa alla più alta: parametri del sito, front matter della pagina, parametri dello 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.

Residenza dei dati UE

I clienti UE impostano region = "eu" per instradare il widget verso cdn-eu.fastcomments.com:

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

Nota sulla capitalizzazione delle chiavi

Hugo converte in minuscolo ogni key in hugo.toml e nel front matter, ma i widget FastComments richiedono chiavi in camelCase (tenantId, hasDarkBackground). Questo componente ripristina automaticamente la corretta capitalizzazione per ogni opzione di primo livello conosciuta, quindi scrivi le opzioni nella loro normale forma camelCase. Le chiavi annidate all'interno di un valore oggetto (ad esempio le chiavi di una mappa translations, o i campi di pageReactConfig) non vengono ripristinate. Configura quelle tramite l'interfaccia di personalizzazione della dashboard FastComments.

Per l'elenco completo delle opzioni del widget, vedi la documentazione di personalizzazione di FastComments. Due widget richiedono un'opzione obbligatoria che non ha un valore predefinito:

• fastcomments-collab-chat e fastcomments-image-chat richiedono target, un selettore CSS per l'elemento a cui collegarsi.
• fastcomments-user-activity-feed richiede userId.

• Documentazione FastComments
• Personalizzazione e Configurazione
• Documentazione Hugo

Questi componenti sono dei wrapper leggeri intorno ai nostri widget core VanillaJS. Possiamo aggiornare quei widget (correggere bug, aggiungere funzionalità) senza pubblicare questo repository, quindi una cronologia di release silenziosa non significa che FastComments sia inattivo. Controlla il nostro blog per aggiornamenti. Le modifiche non retrocompatibili ai widget sottostanti vengono rilasciate insieme a un aumento di versione qui.