Adicionar comentários ao seu site Hugo

Para ver cada shortcode e o partial do tema em execução localmente contra o tenant público demo, clone o repositório e execute o exampleSite incluído:

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

Cada widget tem sua própria página em exampleSite/content/ que você pode copiar diretamente para o seu próprio site.

Escolha uma das duas maneiras padrão de adicionar um componente de tema do Hugo.

Opção A: Módulo do Hugo (recomendado)

A partir do diretório raiz do seu site:

hugo mod init github.com/you/your-site   # apenas se o seu site ainda não for um módulo
hugo mod get github.com/FastComments/fastcomments-hugo

Em seguida, adicione a importação ao seu hugo.toml:

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

Opção B: Componente de tema (submódulo Git)

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

Em seguida, referencie-o a partir do seu hugo.toml. Liste-o junto com o seu próprio tema; entradas posteriores têm prioridade, portanto mantenha seu tema primeiro:

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

Defina seu tenant ID uma vez em hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # substitua "demo" pelo seu FastComments tenant ID

Em seguida, ou integre o widget de comentários ao seu tema (veja Integração do Tema), ou insira um shortcode no Markdown de qualquer página:

\{{< fastcomments >}}

Exemplos

Contagem de comentários embutida no texto:

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

Chat ao vivo:

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

Chat colaborativo, direcionando um elemento de conteúdo por seletor CSS:

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

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

Chat de imagem, direcionando um elemento de imagem por seletor CSS:

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

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

Resumo de avaliações:

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

Feed de atividade do usuário:

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

Para anexar comentários a cada post da mesma forma que o suporte integrado ao Disqus do Hugo, adicione uma linha ao template single do seu tema (layouts/_default/single.html):

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

O partial é renderizado somente quando um tenantId está configurado. Desative comentários em uma página individual com front matter:

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

Para mostrar a contagem de comentários ao lado de várias páginas de uma vez (um índice de blog, uma lista de seção), use o widget de contagem em lote. Ele busca todas as contagens na página em uma única requisição. Existem duas partes: um marcador ao lado de cada item, e uma chamada de inicialização após a lista.

Em um template de 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 renderiza <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, usando o mesmo identificador que o widget de comentários usa para essa página (seu urlId, ou seu permalink quando nenhum urlId estiver definido), assim as contagens correspondem aos tópicos reais. bulk-count.html emite a única requisição que os preenche.

Se você escrever os marcadores manualmente (por exemplo no Markdown de uma página), use o shortcode para emitir a chamada de inicialização em vez disso:

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

Todas as opções do widget FastComments são definidas em [params.fastcomments] em hugo.toml, e podem ser substituídas por página no front matter em [fastcomments]. Precedência, do menor para o maior: parâmetros do site, front matter da página, parâmetros do 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.

Residência de dados da UE

Clientes da UE definem region = "eu" para direcionar o widget para cdn-eu.fastcomments.com:

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

Observação sobre o padrão de maiúsculas/minúsculas das chaves

Hugo converte todas as chaves para letras minúsculas em hugo.toml e no front matter, mas os widgets do FastComments exigem chaves em camelCase (tenantId, hasDarkBackground). Este componente restaura automaticamente a capitalização correta para toda opção de nível superior conhecida, portanto escreva as opções em seu formato camelCase normal. Chaves aninhadas dentro de um valor de objeto (por exemplo, as chaves de um mapa translations, ou campos de pageReactConfig) não são restauradas. Configure essas através da interface de personalização (dashboard) do FastComments em vez disso.

Para a lista completa de opções dos widgets, veja a documentação de personalização do FastComments. Dois widgets exigem uma opção obrigatória que não tem valor padrão:

• fastcomments-collab-chat e fastcomments-image-chat exigem target, um seletor CSS para o elemento ao qual anexar.
• fastcomments-user-activity-feed exige userId.

• Documentação do FastComments
• Personalização & Configuração
• Documentação do Hugo

Esses componentes são camadas de abstração leves em torno dos nossos widgets centrais VanillaJS. Podemos atualizar esses widgets (corrigir bugs, adicionar recursos) sem publicar este repositório, então um histórico de lançamentos discreto não significa que o FastComments está inativo. Confira nosso blog para atualizações. Alterações que quebram a compatibilidade nos widgets subjacentes são lançadas com um aumento de versão aqui.