Construyendo un sitio estático con componentes usando Nunjucks

1. Un sitio de cuatro páginas con encabezado, navegación y pie de página coherentes
2. Usando el diseño para las cuatro páginas
3. Hacer navegación activa
4. Creación de contenido en Markdown
5. Construyendo componentes reales
6. Haga tantos componentes como desee
7. Un caso rápido contra los sitios estáticos
8. ¡Adelante y abraza la vida estática!
   1. Otras lecturas

Incluso si no utiliza ningún JavaScript del lado del cliente para crear un sitio, eso no significa que deba renunciar a la idea de construir con componentes. Aprenda a crear un sitio estático con la ayuda de un preprocesador HTML. En este artículo, Chris Coyier dará un paseo por un sitio que construyó recientemente utilizando esta técnica. Usó CodePen Projects para construirlo, que ofrece Nunjucks como preprocesador, que estaba perfectamente preparado para el trabajo.

Es bastante popular hoy en día, y me atrevo a decir que es una muy buena idea, crear sitios con componentes. En lugar de crear páginas enteras una por una, creamos un sistema de componentes (piense: un formulario de búsqueda, una tarjeta de artículo, un menú, un pie de página) y luego armamos el sitio con esos componentes.

Los marcos de JavaScript como React y Vue enfatizan mucho esta idea. Pero incluso si no utiliza ningún JavaScript del lado del cliente para crear un sitio, eso no significa que tenga que renunciar a la idea de construir con componentes. Al utilizar un preprocesador HTML, podemos crear un sitio estático y aun así obtener todos los beneficios de abstraer nuestro sitio y su contenido en componentes reutilizables.

Los sitios estáticos están de moda hoy en día, y con razón, ya que son rápidos, seguros y económicos de alojar. Incluso Smashing Magazine es un sitio estático , ¡lo creas o no!

Demos un paseo por un sitio que construí recientemente usando esta técnica. Utilicé CodePen Projects para construirlo, que ofrece Nunjucks como preprocesador, que estaba perfectamente preparado para el trabajo.

Un sitio de cuatro páginas con encabezado, navegación y pie de página coherentes

Este es un micrositio . No necesita un CMS completo para manejar cientos de páginas. No necesita JavaScript para manejar la interactividad. Pero sí necesita un puñado de páginas que compartan el mismo diseño.

HTML por sí solo no tiene una buena solución para esto. Lo que necesitamos son importaciones . Lenguajes como PHP simplifican esto con cosas como ?php include "header.php"; ?, pero los hosts de archivos estáticos no ejecutan PHP (a propósito) y HTML por sí solo no es de ayuda. Afortunadamente, podemos preprocesar inclusiones con Nunjucks.

Aquí tiene mucho sentido crear un diseño , que incluya fragmentos de HTML que representen el encabezado, la navegación y el pie de página. Las plantillas de Nunjucks tienen el concepto de bloques, que nos permiten colocar contenido en ese lugar cuando usamos el diseño.

head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleThe Power of Serverless/title link rel="stylesheet" href="/styles/style.processed.css"/headbody {% include "./template-parts/_header.njk" %} {% include "./template-parts/_nav.njk" %} {% block content %} {% endblock %} {% include "./template-parts/_footer.njk" %}/body

Observe que los archivos incluidos tienen nombres como _file.njk. Eso no es del todo necesario. Podría ser header.htmlo icons.svg, pero se llaman así porque 1) los archivos que comienzan con guiones bajos son una forma un poco estándar de decir que son parciales. En proyectos CodePen, significa que no intentarán compilarse solos. 2) Al nombrarlo .njk, podríamos usar más cosas de Nunjucks si queremos.

Ninguno de estos bits tiene nada de especial en absoluto. Son sólo pequeños fragmentos de HTML destinados a ser utilizados en cada una de nuestras cuatro páginas.

footer pJust a no-surprises footer, people. Nothing to see here.p/footer

Hecho de esta manera, podemos hacer un cambio y que el cambio se refleje en las cuatro páginas.

Usando el diseño para las cuatro páginas

Ahora cada una de nuestras cuatro páginas puede ser un archivo. Sin embargo, comencemos con index.njkque en CodePen Projects se procesará automáticamente y creará un index.htmlarchivo cada vez que guarde.

Esto es lo que podríamos poner index.njkpara usar el diseño y colocar algo de contenido en ese bloque:

{% extends "_layout.njk" %}{% block content %}h1Hello, World!/h1{% endblock %} 

¡Eso nos comprará una página de inicio completamente funcional! ¡Lindo! Cada una de las cuatro páginas puede hacer exactamente lo mismo, pero al colocar contenido diferente en el bloque, tenemos un pequeño sitio de cuatro páginas que es fácil de administrar.

Para que conste, no estoy seguro de llamar a estos pequeños fragmentos componentes de reutilización . Simplemente estamos siendo eficientes y dividiendo un diseño en partes. Pienso en un componente más como un fragmento reutilizable que acepta datos y genera una versión única de sí mismo con esos datos. Llegaremos a eso.Te recomendamos Zonas Azules

Hacer navegación activa

Ahora que hemos repetido un fragmento idéntico de HTML en cuatro páginas, ¿es posible aplicar CSS único a elementos de navegación individuales para identificar la página actual? Podríamos con JavaScript y mirar window.locationy demás, pero podemos hacer esto sin JavaScript. El truco consiste en poner un classcarácter bodyúnico para cada página y usarlo en el CSS.

En nuestro, _layout.njkel cuerpo genera un nombre de clase como variable:

body

Luego, antes de llamar a ese diseño en una página individual, configuramos esa variable:

{% set body_class = "home" %}{% extends "_layout.njk" %}

Digamos que nuestra navegación estaba estructurada como

nav ul li a href="/" Home /a ...

Ahora podemos apuntar a ese enlace y aplicar un estilo especial según sea necesario haciendo:

body.home .nav-home a,body.services .nav-services a { /* continue matching classes for all pages... */ /* unique active state styling */}

Ah, ¿y esos íconos? Esos son solo archivos individuales .svgque puse en una carpeta y los incluí como

{% include "../icons/cloud.svg" %}

Y eso me permite diseñarlos como:

svg { fill: white;}

Suponiendo que los elementos SVG internos no tengan fillatributos.

Creación de contenido en Markdown

La página de inicio de mi micrositio tiene una gran cantidad de contenido. Ciertamente podría escribir y mantener eso en HTML, pero a veces es bueno dejar ese tipo de cosas en manos de Markdown . Markdown se siente más limpio al escribir y quizás un poco más fácil de ver cuando hay muchos textos.

Esto es muy fácil en CodePen Projects. Creé un archivo que termina en .md, que se procesará automáticamente en HTML y luego lo incluí en el index.njkarchivo.

{% block content %}main {% include "content/about.html" %} /main{% endblock %}

Construyendo componentes reales

Consideremos que los componentes son módulos repetibles que, a medida que se pasan datos, se crean a sí mismos. En marcos como Vue, trabajaría con componentes de un solo archivo que son fragmentos aislados de HTML con plantilla, CSS con alcance y JavaScript específico del componente. Eso es genial, pero nuestro micrositio no necesita nada tan sofisticado.

Necesitamos crear algunas “tarjetas” basadas en una plantilla simple, para poder construir cosas como esta:

Construir un componente repetible como ese en Nunjucks implica usar lo que ellos llaman Macros . Las macros son deliciosamente simples. ¡ Son como si HTML tuviera funciones !

{% macro card(title, content) %}div h2{{ title }}/h2 p{{ content }}/p/div{% endmacro %}

Luego lo llamas según sea necesario:

{{ card('My Module', 'Lorem ipsum whatever.') }}

La idea aquí es separar datos y marcas . Esto nos brinda algunos beneficios bastante claros y tangibles:

1. Si necesitamos hacer un cambio en el HTML, podemos cambiarlo en la macro y se cambiará en todos los lugares que utilicen esa macro.
2. Los datos no están enredados en el marcado.
3. ¡Los datos podrían venir de cualquier parte! Codificamos los datos directamente en llamadas a las macros como lo hicimos anteriormente. O podríamos hacer referencia a algunos datos JSON y recorrerlos. Estoy seguro de que incluso podrías imaginar una configuración en la que los datos JSON provengan de una especie de CMS sin cabeza, proceso de compilación, función sin servidor, trabajo cron o lo que sea.

Ahora tenemos estas tarjetas repetibles que combinan datos y marcas, justo lo que necesitamos:

Haga tantos componentes como desee

Puedes tomar esta idea y ejecutarla. Por ejemplo, imagine cómo Bootstrap es esencialmente un conjunto de CSS que sigue patrones HTML para usar. Puede convertir cada uno de esos patrones en una macro y llamarlos según sea necesario, esencialmente creando componentes en el marco .

Puede anidar componentes si lo desea, adoptando una especie de filosofía de diseño atómico . Nunjucks también ofrece lógica, lo que significa que puede crear componentes condicionales y variaciones simplemente pasando datos diferentes.

En el sitio simple que creé , hice una macro diferente para la sección de ideas del sitio porque involucraba datos ligeramente diferentes y un diseño de tarjeta ligeramente diferente.

Un caso rápido contra los sitios estáticos

Podría argumentar que la mayoría de los sitios se benefician de una arquitectura basada en componentes, pero sólo algunos sitios son apropiados por ser estáticos. Trabajo en muchos sitios en los que tener lenguajes de back-end es apropiado y útil.

Uno de mis sitios, CSS-Tricks , tiene cosas como un inicio de sesión de usuario con un sistema de permisos algo complejo: foros, comentarios, comercio electrónico. Si bien ninguna de esas cosas impide por completo la idea de trabajar de forma estática, a menudo me alegro de tener una base de datos y lenguajes de back-end con los que trabajar. Me ayuda a construir lo que necesito y mantiene todo bajo un mismo techo.

¡Adelante y abraza la vida estática!

Recuerde que uno de los beneficios de compilar como lo hicimos en este artículo es que el resultado final es solo un montón de archivos estáticos. Fácil de alojar, rápido y seguro. Sin embargo, no tuvimos que dejar de trabajar de manera amigable para los desarrolladores. Este sitio será fácil de actualizar y agregar en el futuro.

• El proyecto final es un micrositio llamado The Power of Serverless for Front-End Developers ).
• El alojamiento de archivos estáticos, en mi opinión, es parte del movimiento sin servidor.
• Puede ver todo el código (e incluso obtener una copia para usted) directamente en CodePen . Está construido, mantenido y alojado completamente en CodePen utilizando CodePen Projects .
• CodePen Projects maneja todas las cosas de Nunjucks de las que hablamos aquí, y también cosas como el procesamiento Sass y el alojamiento de imágenes, que aproveché para el sitio. Podría replicar lo mismo con, digamos, un proceso de compilación basado en Gulp o Grunt localmente. Aquí tienes un proyecto repetitivo como el que podrías poner en marcha.

Otras lecturas

• Subdominios comodín Next.js
• Contexto y variables en el generador de sitios estáticos Hugo
• Recuperar archivos eliminados de su árbol de trabajo de Git
• Cómo dibujar gráficos de radar en la web

(sra, ra, hj, il, mrn)Explora más en

• Generadores estáticos
• Generadores
• Herramientas
• CSS
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Construyendo un sitio estático con componentes usando Nunjucks

Un sitio de cuatro páginas con encabezado, navegación y pie de página coherentesUsando el diseño para las cuatro páginasHacer navegación activaCreación

programar

es

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente