Añade un agente de voz con IA a un blog de Hexo

Cómo añadir AnveVoice a un sitio Hexo

Hexo genera HTML estático a partir de las plantillas de tu tema. La forma más resistente a las actualizaciones de añadir la etiqueta de AnveVoice es un pequeño archivo en la carpeta scripts de tu sitio que llama al injector de Hexo para colocarla antes de la etiqueta de cierre body. Editar el layout del tema también funciona. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: scripts/anvevoice.js en la raíz del sitio (injector) o en la plantilla layout del tema
• Programación necesaria: Un archivo JavaScript de 6 líneas, o una línea pegada en una plantilla
• Límites del plan: Ninguno por parte de Hexo; tú alojas la carpeta public generada
• Tiempo: Unos 5 minutos más hexo generate y el despliegue

Por qué el injector es mejor que editar el tema

Un sitio de Hexo se compone de tres capas: tus publicaciones en Markdown, la configuración del sitio y una carpeta de tema con plantillas de layout, scripts del tema y recursos estáticos. La mayoría de las personas instala un tema desde npm o lo clona en themes/. Si pegas una etiqueta script en ese tema y lo actualizas después, tu cambio se sobrescribe. Hexo ofrece un injector justo para esto. Según la documentación de la API de Hexo, hexo.extend.injector.register recibe una entrada (dónde insertar el HTML), un valor (una cadena o una función que devuelve una cadena) y un destino opcional que limita qué layouts lo reciben. Los valores de entrada incluyen head_begin, head_end, body_begin y body_end. Hexo también carga cualquier archivo JavaScript que coloques en la carpeta scripts del sitio durante la inicialización, como explica la documentación de plugins, así que basta con un script de un archivo y no se modifica ningún tema. Una advertencia de la documentación: su propio ejemplo para una etiqueta script omite la etiqueta de cierre script. Al registrar una etiqueta, incluye tú la etiqueta de cierre.

• 1. Obtén tu etiqueta de instalación — Desde app.anvevoice.app, copia el embed ID del bot que creaste para este sitio y sustitúyelo por YOUR_EMBED_ID. Los parámetros de URL opcionales son &position=bottom-left y &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: registra la etiqueta con el injector (recomendado)

Para limitar el agente de voz a una parte del sitio, pasa un tercer argumento. El injector acepta default, home, post, page, archive, category, tag o el nombre de un layout personalizado; por ejemplo, register('body_end', tag, 'post') solo para las páginas de artículos.

• 1. Crea la carpeta scripts — En la raíz de tu proyecto de Hexo (la carpeta que contiene _config.yml, source y themes), crea una carpeta llamada scripts si todavía no existe.
• 2. Añade scripts/anvevoice.js — Crea el archivo con el siguiente contenido. Las comillas simples envuelven la cadena, así que las comillas dobles de la etiqueta no necesitan escaparse. body_end coloca la etiqueta justo antes de la etiqueta de cierre body de cada página generada. hexo.extend.injector.register( 'body_end', '<script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>' );
• 3. Limpia y regenera — Ejecuta hexo clean para borrar el archivo de caché db.json y la carpeta public, y luego hexo generate para reconstruir. Previsualiza con hexo server, que escucha en el puerto 4000 de forma predeterminada.

Método 2: pega la etiqueta en el layout del tema

La documentación de plantillas de Hexo explica que los layouts contienen la estructura compartida por las plantillas y que cada layout debe incluir una variable body donde se coloca el contenido de la página. La documentación de temas enumera la carpeta del tema como _config.yml, languages, layout, scripts y source. Dentro de layout, busca el archivo de layout compartido (su extensión depende del motor de plantillas de tu tema: .ejs, .njk, etc.) y pega la etiqueta justo antes de la etiqueta de cierre body. Trabaja en una bifurcación o copia del tema, porque una actualización del tema original eliminará tu cambio.

• 1. Localiza el archivo de layout — Abre themes/<tu-tema>/layout y busca el archivo que envuelve todas las páginas, normalmente llamado layout.ejs, layout.njk o similar.
• 2. Pega la etiqueta — Coloca la línea del script de AnveVoice justo encima de la etiqueta de cierre body, guarda y ejecuta después hexo clean y hexo generate.

Despliegue y consideraciones sobre la caché

• hexo generate escribe archivos estáticos en public. El botón de voz solo aparece en el sitio en vivo después de ejecutar tu despliegue normal (hexo deploy, un trabajo de CI o un alojamiento que compila desde Git).
• Si el sitio está en un subdirectorio, define correctamente url y root en _config.yml; esto no afecta a la etiqueta de AnveVoice, que usa una dirección absoluta, pero sí afecta a cómo se sirven tus propias páginas.
• Las cachés del CDN y del navegador pueden conservar HTML antiguo. Purga la caché de tu alojamiento o CDN después del primer despliegue que incluya la etiqueta.
• La etiqueta debe servirse por HTTPS para que el micrófono funcione; usa HTTPS en el lado del alojamiento.

Comprueba que funciona

• 1. Busca en la salida generada — Después de hexo generate, busca embed.js en la carpeta public. Debería aparecer en cada página que hayas indicado, una vez por página.
• 2. Prueba la página en vivo — Abre el blog desplegado en una ventana privada. El botón redondo del micrófono aparece abajo a la derecha; haz clic en él, permite el acceso al micrófono y haz una pregunta sobre tus publicaciones.

Problemas habituales

• No hay botón después del despliegue: los archivos generados estaban desactualizados. Ejecuta primero hexo clean, luego hexo generate, y confirma que la etiqueta está en public/index.html.
• El archivo del injector no hace nada: está en la carpeta scripts del tema de un tema que después reemplazaste, o el archivo no está en la carpeta scripts del nivel del sitio. Mantenlo en la raíz del proyecto.
• Página rota después de editar el layout: se eliminó una etiqueta de cierre al pegar. Compara con la plantilla original.
• El botón aparece en todas las páginas cuando solo querías las publicaciones: pasa el tercer argumento a register para apuntar a un layout.

Fuentes

• API de Hexo: Injector (https://hexo.io/api/injector) — consultado el 2026-10-14
• Documentación de Hexo: plugins (carpeta scripts) (https://hexo.io/docs/plugins) — consultado el 2026-10-14
• Documentación de Hexo: plantillas (layouts) (https://hexo.io/docs/templates) — consultado el 2026-10-14
• Documentación de Hexo: temas (https://hexo.io/docs/themes) — consultado el 2026-10-14
• Documentación de Hexo: comandos (clean, generate, server) (https://hexo.io/docs/commands) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio de documentación con MkDocs
• Cómo añadir AnveVoice a un sitio Jekyll
• Cómo añadir AnveVoice a un sitio Hugo
• Cómo añadir AnveVoice a un sitio de Eleventy

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.