Páginas modulares
El concepto de Páginas Modulares puede ser un poco difícil de entender al principio, pero cuando lo hagas verás lo convenientes que son de usar. Una Página Modular es una colección de páginas apiladas una encima de otra para crear una única página unificada. Esto te permite crear una estructura de página compleja usando el enfoque de bloques de construcción LEGO, ¡y a quién no le gusta LEGO!
¿Qué son y qué no son las Páginas Modulares?
En Grav, las Páginas son un concepto amplio que abarca casi cualquier tipo de combinación de elementos que puedas imaginar en un sitio web. Es importante destacar que las Páginas Modulares son un subconjunto de este concepto pero no son lo mismo que una página regular. Una página regular es bastante independiente, en el sentido de que Grav la renderizará y mostrará sin depender de otro contenido como otras páginas o páginas hijas. Sin embargo, una página Modular no tiene páginas hijas. Esto se ilustra imaginando una estructura de página simple:
Una página regular encontrada en dominio.com/libros tiene algunos detalles sobre qué libros están a la venta. Existen varias páginas hijas para esta Página, como dominio.com/libros/los-viajes-de-gulliver y dominio.com/libros/el-hobbit. Sus carpetas se nombran igual que la dirección que renderiza Grav: /pages/libros, /pages/libros/los-viajes-de-gulliver, y /pages/libros/el-hobbit. Esta estructura no funcionaría en una Página Modular.
Una Página Modular no tiene páginas hijas en el mismo sentido, sino que tiene Módulos que conforman las partes de la página. Entonces, en lugar de varios libros ubicados debajo de la página de nivel superior, la página modular muestra sus módulos en la misma página. Los Viajes de Gulliver y El Hobbit aparecen ambos en dominio.com/libros, con las rutas /pages/libros/_los-viajes-de-gulliver y /pages/libros/_el-hobbit. Por lo tanto, las Páginas Modulares no son directamente compatibles con las Páginas regulares y tienen su propia estructura.
Ejemplo de Estructura de Carpetas
Usando nuestro Esqueleto de Una Página como ejemplo, explicaremos cómo funcionan las Páginas Modulares con mayor detalle.
La Página Modular en sí se ensambla a partir de páginas que existen en subcarpetas ubicadas bajo la carpeta principal de la página. En el caso de nuestro Esqueleto de Una Página, esta página se encuentra en la carpeta 01.inicio. Dentro de esta carpeta hay un único archivo modular.md que le indica a Grav qué subpáginas debe incluir para ensamblar la Página Modular y en qué orden mostrarlas. El nombre de este archivo es importante porque le indica a Grav que use la plantilla modular.html.twig del tema actual para renderizar la página.
Estas subpáginas están en carpetas con nombres que comienzan con un guión bajo (_). Al usar un guión bajo, le estás diciendo a Grav que estos son Módulos, no páginas independientes. Por ejemplo, las subcarpetas pueden llamarse _caracteristicas o _vitrina. Estas páginas no son enrutables - no se puede acceder a ellas directamente en un navegador, y no son visibles - no aparecen en un menú.
En el caso de nuestro Esqueleto de Una Página, hemos creado la estructura de carpetas que se muestra a continuación.
Cada subcarpeta contiene un archivo Markdown que actúa como una página.
Los datos dentro de estas carpetas de Módulos - incluyendo archivos Markdown, imágenes, etc. - se extraen y muestran en la página Modular. Esto se logra creando una página principal, definiendo una Colección de Páginas en el YAML FrontMatter de la página principal, y luego iterando sobre esta Colección en una plantilla Twig para generar la página HTML combinada. Un tema ya debería tener una plantilla modular.html.twig que hará esto y se usa cuando creas un tipo de Página Modular. Aquí hay un ejemplo simple de una modular.html.twig:
{% for module in page.collection() %}
{{ module.content|raw }}
{% endfor %}Aquí hay un ejemplo de la página modular resultante, destacando las diferentes carpetas modulares que se usan.
Configuración de la Página Principal
Como puedes ver, cada sección extrae contenido de una carpeta de Módulo diferente. Determinar qué carpetas de Módulo se usan, y en qué orden, ocurre en el archivo Markdown principal en la carpeta padre del Módulo. Aquí está el contenido del archivo modular.md en la carpeta 01.inicio.
---
title: Sitio Demo de Una Página
menu: Inicio
onpage_menu: true
body_classes: "modular header-image fullwidth"
content:
items: '@self.modular'
order:
by: default
dir: asc
custom:
- _vitrina
- _destacados
- _llamada
- _caracteristicas
---Como puedes ver, no hay contenido real en este archivo. Todo se maneja en el YAML FrontMatter en el encabezado. El Título de la página, la asignación del Menú, y otras configuraciones que encontrarías en una página típica se encuentran aquí. El Contenido le indica a Grav que cree el contenido basado en una Colección de páginas modulares, e incluso proporciona un orden manual personalizado para renderizarlas.
Módulos
El archivo Markdown para cada Módulo puede tener su propia plantilla, configuraciones, etc. Para todos los efectos, tiene la mayoría de las características y configuraciones de una página regular, simplemente no se renderiza como una. Recomendamos que las configuraciones de toda la página, como taxonomía, se coloquen en el archivo Markdown principal que controla toda la página.
Las Páginas Modulares en sí se manejan igual que las Páginas regulares. Aquí hay un ejemplo usando el archivo text.md en la página _llamada que aparece en el medio de la página Modular.
---
title: Llamada a la acción de la página de inicio
image_align: right
---
## Contenido Liberado
Ya no eres un _esclavo de tu CMS_. Grav **te empodera** para crear cualquier cosa, desde un [sitio simple de una página](#), un [blog hermoso](#), un [sitio de producto](#) potente y lleno de características, ¡o casi cualquier cosa que puedas imaginar!Como puedes ver, el encabezado de la página contiene información básica que podrías encontrar en una página regular. Tiene su propio título que se puede referenciar, y opciones de página personalizadas, como la alineación de la imagen se pueden establecer aquí, igual que en cualquier otra página.
El archivo de plantilla para el archivo text.md debe ubicarse en la carpeta /templates/modular de tu tema, y debe llamarse text.html.twig. Este archivo, como cualquier otro archivo de plantilla Twig para cualquier otra página, define las configuraciones, así como cualquier diferencia de estilo entre él y la página base.
<div class="modular-row callout">
{% set image = page.media.images|first %}
{% if image %}
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
{% endif %}
{{ content|raw }}
</div>En general, las Páginas Modulares son muy simples. Solo tienes que acostumbrarte a la idea de que cada sección en tu página se define en un Módulo que tiene su propia carpeta debajo de la página real. Se muestran todas a la vez a tus visitantes, pero están organizadas de manera ligeramente diferente a las páginas regulares. Siéntete libre de experimentar y descubrir todo lo que puedes lograr con una Página Modular en Grav.