El editor de páginas
Estructura
- Cabecera: título, ruta (un clic abre la página), Publicada, vista previa activada/desactivada, Guardar.
- Pestañas: HTML · Bloques (solo en páginas hechas con bloques, ver 7.6) · CSS · JS · Head · Ajustes.
- Vista previa en vivo a la derecha. La línea divisoria se puede arrastrar (doble clic la restablece; con el foco, también con las teclas de flecha). Arriba eliges escritorio, tableta o móvil.
La vista previa muestra los cambios sin guardar, también en los archivos CSS y JS. Se ejecuta en un entorno aislado: los scripts se ejecutan, pero no pueden acceder al admin ni a la API. En las páginas Catch-All hay un campo Subruta para simular, p. ej., mein-artikel.
Datos del template: debajo de la vista previa se puede desplegar el panel Datos del template (empieza contraído; la altura se ajusta arrastrando el borde). Muestra lo que ven los templates de esta página: las variables (page, site, route, today …), el resultado de nav() y children(), todas las Collections con sus campos y las primeras 20 entradas de data("slug"), así como las fuentes de datos REST, cuyos datos cargas con Obtener. Los objetos y las listas se despliegan nivel a nivel. Al pasar el ratón por una fila, {{ }} inserta la expresión correspondiente en la pestaña HTML, por ejemplo {{ nav().0.title }}. En las listas, {% for %} inserta un bucle sobre ellas. El panel sigue el título, el título SEO y la Subruta sin guardar. Las variables locales de bucles, {% set %} o parámetros de componentes solo surgen al renderizar y por eso no aparecen. Para ellas ayuda {{ wert|json }} en la vista previa.
Pestaña HTML
El HTML de la página, sin <html>, <head> ni <body>; el esqueleto lo pone el propio CMS (incluidos el juego de caracteres, el viewport, el título, la descripción, el CSS y el JS). Si aun así escribes un documento completo con <html>, se adopta sin cambios y el CSS/JS se insertan antes de </head> y </body>, respectivamente.
Barra de herramientas:
| Botón | Función |
|---|---|
| Snippet | Insertar un Snippet: como Contenido (copia), como Include (referencia) o, en Snippets con slots, como Componente con bloques fill preparados. |
| Imagen | Elegir una imagen de la gestión de archivos y definir texto alternativo, sizes y clase CSS → <img> listo con srcset. Como alternativa, como etiqueta de template {{ image(…) }}, que siempre usa el texto alternativo actual. |
| Enlace a archivo | Insertar un enlace a un archivo (p. ej. PDF). |
| Datos | Insertar un bucle sobre una Collection o fuente REST, con todos los campos preparados. |
| Formatear | Sangrar el código ordenadamente (Prettier). Las etiquetas de template se conservan exactamente. |
| Ayuda de templates | Chuleta de todas las funciones de template. |
Emmet
En los editores HTML y CSS está integrado Emmet. Al escribir, una abreviatura reconocida se subraya con puntos y debajo se muestra una vista previa:
| Entrada + Tab | Resultado |
|---|---|
ul>li.item*3 |
lista con tres <li class="item"> |
section.hero>h1+p{Text} |
elementos anidados con contenido |
a[href=/kontakt]{Kontakt} |
enlace con atributo |
m10 (CSS, dentro de una regla) |
margin: 10px; |
bgc#f00 (CSS) |
background-color: #ff0000; |
Sin abreviatura reconocida, Tab sangra con normalidad. Esc descarta una marca si no querías escribir ninguna abreviatura. Más atajos: Ctrl+E (expandir), Ctrl+⇧+A (envolver la selección con una abreviatura), Ctrl+⇧+D (seleccionar la etiqueta circundante). Si renombras una etiqueta de apertura, la de cierre cambia con ella.
Formatear
Formatear (o Shift+Alt+F) da al código una forma legible: ideal para páginas importadas, que a menudo están en una sola línea. Ctrl+Z lo deshace en un solo paso.
- Las etiquetas de template (
{{ … }},{% … %}) se protegen antes y se vuelven a insertar exactamente. - Donde un espacio adicional sería visible (p. ej. entre enlaces pegados entre sí), Prettier corta la línea de otra manera, por ejemplo
</a\n><a. Parece raro, pero no cambia la presentación. - Si el HTML tiene errores (p. ej. una etiqueta sin cerrar), aparece un mensaje con línea y columna, y el código no se modifica.
Pestaña Head
Contenido adicional para <head>: metaetiquetas, datos de Open Graph, fuentes, analítica. Se admite sintaxis de template:
<meta property="og:title" content="{{ page.meta_title }}">
<link rel="canonical" href="https://www.firma.de{{ page.path }}">