eleventy webpack

elfzig-Webpack ?

Eine Barebone-Elfty- und Webpack-Vorlage. Gabel und los.

Merkmale

• Barebone 11ty (wörtlich?)
• ⚡ Schneller Build mit Pro-Env-Konfigurationen (babel-env, postcss-preset-env, Webpack ...)
• .js (ES6, Babel, Polyfills)
• .css (Sass, PostCSS, Autoprefixer)
• ✅ Optimiert für die Produktion (Quellkarten, Header, minimierter Code ...)
• ? Responsive Bilder und zwischengespeicherte Remote-Bilder (@11ty/eleventy-img)
• ? SVG-Symbol-Sprite-Generierung
• ? SEO-Metadaten und Open Graph-Tags
• ? Sichere externe Links ( noopener und noreferrer )
• Nützliche Shortcodes und Filter (Datum, Markdown, Sprite-Symbole, responsive Bilder ...)
• Ordentliches Fehler-Overlay (eleventy-plugin-error-overlay)
• ? Hübscher zum Formatieren

Live-Demo https://eleventy-webpack.netlify.app

Verwendung

Installieren Sie zunächst die Abhängigkeiten:

npm install

Dann können Sie:

Befehl	Beschreibung
npm run start	Führen Sie Ihre Website unter http://localhost:8080 aus
npm run build	Erstellen Sie Ihre Produktionswebsite in /_site
npm run format	Führen Sie „prettier“ auf allen Füllungen außer /_site aus
npm run analyze	Geben Sie Informationen zu Ihrer Paketgröße aus

Stellen Sie sicher, dass Sie die richtige node.js-Version verwenden:

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

Webpack

Eine sehr einfache webpack.config.js ist enthalten. Fühlen Sie sich frei, es zu ändern.

Shortcodes

Alle Shortcodes können in .md oder .njk Dateien verwendet werden.

icon

Alle zu src/assets/icons hinzugefügten SVGs werden in einer Symbol-Sprite-Datei gebündelt und über diesen Shortcode verfügbar gemacht.

 <!-- 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

Erstellt eine WebP-Version des Bildes und das entsprechende optimierte JPEG/PNG. Bilder werden in mehreren Größen erstellt. Standardwerte finden Sie utils/shortcodes.js .

 <!-- 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

Markdown einfach einbetten.

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

---

Filter

Alle Filter können in .md oder .njk Dateien verwendet werden.

format

Formatieren Sie das übergebene Datum mit date-fns:

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

---

formatISO

Formatieren Sie das übergebene Datum gemäß ISO-Format:

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

---

markdown

Analysieren Sie die übergebene Zeichenfolge mit Markdown:

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

---

Danke

• 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