Enrutamiento del estilo de las páginas
Es tentador decir que Next.js popularizó esto, pero en realidad el concepto es tan antiguo como los sistemas de archivos. Piensa en cómo funciona un servidor Apache clásico. Si tienes un sistema de archivos como:
En un navegador, puedes visitar http://website.com/about y eso mostrará esa página index.html en la carpeta / about. Así es el enrutamiento aquí. En virtud de que tengo:
Tendré una página de inicio y una página / about / en mi sitio. Esa es solo una manera refrescante y agradable de lidiar con el enrutamiento, en lugar de tener que crear su propio enrutamiento con componentes para sí mismo.
Si desea hacer eso en el que todo el contenido de su sitio reside en archivos Markdown directamente en el repositorio, es un ciudadano de primera clase.
Creo que esto es muy común para cosas como blogs y documentación, especialmente porque ya son objetivos populares para los generadores de sitios estáticos. Y en estos primeros días, creo que veremos muchos sitios de Astro en ese sentido mientras la gente espera para ver si está listo para empresas más grandes.
Una forma de usar Markdown es crear páginas en Markdown de inmediato. El Markdown también tendrá "vallas" (Frontmatter) en las que puede elegir el diseño que desea usar (lo mejor es usar un archivo .astro) y pasar los datos si es necesario. Luego, todo el contenido del archivo Markdown fluirá hacia la <ranura />:
Otra forma increíblemente satisfactoria de usar Markdown en Astro es usar el componente <Markdown /> incorporado. Importarlo y usarlo:
También puedes enganchar algo de Markdown de otra parte de su proyecto y convertirlo en un componente. Eso conduce a la obtención de datos, así que veamos eso a continuación.
Obteniendo reglas de datos
Hemos estado hablando de Markdown, así que cerremos el círculo. Se puede "recuperar" datos internamente en Astro mediante fetchContent. Así de sencillo:
Busco el Markdown sin procesar, luego podría usar el HTML que devuelve si quiero, o colocarlo en un componente <Markdown /> si tiene sentido por cualquier motivo:
Pero no tengo que buscar solo datos internos. Soy fan de Eleventy. Durante una compilación de Eleventy, ciertamente puedes ir a buscar datos de una fuente externa, pero yo diría que es un poco delicado. Obtiene los datos con código en un archivo JavaScript separado, extrae su propia biblioteca de red, luego procesa y devuelve los datos para usarlos en otra parte de una plantilla. Como esto. En Astro, esa búsqueda puede ocurrir junto con el componente donde lo necesite.
Observa este ejemplo del mundo real en el que se extraen datos desde CSS-Tricks y se muestran como tarjetas.
Se puede crear una página a partir de los datos de CSS-Tricks con tanta facilidad:
Lo fascinante de eso es que los datos ocurren:
- en Node, no en el lado del cliente, y
- durante el proceso de construcción.
Por lo tanto, para mantener actualizado un sitio web como este, tendría que ejecutar el proceso de compilación / implementación con regularidad.