Etiquetas HEAD personalizadas

Herramientas de IA
⭐
Available in Pro Projects

Aplica JavaScript, estilos, enlaces y metadatos a todo el proyecto, que se añaden a la etiqueta HEAD de la página.

Personalizar las etiquetas HEAD

Para personalizar las etiquetas HEAD:

  • Abre Project Settings → Customisation.

  • En la tarjeta Custom code, haz clic en Edit HEAD tags.

  • Introduce las etiquetas personalizadas como lo harías en HTML y luego haz clic en Save draft en el menú superior. Esto guardará el HTML en modo borrador, para que puedas probarlo.

  • Para publicarlo para los lectores, haz clic en Save & publish.

  • Para descartar los cambios del borrador, haz clic en Revert.

Todas las etiquetas personalizadas solo se ejecutarán en modo en vivo y no se cargarán en modo editor.

Etiquetas HEAD de la organización

Si tus proyectos pertenecen a una organización, el propietario puede mantener un único conjunto de etiquetas HEAD compartido entre ellos desde Configuración de la organización → Custom HEAD tags.

Un proyecto no las hereda automáticamente. Para activarlas, abre Project Settings → Customisation y activa Use organisation HEAD tags. Las etiquetas de la organización se inyectan antes que las del propio proyecto, así que, cuando ambas definen lo mismo, prevalece la del proyecto.

Formato de las etiquetas

Las etiquetas deben añadirse completas, tal como existirían en HEAD, por ejemplo:

<!-- Script to install jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Install Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Add your own CSS - You can also do that through Custom CSS --> <style> .my-container{ width: 100%; } </style> <!-- Add meta such as OpenGraph title --> <meta property="og:title" content="X Documentation">

No añadas <body>, <html> ni otras etiquetas que no existan normalmente en HEAD.

Advertencia

No uses async ni defer en tus scripts. Los scripts se cargarán de forma asíncrona de todos modos.

Solo ES5

Para garantizar la compatibilidad con todos los navegadores, no añadas scripts que contengan sintaxis no compatible con ECMAScript 5 (ES5, ECMAScript 2009). No comprobamos ni compilamos a ES5 automáticamente. Si no lo respetas, tu sitio podría quedar inutilizable para algunos o todos los usuarios.

¿Por qué añadir scripts?

Al añadir scripts, puedes hacer más con tu documentación:

  • Instalar servicios de terceros para hacer seguimiento, analizar e interactuar con tus lectores.

  • Crear scripts que interactúen con Custom HTML en las páginas o con Página de inicio personalizada.

  • Añadir reglas de redirección con JavaScript.

  • Añadir tu propio conjunto de iconos con CSS.

  • Mejorar tu SEO añadiendo las etiquetas META relevantes para tu negocio.

  • Cambiar el texto de la interfaz.

Hooks externos

Hay varios eventos que dispara DeveloperHub y que pueden ayudarte a lograr el nivel de personalización que necesitas. La lista completa de hooks está disponible en Javascript Dispatched Events.

Proyecto cargado

Para detectar cuándo se carga un proyecto, que es también cuando se cargan la mayoría de los elementos de la página, puedes escuchar un evento personalizado en document llamado onprojectloaded. Un ejemplo:

<script> document.addEventListener('onprojectloaded', function () { const topnav = document.querySelector(".topnav"); // .topnav is loaded at this time, probably not before this. topnav.classList.add('wide'); }); </script>

Si pretendes modificar la navegación superior, debes usar este evento.

Usa `onprojectloaded` en lugar de `document.onload`.

Como DeveloperHub es una aplicación de una sola página, document.onload no tiene efecto en las etiquetas HEAD personalizadas. Todas las etiquetas HEAD personalizadas se cargan realmente después de que se llame a document.onload. Usa onprojectloaded siempre que necesites usar document.onload.

Cambios de sección

Para detectar cuándo cambia una sección (página de inicio, documentación), puedes escuchar un evento personalizado en document llamado onsectionchange. Un ejemplo:

<script> document.addEventListener('onsectionchange', function (event) { switch (event.detail.type) { case 'landing-page': // It is a landing page break; case 'documentation': // It is a documentation break; case 'reference': // It is a reference break; } }); </script>

Si la sección que cambió es una documentación, también se listan los índices.

Cambios de página

Para detectar cuándo cambia una página, puedes escuchar un evento personalizado en document llamado onpagechange. Un ejemplo:

<script> document.addEventListener('onpagechange', function (event) { console.log(event.detail.slug); // e.g. getting-started }); </script>

Reglas de redirección

Con JS personalizado, puedes configurar reglas de redirección en el front-end. Por ejemplo, si quieres redirigir uno de tus proyectos cuya versión semántica es inferior a 1.0 a otro, podrías usar algo como esto:

<script> const redirectDocs = function() { const regex = /^\/([0-9\.]+)\//i; const path = window.location.pathname; if ((match = regex.exec(path))) { const redirectPath = match[0]; const version = match[1]; const semver = version.split('.'); if (semver[0] < 1) { window.location.href = "https://alpha.always-blue.io"+redirectPath; } } } redirectDocs(); </script>

O, si has cambiado el slug de una documentación, quizá quieras redirigir al nuevo slug:

<script> const redirectDocs = function() { const oldDoc = "/old-doc-slug"; const newDoc = "/new-doc-slug"; const path = window.location.pathname; if (path.includes(oldDoc)) { window.location.pathname = path.replace(oldDoc, newDoc); } } redirectDocs(); </script>

Si necesitas reglas de redirección más potentes, consulta las reglas de redirección 301 en el servidor.

Página de inicio personalizada cargada

Consulta Página de inicio personalizada.

Entorno de pruebas

Por el momento no hay un entorno de pruebas para probar los cambios en las etiquetas HEAD. Sin embargo, puedes crear un proyecto nuevo y probar en él las etiquetas HEAD antes de aplicarlas a tu proyecto de producción. Avísanos si necesitas ayuda para configurar el proyecto.

Desactivar las etiquetas HEAD

Para comprobar si un script o estilo de las etiquetas HEAD está causando problemas, puede que quieras desactivar momentáneamente todas las etiquetas HEAD solo en tu navegador. Para ello, añade una consulta ?disableScripts=true a cualquier URL de documentación publicada.

Por ejemplo, si tu documentación está disponible en https://example.com/docs, puedes desactivar las etiquetas HEAD durante tu sesión usando https://example.com/docs?disableScripts=true.

Cuando actualices la página sin disableScripts=true, las etiquetas HEAD volverán a estar activadas.

customisation
Páginas relacionadas
Personalización visualCSS personalizadoPie de página personalizadoPágina de inicio personalizadaTraducción de la interfaz
  Última actualización el Aug 29, 2026
Creado con DeveloperHub

Need help? Visit our community forums or contact us.

Editar en GitHub
Tabla de Contenido
Etiquetas HEAD personalizadasPersonalizar las etiquetas HEADEtiquetas HEAD de la organizaciónFormato de las etiquetas¿Por qué añadir scripts?Hooks externosEntorno de pruebasDesactivar las etiquetas HEADProyecto cargadoCambios de secciónCambios de páginaReglas de redirecciónPágina de inicio personalizada cargada