Twelvety
v1.4.1
Veja o site de demonstração
A doze anos é um projeto iniciante pré-configurado, construído para ser rápido. Inclui:
Escreva componentes como este:
< 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 %}Para implantar rapidamente sua própria instância de doze para netlify, basta clicar no botão abaixo e seguir as instruções.
O que acontecerá quando eu clicar neste botão? O Netlify clonará o repositório do doze anos à sua conta do GitHub (ele solicitará sua permissão para fazer isso), adicione o novo repositório à sua conta Netlify e a implante!
Clique no botão Use este modelo na parte superior deste repositório para fazer seu próprio repositório doze na sua conta do Github. Clone ou faça o download do seu novo repositório doze doze no seu computador.
Você precisará de Node.js e NPM (incluídos no Node.js). Para instalar os pacotes necessários, execute
npm installnpm run serve para executar um servidor de desenvolvimento e relevamento ao vivonpm run build para construir para a produçãonpm run clean para limpar a pasta de saída e doze cache O cérebro de doze anos ao vivo na pasta utils : se você deseja apenas fazer um site, não precisará tocar em nada dentro utils . No entanto, se você quiser alterar algum dos códigos de curta duração, dê uma olhada em volta!
Doze configurações de configurações, códigos de atalho e algumas opções sensíveis elevador. Clique nos recursos abaixo para saber como eles funcionam.
stylesheet Código de shortcode emparelhado Use a stylesheet Compare Shortcode para incluir seu SASS. Você pode importar arquivos SASS do seu diretório styles (definido em .twelvety.js ) e de node_modules . O SASS será renderizado usando o DART-SASS, transmitido para o PostCSS (com o PostCSS Preset Env e o Autoprefixer para compatibilidade) e Minified usando o Clean-CSS ou embelezado por JS Beleutifier (em produção e desenvolvimento, respectivamente).
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} O segundo parâmetro da folha de stylesheet emparelhado é o idioma; Atualmente, isso não faz nada e é incluído apenas para se alinhar com a definição do shortcode do Shopify. Se você deseja usar a sintaxe SASS, pode alterar a opção de doze indentedSass , encontrada em .twelvety.js .
A folha de stylesheet em pareada também possui um terceiro parâmetro, que por padrão está definido como page.url , o URL da página atual sendo renderizada. Isso significa que apenas o CSS necessário está incluído em cada página. Você pode fazer seu próprio 'pedaço' de CSS usando este parâmetro, por exemplo, um arquivo CSS comum a todas as páginas do seu site.
styles Shortcode O styles Shortcode coleta todos os sass escritos na stylesheet emparelhados com os códigos de short para o pedaço dado e produz o CSS renderizado. O 'Chunk' padrão para page.url , o URL da página atual que está sendo renderizada.
<!-- 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' %} " /> Observe que o código de short styles deve ser colocado abaixo de qualquer tipo de shortcodes emparelhados stylesheet no modelo; Consulte o código de atalho emparelhado append e transforme para obter mais informações.
javascript emparelhado Inclua seu JavaScript usando o código de short javascript emparelhado. O doze usa o BrowSerify para que você possa require('modules') e Babel para que você possa usar o JavaScript mais recente. Seu JavaScript será minificado usando o Uglify na produção ou embelezado pelo JS Beleutifier no desenvolvimento.
{% 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 %} O javascript Pareed Shortcode possui um segundo parâmetro, que por padrão é definido como page.url , o URL da página atual sendo renderizada. Isso significa que apenas o JavaScript necessário está incluído em cada página. Você pode fazer seu próprio 'pedaço' de JavaScript usando este parâmetro, por exemplo, um arquivo JavaScript para todo o código do fornecedor.
A saída de cada código de curto emparelhada javascript será embrulhada em um IIFE, para que suas variáveis não poluem o escopo global. Se você deseja definir algo na window , use window.something = .
script O script shortcode coleta todo o JavaScript para o pedaço dado e produz o JavaScript (após transpilação e minificação). O 'Chunk' padrão para page.url , o URL da página atual que está sendo renderizada.
<!-- 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 > Observe que o script shortcode deve ser colocado abaixo de qualquer código de short javascript no modelo; Geralmente, isso não é um problema, pois o JavaScript é frequentemente incluído imediatamente anterior </body> . Se você deseja o JavaScript em outro lugar, consulte o código de short e transformado append .
asset O código de shortcode asset produz um ativo com conteúdo com o conteúdo e a extensão fornecidos. O conteúdo pode ser uma String ou Buffer . Os ativos serão salvos no diretório de assets dentro do diretório output (ambos definidos no .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 " /> Você pode importar a função de código de atalho asset no JavaScript: é assim que o picture de shortcode salva suas imagens responsivas no diretório assets .
picture de Short O código de shortcode picture leva os parâmetros src e alt e produz um elemento de imagem responsivo com suporte AVIF* e WebP. Suas imagens devem ser armazenadas no diretório images , definidas no .twelvety.js . A doze anos salvará as imagens em saída no diretório assets dentro do diretório output (ambos definidos no .twelvety.js ). O código de curta picture também leva dois outros parâmetros: sizes que padrão são 90vw, (min-width: 1280px) 1152px , com base nos tamanhos dos pontos de interrupção; E loading que padrão é lazy , também pode estar eager .
*Avif está desativado por padrão devido a longos tempos de construção. Você pode ativá -lo em .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 > O shortcode picture usa carregamento preguiçoso nativo, mas seria fácil adicionar suporte para lazysizes ou uma biblioteca semelhante, se você desejar. O código de curta- picture calcula a cor média da imagem a ser exibida enquanto a imagem é carregada, usando padding-bottom para evitar a mudança de layout.
O código de curta picture é usado automaticamente para todas as imagens no Markdown. Para desativar isso, você precisará editar a instância do Markdown-It (consulte o recurso Markdown).
<!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg ) As imagens produzidas pelo código de atalho picture são armazenadas em cache. Se você deseja limpar o cache, exclua .twelvety.cache (apenas um arquivo JSON) ou execute npm run clean para excluir o cache e o diretório de saída. Se você excluir o diretório de saída, mas .twelvety.cache , as coisas vão quebrar.
append o código de short e transformar emparelhado Ok, pessoal, aqui está: aquele pegista com doze anos. Para que o código de atalho styles funcione, ele deve vir depois de todas as folhas de stylesheet emparelhadas, que geralmente estariam no body . No entanto, queremos que nosso CSS esteja ligado ou inlinado na head . É aqui que entra o shortcode e a transformação emparelhados append , para mover a saída do código de short styles de volta para a head , onde queremos.
<!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 > O shortcode emparelhado append será realmente substituído por um template . A transformação append usa o JSDOM para anexar o conteúdo do template ao seletor fornecido (neste caso, head ).
O mesmo problema existe para o código script , no entanto, isso não é um problema, porque é muito comum incluir JavaScript da parte inferior do body de qualquer maneira.
markdownDoze define sua própria instância de Markdown-It. As opções de configuração são:
{
html : true ,
breaks : true ,
typographer : true
} Doze também modifica a regra image do renderizador: em vez de emitir um elemento img , doze usa o código de short picture responsivo para renderizar cada imagem. Se você deseja desativar isso, remova as seguintes linhas no 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 ) ;
} ; A doze anos também adiciona um código de shorts pareado markdown que usa a configuração do Markdown-It.
{% markdown %}
# `markdown` paired shortcode
Lets you use **Markdown** like _this_.
{% endmarkdown %}Isso também é realmente útil para incluir arquivos de marcação em um modelo.
{% markdown %}
{%- include 'content.md' -%}
{% endmarkdown %} Cuidado com a armadilha comum dos blocos de código recuada ao usar o código de short de emparelhamento markdown . Se os blocos de código recuperados estiverem se tornando um incômodo, você poderá desativá -los no utils/markdown.js , mantendo os blocos de código cercado.
// Uncomment the following line to disable indented code blocks
- // .disable("code")
+ .disable("code")criticalEm vez de usar uma transformação, a doze anos agora usa CSS de CSS crítico para extrair e embrulhar CSS em todas as páginas.
format O format transforma embeleza o HTML no desenvolvimento usando o JS Beautifier e minifica o HTML na produção usando o HTMLMinifier. Qualquer CSS e JavaScript embutido também será embelezado ou minificado.
Se você estiver usando o código do Visual Studio, recomendo esta extensão líquida para que seu SASS e JavaScript sejam destacados corretamente.
