Páginas HTML

Cada archivo .html de un proyecto es una página, un documento completo o un fragmento; htmlpress lee ambos de la misma forma. Sus etiquetas <title> y <meta name="…"> son sus metadatos, las claves que lista Frontmatter, y el resto de su cuerpo es el contenido. Una página Markdown es la misma página, escrita en Markdown.

Una página es HTML plano, y htmlpress no lo restringe: cualquier elemento, atributo, SVG en línea, <canvas>, <iframe>, elemento personalizado, estilo o script funciona tal como está escrito. No hay lenguaje de plantillas ni lista de permitidos. Htmlpress envuelve la página en el layout del sitio, así que obtiene la navegación, el tema y la búsqueda, y deja el resto al navegador.

Eso hace de una página algo más que un documento: un panel, un informe, una presentación o un explorador interactivo es un solo archivo .html. Consulta Ejemplos para ver una docena, cada uno construido sobre datos públicos reales.

Una página autocontenida

Los <style>, <script> y <link> propios de una página se conservan y se añaden al head del layout, después del tema. Los de un fragmento son los que van antes de su primer contenido; los de un documento completo, su <head>.

<title>Contador</title>
<style>
  .counter button {
    border: 1px solid var(--htmlpress-border);
    background: var(--htmlpress-surface);
    color: var(--htmlpress-text);
  }
</style>
<script type="module">
  const button = document.querySelector(".counter button")
  let count = 0
  button.addEventListener("click", () => {
    button.textContent = `${++count} clics`
  })
</script>

<h1>Contador</h1>
<div class="counter">
  <button type="button">Haz clic</button>
</div>

Encajar en el sitio

• Limita los estilos a una clase. El CSS de una página se aplica a todo el documento, layout incluido, así que antepón a cada regla una clase del elemento raíz de la página, como .counter arriba.
• Usa los tokens del tema. Los colores de los tokens --htmlpress-* siguen el tema claro y oscuro y cualquier sobrescritura, sin media query propia.
• Ejecuta los scripts como módulos. type="module" se ejecuta cuando la página ya está analizada y mantiene sus nombres fuera del ámbito global.
• Prefiere elementos semánticos. El tema ya da estilo a encabezados, tablas, listas y formularios; una página solo necesita CSS propio para lo que HTML no tiene elemento.

Lo que htmlpress cambia

El contenido entra en el layout tal como está escrito, salvo por estos pasos en tiempo de compilación:

• Los <h2> a <h6> sin id reciben uno, y los <h2> a <h4> llenan la tabla de contenidos; consulta Encabezados.
• Los enlaces al archivo de una página se convierten en su URL, y las URL relativas se resuelven desde el archivo fuente; consulta Enlaces.
• <pre><code class="language-*"> se resalta; consulta Bloques de código.
• En la prosa, las URL sueltas se vuelven enlaces, los códigos :emoji: emoji y $…$ fórmulas; consulta Sintaxis avanzada. El código, los enlaces, los scripts, los estilos y cualquier elemento con data-literal quedan intactos.
• Las etiquetas htmlpress-* se convierten en componentes; consulta Elementos enriquecidos.

Para una página que no quiere nada del marco del sitio, como una página de inicio, elige otro layout con <meta name="layout">; consulta Frontmatter.