eleventy webpack
1.0.0
베어본 Eleventy 및 웹팩 템플릿입니다. 포크로 가세요.
.js (ES6, 바벨, 폴리필).css (Sass, PostCSS, Autoprefixer)noopener 및 noreferrer )라이브 데모 https://eeventy-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 src/assets/icons 에 추가된 모든 SVG는 기호 스프라이트 파일로 묶이고 이 단축 코드를 통해 사용할 수 있습니다.
<!-- 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 파일 내에서 사용할 수 있습니다.
formatdate-fns를 사용하여 전달된 날짜 형식을 지정합니다.
<!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020formatISOISO 형식에 따라 전달된 날짜의 형식을 지정합니다.
<!-- 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 > 
