Agregar comentarios a tu sitio Hugo

Para ver cada shortcode y el parcial del tema ejecutándose localmente contra el inquilino público demo, clona el repo y ejecuta el exampleSite incluido:

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

Cada widget tiene su propia página bajo exampleSite/content/ que puedes copiar directamente en tu propio sitio.

Elija una de las dos formas estándar para añadir un componente de tema de Hugo.

Opción A: Módulo de Hugo (recomendado)

Desde la raíz de su sitio:

hugo mod init github.com/you/your-site   # solo si su sitio aún no es un módulo
hugo mod get github.com/FastComments/fastcomments-hugo

Then add the import to your hugo.toml:

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

Opción B: Componente de tema (submódulo Git)

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

Then reference it from your hugo.toml. List it alongside your own theme; later entries win, so keep your theme first:

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

Establece tu tenant ID una vez en hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # reemplaza "demo" por tu FastComments tenant ID

Then either wire the comments widget into your theme (see Integración del tema), or drop a shortcode into any page's Markdown:

\{{< fastcomments >}}

Ejemplos

Recuento de comentarios en línea con el texto:

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

Chat en vivo:

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

Chat colaborativo, apuntando a un elemento de contenido mediante un selector CSS:

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

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

Chat de imagen, dirigido a un elemento de imagen mediante un selector CSS:

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

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

Resumen de reseñas:

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

Feed de actividad del usuario:

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

Para adjuntar comentarios a cada entrada de la misma manera que lo hace la compatibilidad integrada de Disqus de Hugo, añade una línea al template single de tu tema (layouts/_default/single.html):

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

El partial se renderiza solo cuando se configura un tenantId. Deshabilita los comentarios en una página individual usando front matter:

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

Para mostrar un recuento de comentarios junto a muchas páginas a la vez (un índice de blog, una lista de secciones), use el widget de recuento masivo. Recupera todos los recuentos de la página en una sola solicitud. Hay dos piezas: un marcador junto a cada elemento y una llamada de inicialización después de la lista.

En una plantilla 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 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.

Si escribes los marcadores tú mismo (por ejemplo en el Markdown de una página), usa el shortcode para emitir la llamada de inicialización en su lugar:

<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 las opciones del widget FastComments se configuran bajo [params.fastcomments] en hugo.toml, y pueden sobrescribirse por página en el front matter bajo [fastcomments]. Precedencia, de menor a mayor: site params, front matter de la página, parámetros del shortcode.

# hugo.toml
[params.fastcomments]
  tenantId = "your-tenant-id"
  hasDarkBackground = true
  voteStyle = 1
  enableSearch = true

# front matter de una página
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

Cuando no se proporciona ni url ni urlId, url por defecto es el permalink de la página para que los hilos de comentarios permanezcan vinculados a una URL estable.

Residencia de datos en la UE

Los clientes de la UE establecen region = "eu" para enrutar el widget a cdn-eu.fastcomments.com:

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

Nota sobre el uso de mayúsculas en las claves

Hugo convierte a minúsculas cada clave en hugo.toml y el front matter, pero los widgets de FastComments requieren claves en camelCase (tenantId, hasDarkBackground). Este componente restaura automáticamente la capitalización correcta para cada opción conocida de primer nivel, así que escriba las opciones en su forma normal camelCase. Las claves anidadas dentro de un valor objeto (por ejemplo las claves de un mapa translations, o los campos de pageReactConfig) no se restauran. Configure esas a través de la interfaz de personalización del panel de FastComments en su lugar.

Para la lista completa de opciones de widgets, consulte la documentación de personalización de FastComments. Dos widgets requieren una opción obligatoria que no tiene valor predeterminado:

• fastcomments-collab-chat and fastcomments-image-chat requieren target, un selector CSS para el elemento al que se debe adjuntar.
• fastcomments-user-activity-feed requiere userId.

• Documentación de FastComments
• Personalización y configuración
• Documentación de Hugo

Estos componentes son envoltorios ligeros alrededor de nuestros widgets centrales de VanillaJS. Podemos actualizar esos widgets (corregir errores, añadir funcionalidades) sin publicar este repositorio, por lo que un historial de lanzamientos silencioso no significa que FastComments esté inactivo. Consulte nuestro blog para actualizaciones. Los cambios que rompen la compatibilidad en los widgets subyacentes se publican aquí con un incremento de versión.