eleventy webpack
1.0.0
เทมเพลตแบร์โบนอีเลฟเว่นและเว็บแพ็ก แยกและไป
.js (ES6, บาเบล, โพลีฟิล).css (Sass, PostCSS, ตัวเติมคำอัตโนมัติ)noopener และ noreferrer )การสาธิตสด https://eleventy-webpack.netlify.app
ขั้นแรกให้ติดตั้งการพึ่งพา:
npm installจากนั้นคุณสามารถ:
| สั่งการ | คำอธิบาย |
|---|---|
npm run start | เรียกใช้เว็บไซต์ของคุณบน http://localhost:8080 |
npm run build | สร้างเว็บไซต์ที่ใช้งานจริงของคุณภายใน /_site |
npm run format | ทำงานได้สวยขึ้นในทุกการเติม ยกเว้น /_site |
npm run analyze | ข้อมูลผลลัพธ์เกี่ยวกับขนาดมัดของคุณ |
ตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชัน node.js ที่ถูกต้อง:
# with bash nvm
nvm use ` cat .nvmrc `
# with windows nvm
nvm use $( cat .nvmrc )
# or just install the version specified inside `.nvmrc` รวม webpack.config.js ที่เรียบง่ายมากไว้ด้วย รู้สึกอิสระที่จะเปลี่ยนมัน
รหัสย่อทั้งหมดสามารถใช้ภายในไฟล์ .md หรือ .njk
icon SVG ใดๆ ที่เพิ่มใน src/assets/icons จะรวมอยู่ในไฟล์สไปรท์สัญลักษณ์และทำให้ใช้งานได้ผ่านรหัสย่อนี้
<!-- 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 สร้างรูปภาพในเวอร์ชัน WebP และ JPEG / PNG ที่ปรับให้เหมาะสมที่สุดที่สอดคล้องกัน รูปภาพจะถูกสร้างขึ้นในหลายขนาด ดู 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 %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %} ตัวกรองทั้งหมดสามารถใช้ภายในไฟล์ .md หรือ .njk
formatจัดรูปแบบวันที่ที่ส่งผ่านด้วย date-fns:
<!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020formatISOจัดรูปแบบวันที่ที่ส่งตามรูปแบบ ISO:
<!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Zmarkdownแยกสตริงที่ส่งผ่านด้วยมาร์กดาวน์:
<!-- Assuming page.title is `# My header` -->
{{ page.title | markdown }}
<!-- Will be rendered as -->
< h1 > My header </ h1 > 
