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。
