Agregar comentarios a tu sitio Hugo

Proporcione a su agente de codificación el contexto de FastComments que necesita: widgets, configuración, Secure SSO, la API REST y los SDK:

npx skills add fastcomments/skills

Funciona con Claude Code, Codex, Cursor, Copilot, Gemini y cualquier otro agente que soporte el skills CLI soporta.

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.

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

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

Desde la raíz de tu sitio:

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

Luego añade la importación a tu hugo.toml:

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

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

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

Luego referéncialo desde tu hugo.toml. Colócalo junto a tu propio tema; las entradas posteriores tienen prioridad, así que mantén tu tema primero:

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 sección), usa el widget de recuento masivo. Obtiene todos los recuentos de la página en una sola petición. Hay dos piezas: un marcador junto a cada elemento y una llamada de init 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 renderiza <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, usando el mismo identificador que el widget de comentarios usa para esa página (su urlId, o su permalink cuando no hay urlId establecido), de modo que los recuentos coincidan con los hilos reales. bulk-count.html emite la única petición que los rellena.

Si escribes los marcadores tú mismo (por ejemplo, en el Markdown de una página), usa el shortcode para emitir la llamada de init 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.