# Rutas personalizadas

> Añade páginas con su propio marco: cualquier archivo .html es una ruta, y un layout en .htmlpress/layouts/ la viste.

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

**HTML**

```html
<!-- 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>
```

**Markdown**

```md
<!-- 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](/es/customization/translations/)            |
| `<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](/es/authoring/rich-elements/#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](https://github.com/datisthq/htmlpress/tree/main/.htmlpress) 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-*`.

```html
<!-- .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](/es/customization/overriding-escaping/): reemplaza el layout del sitio o un componente en lugar de añadir uno nuevo.
- [Metadatos del sitio](/es/customization/site-metadata/): el título y el favicon del sitio, que también aparecen en las rutas personalizadas.