Página de inicio personalizada

Herramientas de IA

⭐

Available in Pro Projects

La mayoría de las páginas de inicio se crean mejor con el Diseñador de páginas de inicio visual. Si desea control total y personalización de marca, puede crear una página de inicio con su propio HTML, CSS y JavaScript. Esto funciona tanto para la página de inicio principal como para cualquier página personalizada.

Usar página de inicio personalizada

Para cambiar una página de inicio a HTML personalizado:

En la navegación superior del editor, abra el selector de ámbito y seleccione Landing Pages.
Abra Manage Landing Pages y seleccione la página (la página de inicio principal o una página personalizada).
En Customise, active Use custom HTML page.

Para modificar el HTML de la página de inicio:

Haga clic en Edit HTML.

Pegue o escriba el HTML que formará su página de inicio personalizada. Haga clic en Save. Esto guardará el HTML en modo borrador, para que pueda probarlo.
Para publicarlo para los lectores, haga clic en Save & Publish.
Para revertir los cambios del borrador, haga clic en Revert.

Escriba solo el cuerpo: no una página HTML completa

El HTML que proporcione se insertará en el cuerpo de la página de inicio dentro de un div con la clase landing-page-container. Por lo tanto, no envuelva todo en la etiqueta <html>. La etiqueta <head> también se descartará. Consulte nuestros ejemplos a continuación.

Esto también se aplica a <style>. Todos los estilos deben moverse a CSS personalizado.

Creación de una página de inicio

Al personalizar la página de inicio, puede introducir HTML que se insertará de forma asíncrona en su página de inicio.

HTML sin validar

Tenga en cuenta que no evaluamos ni validamos el HTML insertado; verifique que sea válido.

Añadir CSS

Si desea añadir CSS, puede hacerlo en CSS personalizado, o en Etiquetas HEAD personalizadas dentro de una etiqueta <style>, o incluso enlazar CSS externo mediante la etiqueta <link>.

CSS global

Recuerde que el CSS se aplica globalmente. Modificar clases con nombres convencionales (especialmente selectores de Bootstrap), como .container, puede tener efectos no deseados.

Añadir JavaScript

Si desea añadir JavaScript, puede hacerlo en Etiquetas HEAD personalizadas dentro de una etiqueta <script>. Si desea reutilizar las tarjetas generadas automáticamente que DeveloperHub crea a partir de su contenido, puede escuchar un evento dedicado oncardschanged de esta manera:

Este evento también indica que el HTML de la página de inicio ya se ha cargado y que puede consultar sus selectores.

El detail incluye docs y refs (y groups cuando su proyecto usa grupos de navegación), reflejando la estrategia de generación de tarjetas. La salida del evento para la página de inicio principal tiene el siguiente aspecto:

CustomEvent { "detail": { "sectionType": "landing-page" "docs": [ { "title": "Start Here", "link": "/support-center", "details": [ {"title": "Getting Started", "link": "/support-center/getting-started"}, {"title": "Writing Documentation", "link": "/support-center/writing-documentation"}, {"title": "Structuring Documentation", "link": "/support-center/structuring-documentation"} ] }, { "title": "Blocks", "link": "/support-center", "details": [ {"title": "Code Blocks", "link": "/support-center/code-blocks"}, {"title": "Callouts", "link": "/support-center/callouts"}, {"title": "Images", "link": "/support-center/images"} ] }, ], "refs": [ { "title": "API", "link": "/api" } ] } }

Para una página de inicio que no sea la principal, el detalle sería así:

CustomEvent { "detail": { "sectionType": "custom-page", "sectionId": 612 "docs": [ { "title": "Start Here", "link": "/support-center", "details": [ {"title": "Getting Started", "link": "/support-center/getting-started"}, {"title": "Writing Documentation", "link": "/support-center/writing-documentation"}, {"title": "Structuring Documentation", "link": "/support-center/structuring-documentation"} ] }, { "title": "Blocks", "link": "/support-center", "details": [ {"title": "Code Blocks", "link": "/support-center/code-blocks"}, {"title": "Callouts", "link": "/support-center/callouts"}, {"title": "Images", "link": "/support-center/images"} ] }, ], "refs": [ { "title": "API", "link": "/api" } ] } }

Donde sectionId es un identificador que puede usar para personalizar qué elementos se añaden a cada página de inicio.

Enlazar a contenido

Para navegar al contenido de la documentación desde su página de inicio, use rutas absolutas. Al usar rutas absolutas, la navegación se realiza internamente en la aplicación de una sola página, en lugar de una navegación completa y lenta. Por ejemplo:

<a href="/support-center/getting-started"> Getting Started </a>  <a href="/docs/support-center/example-requests"> Example Requests </a>  <a href="https://docs.example.com/support-center/getting-started"> Example Requests </a>

Si crea el contenido dinámicamente con JavaScript, puede usar window.applyClickHandlersOnLinks() al final de su JavaScript (cuando se hayan añadido todos los enlaces) para que todos los enlaces de ruta absoluta naveguen internamente:

const anchor = document.createElement('A'); anchor.href = "/support-center/getting-started"; window.applyClickHandlersOnLinks();

Obsoleto

Anteriormente, la función openLink se encargaba de abrir los enlaces internos. Ya no es necesaria y estas funciones se pueden eliminar.

Consejos y trucos

Ocultar la barra de navegación superior

Si desea ocultar la barra de navegación superior en la página de inicio personalizada, puede hacerlo con JavaScript:

Consulte Reproducir la página de inicio predeterminada para obtener instrucciones paso a paso sobre cómo crear una página de inicio como la nuestra.

customisation

Última actualización por Zaid Daba'een el Aug 17, 2026

Anything missing? Leave us feedback