eleventy webpack

once-webpack?

Una plantilla básica de once y paquete web. Bifurca y listo.

Características

• Barebone 11ty (¿literalmente?)
• ⚡ Compilación rápida con configuraciones por entorno (babel-env, postcss-preset-env, webpack...)
• .js (ES6, Babel, Polyfills)
• .css (Sass, PostCSS, Autoprefixer)
• ✅ Optimizado para producción (mapas fuente, encabezados, código minificado...)
• ? Imágenes responsivas e imágenes remotas almacenadas en caché (@11ty/eleventy-img)
• ? Generación de sprites de iconos SVG
• ? Metadatos SEO y etiquetas Open Graph
• ? Enlaces externos seguros ( noopener y noreferrer )
• Códigos cortos y filtros útiles (fecha, rebajas, íconos de sprites, imágenes responsivas...)
• Superposición de errores ordenada (superposición de errores de once complementos)
• ? Más bonito para formatear

Demostración en vivo https://eleventy-webpack.netlify.app

Uso

Primero instale las dependencias:

npm install

Entonces puedes:

Dominio	Descripción
npm run start	Ejecute su sitio web en http://localhost:8080
npm run build	Construya su sitio web de producción dentro de /_site
npm run format	Ejecute más bonito en todos los archivos excepto /_site
npm run analyze	Información de salida sobre el tamaño de su paquete

Asegúrese de utilizar la versión correcta de node.js:

 # with bash nvm 
nvm use ` cat .nvmrc `
# with windows nvm
nvm use $( cat .nvmrc )
# or just install the version specified inside `.nvmrc` 

paquete web

Se incluye un webpack.config.js muy simple. Siéntete libre de cambiarlo.

Códigos cortos

Todos los códigos cortos se pueden usar dentro de archivos .md o .njk .

icon

Cualquier SVG agregado a src/assets/icons se incluye en un archivo de símbolo sprite y está disponible a través de este código corto.

 <!-- Assuming `src/assets/icons/github.svg` exist -->
{% icon "github" %} Github icon
<!-- Will be rendered as -->
< svg class =" icon icon--github " role =" img " aria-hidden =" true " >
  < use xlink:href =" /assets/images/sprite.svg#github " > </ use >
</ svg >

---

image

Crea una versión WebP de la imagen y el correspondiente JPEG/PNG optimizado. Las imágenes se crearán en varios tamaños. Consulte utils/shortcodes.js para conocer los valores predeterminados.

 <!-- Assuming `src/assets/images/image.jpeg` of width 330px exist -->
{% image "image.jpeg", "Image alt" %}
<!-- Will be rendered as -->
< picture >
  < source type =" image/webp " srcset =" /assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w " sizes =" 90vw " >
  < source type =" image/png " srcset =" /assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w " sizes =" 90vw " >
  < img loading =" lazy " src =" /assets/images/678868de.png " alt =" Image alt " width =" 330 " height =" 580 " >
</ picture >

<!-- If a title is passed the shortcode will output a <figure> with <figcaption> -->
{% image "image.jpeg", "Image alt", "Image title" %}
<!-- Will be rendered as -->
< figure >
  < picture >
    < source type =" image/webp " srcset =" /assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w " sizes =" 90vw " >
    < source type =" image/png " srcset =" /assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w " sizes =" 90vw " >
    < img loading =" lazy " src =" /assets/images/678868de.png " alt =" Image alt " width =" 330 " height =" 580 " >
  </ picture >
  < figcaption > Image title </ figcaption >
</ figure >

<!-- Additional options -->
{% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class", false, "90vw" %}
<!-- Will be rendered as -->
< figure class =" fig-my-class " >
  < picture >
    < source type =" image/webp " srcset =" ... " sizes =" 90vw " >
    < source type =" image/png " srcset =" ... " sizes =" 90vw " >
    < img class =" img-my-class " loading =" eager " src =" ... " alt =" Image alt " width =" 100 " height =" 100 " >
  </ picture >
  < figcaption > Image title </ figcaption >
</ figure >

---

markdown

Incruste rebajas fácilmente.

{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}

---

Filtros

Todos los filtros se pueden utilizar dentro de archivos .md o .njk .

format

Formatee la fecha pasada con date-fns:

 <!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020

---

formatISO

Formatee la fecha aprobada según el formato ISO:

 <!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Z

---

markdown

Analiza la cadena pasada con Markdown:

 <!-- Assuming page.title is `# My header` -->
{{ page.title | markdown }}
<!-- Will be rendered as -->
< h1 > My header </ h1 > 

---

Gracias

• https://github.com/gregives/twelvety
• https://github.com/hankchizljaw/hylia
• https://github.com/MadeByMike/supermaya
• https://github.com/jeromecoupe/webstoemp
• https://github.com/maxboeck/eleventastic
• https://github.com/deviousdodo/elevenpack
• https://github.com/ixartz/Eleventy-Starter-Boilerplate
• https://github.com/google/eleventy-high-performance-blog
• https://github.com/danurbanowicz/eleventy-netlify-boilerplate