TwelvetyダウンロードTwelvetyソースコードのダウンロード

Twelvety

サードパーティ製コンポーネント

v1.4.1

ダウンロード

？ TwelleTy

デモサイトを参照してください

Twelvetyは、高速に構築された事前に構成された110のスタータープロジェクトです。それは以下を含みます：

コンポーネントアーキテクチャ
SASS、PostCSS、CleanCSSを使用したCSSパイプライン
browserify、babel、uglifyを使用したJSパイプライン
ページ固有のCSSおよびJS
インラインクリティカルCSSおよび非批判的なCSSを延期します
HTML、CSS、JSを模倣しました
AVIFとWebPサポートを使用したレスポンシブ画像ショートコード
資産のコンテンツハッシュ

このようなコンポーネントを書き込む：

 < 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に展開します

TwelLedetyの独自のインスタンスをすばやく展開してNetLifyを展開するには、下のボタンをクリックして、指示に従ってください。

このボタンをクリックするとどうなりますか？ Netlifyは、Twelvety GitリポジトリをGitHubアカウントにクローンし（これを行う許可を求めます）、NetLifyアカウントに新しいリポジトリを追加して展開します！

ローカルで実行します

このリポジトリの上部にあるこのテンプレートボタンをクリックして、GitHubアカウントで独自のTwelvetyリポジトリを作成します。新しいTwelvetyリポジトリをコンピューターにクローンまたはダウンロードします。

node.jsとnpm（node.jsに含まれる）が必要です。必要なパッケージをインストールするには、実行します

npm install

コマンド

npm run serve development serverとlive-leloadを実行する
npm run build実行して、生産用にビルドします
npm run clean出力フォルダーとTwelvetyキャッシュをきれいにします

Twelvetyの脳はutilsフォルダーに住んでいます：ウェブサイトを作りたいだけなら、 utils内部の内部に触れる必要はありません。ただし、ショートコードのいずれかを変更したい場合は、周りを見てください！

特徴

Twelvetyは、変換、ショートコード、いくつかの賢明なオプションを設定します。以下の機能をクリックして、それらがどのように機能するかを学びます。

stylesheetペアのショートコード

stylesheetペアのショートコードを使用して、SASSを含めます。 styles Directory（ .twelvety.jsで定義）およびnode_modulesからSASSファイルをインポートできます。 SASSは、DART-SASSを使用してレンダリングされ、PostCSS（PostCSS Preset Envおよび互換性のためにオートプレフィキサーを使用して）に渡され、Clean-CSSを使用して削除するか、JS Beautifierによって美化されます（それぞれ生産と開発中）。

{% stylesheet 'scss' %}
  @import "normalize.css/normalize";
  @import "mixins";

  .home {
    @include container;

    color: $color--red;
  }
{% endstylesheet %}

stylesheetのショートコードの2番目のパラメーターは言語です。現在、これは何もしないため、ショートコードのShopifyの定義と一致するためだけに含まれています。 Sass Indented Syntaxを使用する場合は、 .twelvety.jsにあるindentedSass Twellevetyオプションを変更できます。

stylesheetペアのショートコードには3番目のパラメーターもあり、デフォルトではpage.urlに設定されており、現在のページのURLがレンダリングされています。これは、必要なCSSのみが各ページに含まれることを意味します。このパラメーターを使用して、CSSの独自の「チャンク」を作成できます。たとえば、Webサイトのすべてのページに共通するCSSファイルです。

stylesショートコード

stylesショートコードは、特定のチャンクのstylesheetのショートコードで書かれたすべてのSASを収集し、レンダリングされたCSSを出力します。「Chunk」は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を含めます。 Twelvetyはbrowserifyを使用してrequire('modules')できるようにして、最新の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ペアのショートコードには2番目のパラメーターがあり、デフォルトではpage.urlに設定されており、現在のページのURLがレンダリングされています。これは、必要なJavaScriptのみが各ページに含まれることを意味します。たとえば、すべてのベンダーコードのJavaScriptファイルなど、このパラメーターを使用して、JavaScriptの独自の「チャンク」を作成できます。

各javascriptペアのショートコードの出力はIIFEに包まれて、変数がグローバルな範囲を汚染しないようにします。 windowで何かを定義する場合は、 window.something =を使用します。

scriptショートコード

scriptショートコードは、指定されたチャンク用のすべてのJavaScriptを収集し、JavaScriptを出力します（トランスピレーションと模倣後）。「Chunk」は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ディレクトリ内のassets Directoryに保存します（両方とも.twelvety.js内で定義されます）。 pictureショートコードは、ブレークポイントのsizesに基づいて90vw, (min-width: 1280px) 1152pxにデフォルトでデフォルトのサイズの2つのパラメーターも使用します。デフォルトの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ショートコードはネイティブのレイジーロードを使用しますが、必要に応じてlazysizesまたは同様のライブラリをサポートするのは簡単です。 pictureショートコードは、画像のロード中に表示する画像の平均色を計算し、 padding-bottomを使用してレイアウトシフトを避けます。

pictureショートコードは、マークダウンのすべての画像に対して自動的に使用されます。これを無効にするには、MarkDown-ITのインスタンスを編集する必要があります（Markdown Featureを参照）。

 <!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg )

pictureショートコードによって出力された画像はキャッシュされています。キャッシュをクリアする場合は、 .twelvety.cache （JSONファイルのみ）を削除するか、 npm run cleanキャッシュと出力ディレクトリを削除します。出力ディレクトリを削除すると、 .twelvety.cache削除すると、状況は壊れます。

ペアのショートコードと変換をappend

さて、ここにある人たち：TwelvetyのあるGotcha 。 stylesショートコードが機能するためには、すべてのstylesheetペアのショートコードの後に来なければなりません。これは通常、 bodyにあります。ただし、CSSをheadにリンクまたはインラリングすることを望んでいます。これは、 stylesショートコードの出力を必要なheadに戻すために、 append付きショートコードと変形が入ってくる場所です。

 <!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ショートコードにも同じ問題が存在しますが、とにかくbodyの底からJavaScriptを含めることが非常に一般的であるため、これはそれほど問題ではありません。

markdownペアのショートコードと構成

Twelvetyは、Markdown-Itの独自のインスタンスを設定しています。構成オプションは次のとおりです。

 {
  html : true ,
  breaks : true ,
  typographer : true
}

TwelLedetyは、レンダラーのimageルールも変更します。IMG 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 ) ;
} ;

Twellevetyは、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は、すべてのページにクリティカルパスCSSを抽出およびインラインで抽出してインライン化するために、批判的なCSSを使用するようになりました。

format変換

format Transformは、JS Beautifierを使用して開発中のHTMLをBeautifififififififififififififififiesで、HTMLMINIFIERを使用して生産でHTMLを模倣します。インラインCSSおよびJavaScriptも美化または模倣されます。