Twelvety
v1.4.1
데모 사이트를 참조하십시오
Twelvety는 빠르게 구축 된 사전 구성된 Eleventy Starter 프로젝트입니다. 포함 :
다음과 같은 구성 요소를 작성하십시오.
< main class =" home " >
< h1 class =" home__title " > Twelvety </ h1 >
</ main >
{% stylesheet 'scss' %}
@import "mixins";
.home {
@include container;
&__title {
color: red;
}
}
{% endstylesheet %}
{% javascript %}
console.log("Super fast ?");
{% endjavascript %}NetLify에 자신의 12 인스턴스를 빠르게 배포하려면 아래 버튼을 클릭하고 지침을 따르십시오.
이 버튼을 클릭하면 어떻게됩니까? NetLify는 Twelvety Git 저장소를 GitHub 계정으로 복제하고 (이를 위해 허가를 요청합니다) 새 저장소를 NetLify 계정에 추가하고 배포합니다!
이 저장소 상단 의이 템플릿 버튼을 클릭하여 GitHub 계정에서 자신의 12 개의 저장소를 작성하십시오. 새로운 Twelvety 저장소를 컴퓨터에 복제하거나 다운로드하십시오.
node.js 및 npm (node.js 포함)이 필요합니다. 필요한 패키지를 설치하려면 실행하십시오
npm installnpm run serve .npm run build 실행하여 생산을 위해 빌드하십시오npm run clean 실행하십시오. Twelvety의 두뇌는 utils 폴더에 살고 있습니다. 웹 사이트를 만들고 싶다면 utils 내부에서 아무것도 만질 필요가 없습니다. 그러나 단축 코드를 변경하려면 주변을 둘러보십시오!
Twelvety는 변환, 단축 코드 및 현명한 고도 옵션을 설정합니다. 아래 기능을 클릭하여 작동 방식을 알아보십시오.
stylesheet 쌍이 단축 코드 stylesheet 페어 코드를 사용하여 SASS를 포함하십시오. styles 디렉토리 ( .twelvety.js 로 정의 됨) 및 node_modules 에서 Sass 파일을 가져올 수 있습니다. SASS는 Dart-Sass를 사용하여 렌더링되며, PostCS (Postcss Preset Env 및 AutoPrefixer 포함)로 전달되며 Clean-CSS를 사용하여 미니거나 JS Beautifier (생산 및 개발 중)에 의해 미화됩니다.
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} stylesheet 쌍의 단축 코드의 두 번째 매개 변수는 언어입니다. 현재 이것은 아무것도하지 않으며 Shopify의 단축 코드 정의와 일치하는 것만으로 포함됩니다. Sass Indented 구문을 사용하려면 .twelvety.js 에있는 indentedSass Twelvety 옵션을 변경할 수 있습니다.
stylesheet 페어링 단축 코드에는 세 번째 매개 변수가 있으며 기본적으로 page.url 로 설정되어 현재 페이지의 URL이 렌더링됩니다. 즉, 필요한 CSS 만 각 페이지에 포함되어 있음을 의미합니다. 이 매개 변수 (예 : 웹 사이트의 모든 페이지에 공통적 인 CSS 파일을 사용하여 CSS의 '청크'를 만들 수 있습니다.
styles 바로 가로 코드 styles Shortcode는 주어진 청크에 대한 stylesheet 쌍의 단축 코드로 작성된 모든 Sass를 함께 모아 렌더링 된 CSS를 출력합니다. '청크'는 기본적으로 page.url 로, 현재 페이지의 URL이 렌더링됩니다.
<!-- Inline all styles on current page -->
< style >
{% styles page.url %}
</ style >
<!-- Capture styles on current page -->
{% capture css %}
{% styles page.url %}
{% endcapture %}
<!-- And output asset using `asset` shortcode -->
< link rel =" stylesheet " href =" {% asset css, 'css' %} " /> styles Shortcode는 템플릿의 모든 stylesheet 쌍의 단축 코드 아래에 배치해야합니다. 자세한 내용은 append Pained Shortcode를 참조하고 변환하십시오.
javascript 쌍이 단축 코드 javascript 쌍의 단축 코드를 사용하여 JavaScript를 포함하십시오. Twelvety는 Browserify를 사용하여 최신 JavaScript를 사용할 수 있도록 require('modules') 수 있습니다. 그런 다음 JavaScript는 Production에서 Uglify를 사용하여 조정되거나 JS Beautifier가 개발중인 Beautified를 사용합니다.
{% javascript %}
const axios = require("axios");
axios.get("/api/endpoint")
.then((response) = > {
console.log("Yay, it worked!");
})
.catch((error) = > {
console.log("Uh oh, something went wrong");
});
{% endjavascript %} javascript 쌍의 단축 코드에는 두 번째 매개 변수가 있으며 기본적으로 page.url 로 설정되어 현재 페이지의 URL이 렌더링됩니다. 즉, 필요한 JavaScript 만 각 페이지에 포함되어 있음을 의미합니다. 이 매개 변수 (예 : 모든 공급 업체 코드에 대한 JavaScript 파일)를 사용하여 자신만의 '청크'를 만들 수 있습니다.
각 javascript 쌍의 단축 코드의 출력은 iife에 래핑되어 변수가 전역 범위를 오염시키지 않도록합니다. window 에서 무언가를 정의하려면 window.something = 사용하십시오.
script 단축 코드 script 단축 코드는 주어진 청크에 대한 모든 JavaScript를 모아서 JavaScript를 출력합니다 (변환 및 미니 화 후). '청크'는 기본적으로 page.url 로, 현재 페이지의 URL이 렌더링됩니다.
<!-- Inline all JavaScript on current page -->
< script >
{ % script page . url % }
</ script >
<!-- Capture JavaScript on current page -->
{% capture js -%}
{% script page.url %}
{%- endcapture -%}
<!-- And output asset using `asset` shortcode -->
< script src =" {% asset js, 'js' %} " defer > </ script > script 단축 코드는 템플릿의 javascript 쌍의 단축 코드 아래에 배치되어야합니다. 일반적으로 JavaScript가 종종 바로 앞 </body> 에 포함되어 있기 때문에 이것은 문제가되지 않습니다. 다른 곳에서 JavaScript를 원한다면 append 이루는 단축 코드 및 변환을 참조하십시오.
asset 단축 코드 asset 단축 코드는 주어진 컨텐츠 및 확장 기능이있는 콘텐츠 가공 자산을 출력합니다. 내용은 String 또는 Buffer 일 수 있습니다. 자산은 output 디렉토리 내부의 assets 디렉토리에 저장됩니다 (둘 다 .twelvety.js 내에 정의 됨).
<!-- Capture some content -->
{% capture css %}
h1 {
color: red;
}
{% endcapture %}
<!-- Save content to content-hashed file with .css extension -->
< link rel =" stylesheet " href =" {% asset css, 'css' %} " />
<!-- Output of shortcode -->
< link rel =" stylesheet " href =" /_assets/58f4b924.css " /> JavaScript에서 asset 단축 코드 기능을 가져올 수 있습니다. 이것이 picture 단축 코드가 응답 형 이미지를 assets 디렉토리에 저장하는 방법입니다.
picture 단축 코드 picture 단축 코드는 src 및 alt 매개 변수를 가져 와서 AVIF* 및 WEBP 지원으로 응답 형 사진 요소를 출력합니다. 이미지는 .twelvety.js 내에 정의 된 images 디렉토리 내에 저장해야합니다. Twelvety는 출력 된 이미지를 output 디렉토리 ( .twelvety.js 내에 정의 됨) 내부의 assets 디렉토리에 저장합니다. picture 단축 코드는 또한 다른 매개 변수를 사용합니다. 기본값 sizes 90vw, (min-width: 1280px) 1152px , 브레이크 포인트 크기를 기반으로합니다. 기본값을 lazy loading eager 할 수 있습니다.
*AVIF는 빌드 시간이 길기 때문에 기본적으로 비활성화됩니다. .twelvety.js 에서 활성화 할 수 있습니다.
<!-- Picture shortcode with src, alt, sizes and loading -->
{% picture 'car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}
<!-- Absolute paths also work -->
{% picture '/src/_assets/images/car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}
<!-- Output of shortcode -->
< picture style =" background-color:rgb(38%,28%,26%);padding-bottom:50% " >
< source srcset =" /_assets/2263c1d0.avif 320w,/_assets/519fcdec.avif 640w,/_assets/b59349f7.avif 960w,/_assets/e8dae22f.avif 1280w,/_assets/4ba755ff.avif 1600w,/_assets/87c06dd1.avif 1920w " sizes =" 90vw " type =" image/avif " >
< source srcset =" /_assets/0e7cdd2f.webp 320w,/_assets/ba4e43dd.webp 640w,/_assets/bc541ea5.webp 960w,/_assets/6d620165.webp 1280w,/_assets/756857ea.webp 1600w,/_assets/483e9c95.webp 1920w " sizes =" 90vw " type =" image/webp " >
< source srcset =" /_assets/6a3b0321.jpeg 320w,/_assets/2bf90b83.jpeg 640w,/_assets/4a810813.jpeg 960w,/_assets/601b629c.jpeg 1280w,/_assets/c39ac58c.jpeg 1600w,/_assets/25a2b530.jpeg 1920w " sizes =" 90vw " type =" image/jpeg " >
< img src =" /_assets/25a2b530.jpeg " alt =" Panning photo of grey coupe on road " width =" 2400 " height =" 1200 " loading =" lazy " >
</ picture > picture Shortcode는 기본 게으른로드를 사용하지만 원하는 경우 lazysizes 또는 유사한 라이브러리에 대한 지원을 추가하기가 쉽습니다. picture 바로가 코드는 이미지의 평균 색상을 계산하여 이미지가 표시되는 동안 레이아웃 시프트를 피하기 위해 padding-bottom 사용하여 이미지가로드됩니다.
picture 단축 코드는 Markdown의 모든 이미지에 자동으로 사용됩니다. 이를 비활성화하려면 Markdown-IT 인스턴스를 편집해야합니다 (Markdown 기능 참조).
<!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg ) picture 단축 코드로 출력 된 이미지가 캐시됩니다. 캐시를 지우려면 .twelvety.cache (JSON 파일 만)를 삭제하거나 npm run clean 실행하여 캐시와 출력 디렉토리를 삭제하십시오. 출력 디렉토리를 삭제하지만 .twelvety.cache 삭제하면 상황이 나옵니다.
append 좋아요, 여기 있습니다 . styles Shortcode가 작동하기 위해서는 보통 body 에있는 모든 stylesheet 쌍의 단축 코드 이후에 나와야합니다. 그러나 우리는 CSS가 head 에 연결되거나 상환되기를 원합니다. 이곳은 append 쌍의 단축 코드와 변환이 들어 와서 styles 의 출력을 우리가 원하는 곳으로 다시 head 입니다.
<!DOCTYPE html >
< html lang =" en " >
< head >
<!-- Everything in append paired shortcode will be moved here -->
</ head >
< body >
<!-- Stylesheet paired shortcodes can go here -->
...
<!-- Append paired shortcode with styles inside -->
{% append 'head' %}
< style >
{% styles page.url %}
</ style >
{% endappend %}
</ body >
</ html > append 페어링 된 단축 코드는 실제로 template 으로 대체됩니다. append Transform은 JSDOM을 사용하여 주어진 선택기 (이 경우 head )에 template 의 내용을 추가합니다.
script 단축 코드에 대해서도 동일한 문제가 있지만, 이것은 어쨌든 body 의 JavaScript를 포함시키는 것이 일반적이기 때문에 그런 문제는 아닙니다.
markdown 단축 코드 및 구성 쌍을 이루었습니다Twelvety는 자체 인스턴스 인 MARKDOWN-IT를 설정합니다. 구성 옵션은 다음과 같습니다.
{
html : true ,
breaks : true ,
typographer : true
} Twelvety는 또한 렌더러의 image 규칙을 수정합니다. img 요소를 출력하는 대신 Twelvety는 응답 picture 단축 코드를 사용하여 각 이미지를 렌더링합니다. 이를 비활성화하려면 utils/markdown.js 에서 다음 줄을 제거하십시오.
md . renderer . rules . image = function ( tokens , index ) {
const token = tokens [ index ] ;
const src = token . attrs [ token . attrIndex ( "src" ) ] [ 1 ] ;
const alt = token . content ;
return pictureShortcode ( src , alt ) ;
} ; Twelvety는 또한 Markdown-IT 구성을 사용하는 markdown 페어링 단축 코드를 추가합니다.
{% markdown %}
# `markdown` paired shortcode
Lets you use **Markdown** like _this_.
{% endmarkdown %}이것은 마크 다운 파일을 템플릿에 포함시키는 데 정말 유용합니다.
{% markdown %}
{%- include 'content.md' -%}
{% endmarkdown %} markdown 쌍의 단축 코드를 사용할 때 들여 쓰기 코드 블록의 일반적인 함정에주의하십시오. 들여 쓰기 코드 블록이 귀찮은 경우 울타리 코드 블록을 유지하는 동안 utils/markdown.js 에서 비활성화 할 수 있습니다.
// Uncomment the following line to disable indented code blocks
- // .disable("code")
+ .disable("code")critical 변환Twelvety는 변환을 사용하는 대신 모든 페이지에서 Critical-Path CSS를 추출하고 인라인 크리티컬 CSS를 사용합니다.
format 변환 format 변환은 JS Beautifier를 사용하여 개발에서 HTML을 아름답게하고 htmlminifier를 사용하여 생산에서 HTML을 최소화합니다. 모든 인라인 CSS 및 JavaScript도 아름답게 또는 미니즈를 제공합니다.
Visual Studio 코드를 사용하는 경우 SASS 및 JavaScript가 올바르게 강조 표시되도록이 액체 확장을 권장합니다.
