Twelvety
v1.4.1
查看演示網站
十二座是一個預先配置的高度入門項目，該項目建立了快速。它包括：
這樣寫組件：
< 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，只需單擊下面的按鈕並按照說明。
當我單擊此按鈕時會發生什麼？ Netlify將克隆十二個GIT存儲庫到您的GitHub帳戶（它會要求您執行此操作），將新存儲庫添加到您的NetLify帳戶中並部署！
單擊此存儲庫頂部的使用此模板按鈕，以在GitHub帳戶中製作自己的十二個存儲庫。克隆或將新的十二個存儲庫下載到計算機上。
您需要Node.js和NPM（Node.js隨附）。要安裝所需的軟件包，請運行
npm installnpm run serve以運行開發服務器和實時重牌npm run build以生產構建npm run clean以清潔輸出文件夾和十二個緩存utils文件夾中的十二個大腦生存：如果您只想創建一個網站，那麼您就無需觸摸utils內部的任何內容。但是，如果您想更改任何短碼，請環顧四周！
十二個設置轉換，快速代碼和一些明智的高度選擇。單擊下面的功能以了解它們的工作原理。
stylesheet配對的短代碼使用stylesheet配對的快速代碼包括您的SASS。您可以從styles目錄（在.twelvety.js中定義）和node_modules導入SASS文件。 SASS將使用Dart-Sass渲染，並將其傳遞到PostCSS（帶有PostCSS PrestET Env和AutopRefixer以兼容），並使用Clean-CSS進行縮小或由JS Beaperifier（分別在生產和開發中）進行美化。
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} stylesheet配對的短代碼的第二個參數是語言。目前，這無濟於事，僅包括與Shopify對短代碼的定義保持一致。如果要使用SASS縮進的語法，則可以更改.twelvety.js中找到indentedSass十二個選項。
stylesheet配對的短代碼還具有第三個參數，默認情況下，該參數設置為page.url ，即當前頁面的URL。這意味著每個頁面中僅包含所需的CSS。您可以使用此參數來製作自己的CSS的“塊”，例如，網站所有頁面共有的CSS文件。
styles快捷代碼styles快捷代碼將所有用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短代碼必須放置在模板中的任何stylesheet配對的短碼下方；有關更多信息，請參見append配對的短代碼並進行轉換。
javascript配對的快捷代碼使用javascript配對的快捷代碼包括您的JavaScript。十二次使用瀏覽器，因此您可以require('modules')和babel，因此您可以使用最新的JavaScript。然後，您的JavaScript將在生產中使用uglify進行縮小或由JS Beautifier在開發中美化。
{% 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的“塊”。
每個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目錄中。十二個將輸出的圖像保存到output目錄內的assets目錄（均定義為.twelvety.js ）。 picture快捷代碼還採用其他兩個參數：根據斷點sizes ，默認為90vw, (min-width: 1280px) 1152px ； loading到lazy默認值也可能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快捷代碼使用本機懶惰加載，但如果您希望，對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短代碼工作，必須在所有stylesheet配對的短碼之後進行，這通常是在body 。但是，我們希望我們的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變換使用JSDOM將template的內容附加到給定的選擇器（在這種情況下為head ）。
script快捷代碼也存在同樣的問題，但是，這不是一個問題，因為無論如何都可以將JavaScript從body的底部包含。
markdown配對的短代碼和配置十二個設定了自己的Markdown-It實例。配置選項是：
{
html : true ,
breaks : true ,
typographer : true
}十二還修改了渲染器的image規則：而不是輸出img元素，而是使用響應式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 ) ;
} ;十二章還添加了使用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轉換現在，十二次使用高度臨界-CS來提取和內聯臨界路徑CSS，而不是使用轉換。
format轉換format轉換使用JS Beautifier在開發中美化HTML，並使用HTMLMinifier在生產中縮小HTML。任何內聯CSS和JavaScript也將被美化或縮小。
如果您使用的是Visual Studio代碼，我建議您使用此液體擴展名，以便正確突出顯示您的Sass和JavaScript。
