Añade un agente de voz con IA a un sitio Hugo (guía 2026)

Cómo añadir AnveVoice a un sitio Hugo

En Hugo, el esqueleto de la página es la plantilla base, baseof.html. Añade la etiqueta de AnveVoice cerca del final de su body, idealmente a través de un pequeño parcial, y cada página que use la plantilla base la incluirá. Si tu tema tiene baseof.html, cópialo primero a tu proyecto. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: layouts/baseof.html (Hugo 0.146 y posteriores) o layouts/_default/baseof.html (versiones anteriores)
• Programación necesaria: Una línea de plantilla; sintaxis de plantillas Go para la protección opcional
• Límites del plan: Ninguno por parte de Hugo. El plan Free de AnveVoice es suficiente
• Tiempo: Unos 3 minutos

Qué estructura de plantillas tienes

Hugo v0.146.0 reimplementó la forma en que se buscan las plantillas. Según la visión general del sistema de plantillas del proyecto, la carpeta _default ya no existe, los archivos que estaban en layouts/_default ahora están directamente en layouts, y la carpeta partials se ha renombrado a _partials. La referencia de plantillas base de Hugo sitúa el esqueleto de la página en layouts/baseof.html. Ejecuta hugo version. A partir de la 0.146, usa layouts/baseof.html y layouts/_partials. En versiones anteriores, los mismos archivos están en layouts/_default/baseof.html y layouts/partials. El código que pegas es idéntico en ambos casos; solo cambian las rutas.

• 1. Copia la etiqueta de instalación — Crea un bot en app.anvevoice.app y copia su embed ID. Lo guardaremos en la configuración del sitio, así que ten el valor a mano. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: un parcial incluido desde baseof.html (recomendado)

Los parciales son los fragmentos reutilizables de Hugo. La referencia de parciales los muestra almacenados en layouts/_partials y llamados con la función partial, pasando el contexto como segundo argumento. Poner la etiqueta de AnveVoice en su propio parcial mantiene baseof.html ordenado y facilita eliminarla.

• 1. Guarda el embed ID — Añade una tabla params a hugo.toml (hugo.yaml y hugo.json también sirven). La referencia de parámetros de Hugo muestra los valores personalizados bajo [params], que se leen en las plantillas a través de .Site.Params. [params] anvevoiceEmbedId = "YOUR_EMBED_ID"
• 2. Crea el parcial — Crea layouts/_partials/anvevoice.html con este contenido. El contexto de Hugo aquí es la página; el valor de todo el sitio llega a través de site.Params. <script src="https://anvevoice.app/embed.js?embedId={{ site.Params.anvevoiceEmbedId }}" async></script>
• 3. Llámalo desde baseof.html — Abre layouts/baseof.html y añade la llamada en la línea anterior a la etiqueta de cierre body. {{ partial "anvevoice.html" . }} </body>

Si la plantilla base viene de un tema

Hugo busca primero en tu proyecto y después en los temas. La documentación de componentes de tema indica que, para cada archivo, Hugo comprueba primero el proyecto y que los layouts se combinan a nivel de archivo, ganando el archivo situado más a la izquierda. Por tanto, un layouts/baseof.html en tu proyecto reemplaza el archivo del tema con el mismo nombre. Copia el baseof.html del tema (lo encontrarás en themes/NOMBRE/layouts, o en la caché de módulos si usas Hugo Modules) a tu carpeta layouts y edita tu copia. A partir de ese momento dejarás de recibir los cambios de origen de ese archivo, que es el precio de la sustitución. Algunos temas exponen un gancho, como un parcial de pie personalizado; revisa primero la documentación del tema, porque usarlo evita copiar nada.

Carga solo en producción

La documentación de configuración indica que hugo server usa por defecto el entorno de desarrollo y hugo build usa el de producción, y que la variable HUGO_ENVIRONMENT o el flag --environment sustituyen esa elección. La función de plantilla hugo.IsProduction indica si el entorno en ejecución es el de producción, así que puedes envolver la llamada y mantener el botón fuera de tu vista previa local.

• 1. Envuelve la llamada al parcial — Edita baseof.html para que el parcial se renderice solo en las compilaciones de producción. {{ if hugo.IsProduction }} {{ partial "anvevoice.html" . }} {{ end }}

Particularidades de Hugo

• Las páginas que no usan baseof.html, como RSS, el mapa del sitio y los formatos de salida personalizados, nunca reciben la etiqueta. Es lo normal, porque no son páginas web.
• Hugo no vacía la carpeta public antes de compilar, así que pueden quedar archivos antiguos. Si renombras o eliminas algo, borra public primero para obtener una salida limpia.
• Los shortcodes y los archivos de contenido no son el lugar para una etiqueta de todo el sitio. Usar baseof.html es lo que la pone una vez en todas las páginas.
• Si un tipo de página define su propio baseof, por ejemplo layouts/docs/baseof.html, esa sección tiene su propio esqueleto y necesita la misma llamada al parcial.
• Las plantillas HTML de Hugo escapan automáticamente los valores dentro de URL. Un embed ID formado por letras y números pasa sin cambios.

Comprueba que funciona

• 1. Compila para producción — Ejecuta hugo (o hugo build). La guía de uso de Hugo indica que escribe el sitio en la carpeta public.
• 2. Busca en la salida — Abre public/index.html y busca anvevoice.app cerca del final del body. Debería aparecer una sola vez.
• 3. Carga una página — Sirve public o visita el sitio desplegado por HTTPS. El botón redondo del micrófono debe estar abajo a la derecha; haz clic en él y permite el micrófono.

Problemas habituales

• El ID de inserción aparece vacío: el nombre de la clave en el parcial no coincide con hugo.toml. Las claves de params no distinguen mayúsculas en Hugo, pero por lo demás deben coincidir, y las claves en kebab-case no pueden encadenarse en las plantillas.
• partial not found (parcial no encontrado): creaste layouts/partials en un sitio 0.146 o posterior (usa _partials), o _partials en un sitio anterior.
• Funciona con hugo build, pero no con hugo server: añadiste la protección de producción. Ejecuta con --environment production o elimina la protección.
• Netlify u otro alojamiento no muestra el botón: su compilación usa una versión antigua de Hugo. Fija la versión en los ajustes del alojamiento para que coincida con la local.

Fuentes

• Documentación de Hugo: nuevo sistema de plantillas en v0.146.0 (https://gohugo.io/templates/new-templatesystem-overview/) — consultado el 2026-10-14
• Documentación de Hugo: plantillas base (layouts/baseof.html) (https://gohugo.io/templates/base/) — consultado el 2026-10-14
• Documentación de Hugo: plantillas parciales (https://gohugo.io/templates/partial/) — consultado el 2026-10-14
• Documentación de Hugo: introducción a la configuración (entornos) (https://gohugo.io/configuration/introduction/) — consultado el 2026-10-14
• Documentación de Hugo: uso (carpeta public) y configurar params (https://gohugo.io/getting-started/usage/) — consultado el 2026-10-14
• Documentación de Hugo: configurar params (https://gohugo.io/configuration/params/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio de Eleventy
• Cómo añadir AnveVoice a un sitio Jekyll
• Cómo añadir AnveVoice a un sitio Hexo
• Cómo añadir AnveVoice a un sitio web HTML sencillo

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.