eleventy webpack

sebelas puluh webpack ?

Templat barebone sebelas puluh dan webpack. Garpu dan pergi.

Fitur

• Barebone 11ty (secara harfiah?)
• ⚡ Pembuatan cepat dengan konfigurasi per env (babel-env, postcss-preset-env, webpack...)
• .js (ES6, Babel, Polyfill)
• .css (Sass, PostCSS, Autoprefixer)
• ✅ Dioptimalkan untuk produksi (peta sumber, header, kode yang diperkecil...)
• ? Gambar responsif dan gambar jarak jauh yang di-cache (@11ty/eleventy-img)
• ? Pembuatan sprite ikon SVG
• ? Metadata SEO dan tag Open Graph
• ? Tautan eksternal yang aman ( noopener dan noreferrer )
• Kode pendek dan filter yang berguna (tanggal, penurunan harga, ikon sprite, gambar responsif...)
• Hamparan kesalahan yang rapi (hamparan-kesalahan-plugin-sebelas)
• ? Lebih cantik untuk diformat

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

Penggunaan

Instal dulu dependensinya:

npm install

Kemudian Anda dapat:

Memerintah	Keterangan
npm run start	Jalankan situs web Anda di http://localhost:8080
npm run build	Bangun situs web produksi Anda di dalam /_site
npm run format	Jalankan lebih cantik di semua file kecuali /_site
npm run analyze	Keluarkan info tentang ukuran paket Anda

Pastikan Anda menggunakan versi node.js yang benar:

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

paket web

webpack.config.js yang sangat sederhana disertakan. Jangan ragu untuk mengubahnya.

Kode pendek

Semua kode pendek dapat digunakan di dalam file .md atau .njk .

icon

SVG apa pun yang ditambahkan ke src/assets/icons digabungkan ke dalam file sprite simbol dan tersedia melalui kode pendek ini.

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

Membuat gambar versi WebP dan JPEG/PNG yang dioptimalkan sesuai. Gambar akan dibuat dalam berbagai ukuran. Lihat utils/shortcodes.js untuk nilai default.

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

Sematkan penurunan harga dengan mudah.

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

---

Filter

Semua filter dapat digunakan di dalam file .md atau .njk .

format

Format tanggal berlalu dengan date-fns:

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

---

formatISO

Format tanggal kelulusan sesuai format ISO:

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

---

markdown

Parsing string yang diteruskan dengan penurunan harga:

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

---

Terima kasih

• 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/sebelas-tinggi-kinerja-blog
• https://github.com/danurbanowicz/eleventy-netlify-boilerplate