Rutas personalizadas

Actualizado el 1 nov 2026

En htmlpress cada archivo .html ya es una ruta: una página se sirve en una carpeta con el nombre de su archivo, sin registro ni cambios de configuración. Lo que añade una ruta personalizada es su propio marco: un layout propio en .htmlpress/layouts/, que la página elige con <meta name="layout">.

Ejemplo mínimo

<!-- about.html -->
<title>About</title>
<meta name="layout" content="landing">

<h1>About</h1>
<p>Anything you'd write in a normal HTML page, here.</p>

<!-- .htmlpress/layouts/landing.html -->
<body>
  <htmlpress-header role="banner">
    <htmlpress-brand></htmlpress-brand>
    <htmlpress-theme-toggle></htmlpress-theme-toggle>
  </htmlpress-header>
  <main><htmlpress-content></htmlpress-content></main>
</body>

<!-- about.md -->
---
title: About
layout: landing
---

# About

Anything you'd write in a normal Markdown page, here.

<!-- .htmlpress/layouts/landing.html -->
<body>
  <htmlpress-header role="banner">
    <htmlpress-brand></htmlpress-brand>
    <htmlpress-theme-toggle></htmlpress-theme-toggle>
  </htmlpress-header>
  <main><htmlpress-content></htmlpress-content></main>
</body>

Guarda y visita /about/. Sin el meta, la página recibe el layout del sitio, el mismo marco que todas las demás páginas: banner, cabecera, barra lateral, tabla de contenidos y paginador.

Elegir el marco

Un layout es HTML simple como layout.html, y empieza vacío: no se dibuja nada alrededor de la página hasta que lo añades. Combina tantos elementos de layout como necesite la página:

Lo que pones en el layout	Lo que obtienes
`<htmlpress-content>`	el contenido de la página
`<htmlpress-brand>`	el título del sitio, tras el `logo` si está definido, enlazando al inicio
`<htmlpress-banner>`	el `banner` de `htmlpress.yaml`
`<htmlpress-links>`	los `links` de la cabecera
`<htmlpress-nav>`	todas las páginas, agrupadas por carpeta de primer nivel, y luego los `links` de la barra lateral
`<htmlpress-breadcrumbs>`	el inicio, cada carpeta por encima de la página y, después, la página
`<htmlpress-page-toc>`	los `<h2>` y `<h3>` de la página
`<htmlpress-pager>`	las páginas anterior y siguiente
`<htmlpress-edit>`	el enlace "Editar esta página" de `edit`
`<htmlpress-toolbar>`	la copia en Markdown de la página, para verla, copiarla o abrirla en un chat
`<htmlpress-footer>`	un crédito "Hecho con Htmlpress"
`<htmlpress-language>`	el selector de idioma, en un sitio con traducciones
`<htmlpress-shortcuts>`	el menú de atajos de teclado, oculto en un móvil
`<htmlpress-skip>`	un enlace "Saltar al contenido" a `#content`, en el idioma de la página
nada más que `<htmlpress-content>`	una página en blanco, toda tuya

El armazón que los rodea también son elementos, nunca clases: <htmlpress-shell>, <htmlpress-sidebar>, <htmlpress-main>, <htmlpress-header>, <htmlpress-page> y <htmlpress-aside>; consulta Layout.

Htmlpress rellena el <head> del layout de la misma forma para todos los layouts, así que el tema, los metadatos del sitio y las etiquetas del head propias de la página siempre están ahí. Una página de inicio normalmente solo quiere la cabecera, como en el ejemplo de arriba. La página de inicio de este sitio está construida así.

Cómo encaja con el resto del sitio

Las rutas son URL. Las rutas de archivo reflejan las rutas de URL, cada página en su propia carpeta: guide/quickstart.html es /guide/quickstart/, y index.html se sirve en su carpeta, guide/index.html en /guide/, con cada nombre convertido en slug. Los enlaces relativos entre páginas siguen funcionando.
La ruta raíz /. index.html en la raíz es la página de inicio; dale su propio layout para reemplazar el marco de la documentación por una portada.
La navegación la sigue listando. Una página con su propio layout es una página como cualquier otra: aparece en la barra lateral, en llms.txt y en el sitemap.
Nombres de layout. Un nombre consta de letras minúsculas, dígitos y guiones. Una página que nombra un layout inexistente hace fallar la compilación.
No encontrado. Un 404.html en la raíz es la página que muestra un hosting para una URL inexistente; se excluye de la navegación, y un proyecto sin ella obtiene un "Página no encontrada" integrado.

Importar primitivas de htmlpress

Un layout y una página usan los mismos componentes que usa el propio htmlpress: cualquier componente htmlpress-*, integrado o tuyo desde .htmlpress/components/, se renderiza igual en ambos, enlazando sus estilos y scripts solo donde se usa. Da estilo a un layout con sus propios componentes, como hace la página de inicio de este sitio con los suyos htmlpress-landing-*, o con los tokens --htmlpress-*.

<!-- .htmlpress/layouts/landing.html -->
<body>
  <htmlpress-landing-hero></htmlpress-landing-hero>
  <main><htmlpress-content></htmlpress-content></main>
  <htmlpress-footer></htmlpress-footer>
</body>

Recursos estáticos

Cada archivo del proyecto que no es una página se copia tal cual a la salida, en la misma ruta. Pon un robots.txt, un favicon.svg propio o un og-image.png junto a tus páginas; un archivo del proyecto con el nombre de uno generado (robots.txt, sitemap.xml, llms.txt) tiene prioridad sobre él.

Ver también

Sobrescritura/Escape: reemplaza el layout del sitio o un componente en lugar de añadir uno nuevo.
Metadatos del sitio: el título y el favicon del sitio, que también aparecen en las rutas personalizadas.

Hecho con ❤ y Htmlpress