Un sitio impulsado por la comunidad con Eleventy: construcción del sitio

 

 

 


Índice
  1. La visión
  2. Hagamos girar Once
  3. Configuremos nuestro directorio
  4. Trabajemos con datos
  5. Vamos a generar los datos.
  6. Creemos páginas de perfil de mascotas.
  7. Repasemos lo que tenemos hasta ahora.
  8. Agreguemos datos a las páginas de perfil de mascotas
  9. ¡Implementemos esto en producción!
  10. ¡Empecemos a aceptar envíos!
  11. Terminemos con esto...

En el último artículo, aprendimos lo que implica la planificación de un sitio impulsado por la comunidad. Vimos cuántas consideraciones se necesitan para comenzar a aceptar envíos de usuarios, usando lo que aprendí de mi experiencia en la creación de Style Stage como ejemplo.

 

Ahora que hemos cubierto la planificación, ¡vamos a algo de código! Juntos, vamos a desarrollar una configuración de Eleventy que puedes utilizar como punto de partida para tu propio sitio comunitario (o personal).

Serie de artículos:

  1. Preparación para las contribuciones
  2. Construyendo el sitio (¡Estás aquí!)

Este artículo cubrirá:

  • Cómo inicializar Eleventy y crear scripts de desarrollo y creación útiles
  • Personalizaciones de configuración recomendadas
  • Cómo definir datos personalizados y combinar múltiples fuentes de datos
  • Crear diseños con Nunjucks y encadenamiento de diseños Eleventy
  • Implementación en Netlify

La visión

Supongamos que queremos permitir que la gente presente a sus perros y gatos y los enfrente entre sí en concursos de ternura.

No vamos a entrar en la votación de los usuarios en este artículo. Eso sería genial (y totalmente posible con funciones sin servidor), pero nuestra atención se centra en los envíos de mascotas en sí. En otras palabras, los usuarios pueden enviar detalles del perfil de sus perros y gatos. Usaremos esos envíos para crear una batalla semanal que enfrenta a un gato al azar contra un perro al azar en la página de inicio para decidir cuál es el más perfecto (o guau, si lo prefieres).

Hagamos girar Once

Comenzaremos inicializando un nuevo proyecto ejecutándolo npm initen cualquier directorio que desee y luego instalando Eleventy en él con:

npm install @11ty/eleventy

Si bien es totalmente opcional, me gusta abrir el package-jsonarchivo que se agrega al directorio y reemplazar la scriptssección con esto:

"scripts": { "develop": "eleventy --serve", "build": "eleventy"},

Esto nos permite comenzar a desarrollar Eleventy en un entorno de desarrollo ( npm run develop) que incluye la recarga en caliente de Browsersync para el desarrollo local. También agrega un comando que compila y construye nuestro trabajo ( npm run build) para implementarlo en un servidor de producción.

Si estás pensando, "¿npm qué?" lo que estamos haciendo es llamar a Node (que es algo que requiere Eleventy). Los comandos que se indican aquí están destinados a ejecutarse en su terminal preferido, que puede ser un programa adicional o estar integrado en su editor de código, como en VS Code.

Necesitaremos un paquete npm más, fast-glob, que nos resultará útil un poco más adelante para combinar datos. También podemos instalarlo ahora:

npm install --save-dev fast-glob.

Configuremos nuestro directorio

Eleventy permite personalizar el directorio de entrada (donde trabajamos) y el directorio de salida (donde va nuestro trabajo creado) para proporcionar un poco de organización adicional.

Para configurar esto, crearemos el eleventy.jsarchivo en la raíz del directorio del proyecto. Luego le diremos a Eleventy dónde queremos que vayan nuestros directorios de entrada y salida. En este caso, usaremos un srcdirectorio para la entrada y un publicdirectorio para la salida.

 

module.exports = function (eleventyConfig) { return { dir: { input: "src", output: "public" }, };};

A continuación, crearemos un directorio llamado petsdonde almacenaremos los datos de mascotas que obtenemos de los envíos de los usuarios. Incluso podemos dividir ese directorio un poco más para reducir los conflictos de fusión y distinguir claramente los datos de gatos de los de perros con subdirectorios caty :dog

pets/ cats/ dogs/

¿Cómo serán los datos? Los usuarios enviarán un archivo JSON que sigue este esquema, donde cada propiedad es un punto de datos sobre la mascota:

{ "name": "", "petColor": "", "favoriteFood": "", "favoriteToy": "", "photoURL": "", "ownerName": "", "ownerTwitter": ""}

Para que el proceso de envío sea muy claro para los usuarios, podemos crear un CONTRIBUTING.mdarchivo en la raíz del proyecto y escribir las pautas para los envíos. GitHub toma el contenido de este archivo y lo muestra en el repositorio. De esta manera, podemos brindar orientación sobre este esquema, como una nota de que favoriteFood, favoriteToyy ownerTwitteson campos opcionales.

Un README.mdarchivo estaría igual de bien si prefieres seguir esa ruta. Es bueno que haya un archivo estándar diseñado específicamente para contribuciones.

El aviso photoURLes una de esas propiedades. Podríamos haber convertido esto en un archivo pero, por motivos de seguridad y costos de alojamiento, solicitaremos una URL en su lugar. Puedes decidir que estás dispuesto a aceptar archivos reales, y eso es genial.

Trabajemos con datos

A continuación, necesitamos crear una matriz combinada de datos a partir de los archivos individuales de gatos y perros. Esto nos permitirá recorrerlos para crear páginas del sitio y elegir envíos aleatorios de perros y gatos para las batallas semanales.

Eleventy permite nodos module.exportsdentro del _datadirectorio. Eso significa que podemos crear una función que busque todos los archivos de gatos y otra que busque todos los archivos de perros y luego cree matrices a partir de cada conjunto. Es como tomar cada archivo de gato y fusionarlos para crear un conjunto de datos en un único archivo JavaScript y luego hacer lo mismo con los perros.

El nombre de archivo utilizado _datase convierte en la variable que contiene ese conjunto de datos, por lo que agregaremos archivos para perros y gatos allí:

_data/ cats.js dogs.js

Las funciones en cada archivo serán casi idénticas: simplemente estamos intercambiando instancias de "gato" por "perro" entre los dos. Aquí está la función para gatos:

const fastglob = require("fast-glob");const fs = require("fs");
module.exports = async () = { // Create a "glob" of all cat json files const catFiles = await fastglob("./src/pets/cats/*.json", { caseSensitiveMatch: false, });
 // Loop through those files and add their content to our `cats` Set let cats = new Set(); for (let cat of catFiles) { const catData = JSON.parse(fs.readFileSync(cat)); cats.add(catData); }
 // Return the cats Set of objects within an array return [...cats];};

¿Esto parece aterrador? ¡Nunca temas! Tampoco escribo nodos de forma rutinaria y no es un paso obligatorio para sitios Eleventy menos complejos. Si, en cambio, hubiéramos elegido que los contribuyentes se agregaran a un único archivo JSON en constante crecimiento con _data, entonces este paso de combinación no sería necesario en primer lugar. Nuevamente, la razón principal de este paso es reducir los conflictos de fusión al permitir archivos de contribuyentes individuales. También es la razón por la que agregamos fast-glob a la mezcla.

 

Vamos a generar los datos.

Este es un buen momento para comenzar a insertar datos en las plantillas de nuestra interfaz de usuario. De hecho, continúe y coloque algunos archivos JSON en los pets/catsdirectorios pets/dogsy que incluyen datos para las propiedades para que tengamos algo con lo que trabajar desde el principio y probar cosas.

Podemos continuar y agregar nuestra primera página Eleventy agregando un index.njkarchivo en el directorio src. Esta se convertirá en la página de inicio y es un formato de archivo de plantilla de Nunjucks.

Nunjucks es una opción entre muchas para crear plantillas con Eleventy. Consulte los documentos para obtener una lista completa de opciones de plantillas.

Comencemos recorriendo nuestros datos y generando una lista desordenada tanto para gatos como para perros:

ul !-- Loop through cat data -- {% for cat in cats %} li a href="/cats/{{ cat.name | slug }}/"{{ cat.name }}/a /li {% endfor %}/ul
ul !-- Loop through dog data -- {% for dog in dogs %} li a href="/dogs/{{ dog.name | slug }}/"{{ dog.name }}/a /li {% endfor %}/ul

Como recordatorio, la referencia catsy dogscoincide con el nombre del archivo en _data. Dentro del bucle podemos acceder a las claves JSON usando notación de puntos, como se ve para cat.name, que se genera como una variable de plantilla de Nunjucks usando llaves dobles (p. ej. {{ cat.name }}).

Creemos páginas de perfil de mascotas.

Además de las listas de perros y gatos en la página de inicio ( index.njk), también queremos crear páginas de perfil individuales para cada mascota. El bucle indicó una pista sobre la estructura que usaremos para ellos, que será [pet type]/[name-slug].

La forma recomendada de crear páginas a partir de datos es mediante el concepto de paginación Eleventy, que permite fragmentar los datos. Free porn comics

Vamos a crear los archivos responsables de la paginación en la raíz del srcdirectorio, pero puedes anidarlos en un directorio personalizado, siempre que resida dentro de src y aún pueda ser descubierto por Eleventy.

src/ cats.njk dogs.njk

Luego agregaremos nuestra información de paginación como portada, que se muestra para gatos:

---pagination: data: cats alias: cat size: 1permalink: "/cats/{{ cat.name | slug }}/"---

El datavalor es el nombre del archivo de _data. El aliasvalor es opcional, pero se utiliza para hacer referencia a un elemento de la matriz paginada. size: 1indica que estamos creando una página por elemento de datos.

 

Finalmente, para crear con éxito la salida de la página, también debemos indicar la estructura de enlace permanente deseada. Ahí es donde aliasentra en juego el valor anterior, que accede a la nameclave del conjunto de datos. Luego estamos usando un filtro integrado llamado slugque transforma un valor de cadena en una cadena compatible con URL (minúsculas y conversión de espacios a guiones, etc.).

Repasemos lo que tenemos hasta ahora.

Ahora es el momento de encender Eleventy con npm run develop. Eso iniciará el servidor local y le mostrará una URL en la terminal que puede usar para ver el proyecto. Mostrará errores de compilación en la terminal, si los hay.

Siempre que todo haya sido exitoso, Eleventy creará un publicdirectorio que debería contener:

public/ cats/ cat1-name/index.html cat2-name/index.html dogs/ dog1-name/index.html dog2-name/index.html index.html

Y en el navegador, la página de índice debería mostrar una lista vinculada de nombres de gatos y otra de nombres de perros vinculados.

Agreguemos datos a las páginas de perfil de mascotas

Cada una de las páginas generadas para perros y gatos está actualmente en blanco. Tenemos datos que podemos usar para completarlos, así que pongámoslo a trabajar.

Eleventy espera un _includesdirectorio que contenga archivos de diseño (“plantillas”) o plantillas parciales que se incluyen en los diseños.

Crearemos dos diseños:

src/ _includes/ base.njk pets.njk

El contenido de base.njk será un texto estándar HTML. El bodyelemento que contiene incluirá una etiqueta de plantilla especial, {{ content | safe }}donde se representará el contenido pasado a la plantilla, lo que significa que puede representar cualquier HTML que se pase en lugar de codificarlo.

Luego, podemos asignar la página de inicio index.mdpara usar el base.njkdiseño agregando lo siguiente como portada. Esto debería ser lo primero en index.md, incluidos los guiones:

---layout: base.njk---

Si revisa el HTML compilado en el publicdirectorio, verá que la salida de los bucles de perro y gato que creamos ahora está dentro del bodydiseño base.njk.

A continuación, agregaremos la misma introducción para pets.njkdefinir que también usará el base.njkdiseño para aprovechar el concepto de encadenamiento de diseños de Eleventy. De esta manera, el contenido que coloquemos pets.njkestará envuelto en el texto estándar de HTML base.njkpara que no tengamos que escribir ese HTML cada vez.

Para utilizar la pets.njkplantilla única para representar datos de perfil de perros y gatos, usaremos una de las funciones más nuevas de Eleventy llamada datos computarizados. Esto nos permitirá asignar valores de los datos de perros y gatos a las mismas variables de plantilla, en lugar de usar ifdeclaraciones o dos plantillas separadas (una para gatos y otra para perros). El beneficio es, una vez más, evitar redundancias.

 

Aquí está la actualización necesaria en cats.njk, con la misma actualización necesaria en dogs.njk(sustituyéndola catpor dog):

eleventyComputed: title: "{{ cat.name }}" petColor: "{{ cat.petColor }}" favoriteFood: "{{ cat.favoriteFood }}" favoriteToy: "{{ cat.favoriteToy }}" photoURL: "{{ cat.photoURL }}" ownerName: "{{ cat.ownerName }}" ownerTwitter: "{{ cat.ownerTwitter }}"

Observe que eleventyComputeddefine esta clave de matriz inicial y luego usa el alias para acceder a los valores en el catsconjunto de datos. Ahora, por ejemplo, podemos usar {{ title }}para acceder al nombre de un gato y al nombre de un perro, ya que la variable de plantilla ahora es la misma.

Podemos comenzar colocando el siguiente código pets.njkpara cargar correctamente los datos del perfil de perro o gato, según la página que se esté viendo:

img src="{{ photoURL }}" /ul listrongName/strong: {{ title }}/li listrongColor/strong: {{ petColor }}/li listrongFavorite Food/strong: {{ favoriteFood if favoriteFood else 'N/A' }}/li listrongFavorite Toy/strong: {{ favoriteToy if favoriteToy else 'N/A' }}/li{% if ownerTwitter %} listrongOwner/strong: a href="{{ ownerTwitter }}"{{ ownerName }}/a/li{% else %} listrongOwner/strong: {{ ownerName }}/li{% endif %}/ul

Lo último que necesitamos para unir todo esto es agregar layout: pets.njkal tema inicial tanto en cats.njkcomo dogs.njk.

Con Eleventy en funcionamiento, ahora puedes visitar la página de una mascota individual y ver su perfil:

No vamos a entrar en estilos en este artículo, pero puedes dirigirte al repositorio del proyecto de muestra para ver cómo se incluye CSS.

¡Implementemos esto en producción!

¡El sitio ahora se encuentra en un estado funcional y se puede implementar en un entorno de alojamiento!

Como se recomendó anteriormente, Netlify es una opción ideal, particularmente para un sitio impulsado por la comunidad, ya que puede desencadenar una implementación cada vez que se fusiona un envío y proporcionar una vista previa del envío antes de enviarlo para su revisión.

Si elige Netlify, querrá enviar su sitio a un repositorio de GitHub que puede seleccionar durante el proceso de agregar un sitio a su cuenta de Netlify. Le indicaremos a Netlify que sirva desde el publicdirectorio y run npm run buildcuando se fusionen nuevos cambios en la rama principal.

El sitio de muestra incluye un netlify.tomlarchivo que tiene los detalles de compilación y Netlify lo detecta automáticamente en el repositorio, lo que elimina la necesidad de definir los detalles en el flujo del nuevo sitio.

Una vez agregado el sitio inicial, visite Configuración → Construir → Implementar en Netlify. En Contextos de implementación, seleccione "Editar" y actualice la selección de "Vistas previas de implementación" a "Cualquier solicitud de extracción en su rama de producción/ramas de implementación de sucursal". Ahora, para cualquier solicitud de extracción, se generará una URL de vista previa y el enlace estará disponible directamente en la pantalla de revisión de la solicitud de extracción.

 

¡Empecemos a aceptar envíos!

Antes de pasar a Ir y cobrar $100, es una buena idea volver a visitar la primera publicación y asegurarnos de que estamos preparados para comenzar a recibir envíos de usuarios. Por ejemplo, deberíamos agregar archivos de salud de la comunidad al proyecto si aún no se han agregado. Quizás lo más importante sea asegurarse de que exista una regla de protección de sucursal para la sucursal principal. Esto significa que se requiere su aprobación antes de fusionar una solicitud de extracción.

Los contribuyentes deberán tener una cuenta de GitHub. Si bien esto puede parecer una barrera, elimina parte del anonimato. Dependiendo de la sensibilidad del contenido o del público objetivo, esto puede ayudar a examinar (¿entiendes?) a los contribuyentes.

Aquí está el proceso de envío:

  1. Bifurca el repositorio del sitio web.
  2. Clone la bifurcación en una máquina local o use la interfaz web de GitHub para los pasos restantes.
  3. Cree un archivo .json único dentro de src/pets/cats o src/pets/dogs que contenga los datos requeridos.
  4. Confirme los cambios si se realizaron en un clon o guarde el archivo si se editó en la interfaz web.
  5. Abra una solicitud de extracción de regreso al repositorio principal.
  6. (Opcional) Revise la vista previa de implementación de Netlify para verificar que la información aparezca como se esperaba.
  7. Fusiona los cambios.
  8. Netlify implementa la nueva mascota en el sitio en vivo.

Una sección de preguntas frecuentes es un excelente lugar para informar a los contribuyentes sobre cómo crear una solicitud de extracción. Puedes ver un ejemplo en Style Stage.

Terminemos con esto...

Lo que tenemos es un sitio completamente funcional que acepta contribuciones de los usuarios como envíos al repositorio del proyecto. ¡Incluso implementa automáticamente esas contribuciones cuando se fusionan!

Hay muchas más cosas que podemos hacer con un sitio impulsado por la comunidad creado con Eleventy. Por ejemplo:

  • Los archivos Markdown se pueden utilizar para el contenido de un boletín informativo por correo electrónico enviado con Buttondown. Eleventy permite mezclar Markdown con Nunjucks o Liquid. Entonces, por ejemplo, puede agregar un bucle for de Nunjucks para generar las últimas cinco mascotas como enlaces que se generan en la sintaxis de Markdown y son recogidos por Buttondown.
  • Se pueden crear imágenes de vista previa de redes sociales generadas automáticamente para vistas previas de enlaces de redes sociales.
  • Se puede agregar un sistema de comentarios a la mezcla.
  • Netlify CMS Open Authoring se puede utilizar para permitir que las personas realicen envíos con una interfaz. Vea el excelente resumen de Chris sobre cómo funciona.

Mi ejemplo de Meow vs. BowWow está disponible para que lo bifurques en GitHub. También puedes ver la vista previa en vivo y, sí, realmente puedes enviar a tu mascota a este sitio tonto.

¡Mucha suerte creando una comunidad saludable y próspera!

Serie de artículos:

  1. Preparación para las contribuciones
  2. Construyendo el sitio (¡Estás aquí!)





SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Un sitio impulsado por la comunidad con Eleventy: construcción del sitio

Un sitio impulsado por la comunidad con Eleventy: construcción del sitio

La visiónHagamos girar OnceConfiguremos nuestro directorioTrabajemos con datosVamos a generar los datos.Creemos páginas de perfil de mascotas.Repasemos lo qu

programar

es

https://pseint.es/static/images/programar-un-sitio-impulsado-por-la-comunidad-con-eleventy-construccion-del-sitio-1692-0.jpg

2024-06-13

 

Un sitio impulsado por la comunidad con Eleventy: construcción del sitio
Un sitio impulsado por la comunidad con Eleventy: construcción del sitio

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

 

 

Update cookies preferences