多言語コンポーネントベースの柔軟なページ(別名I 18 Nの1つのページウェブサイト)のための11


イントロ


昨年の11回目(11代)についての大規模な誇大宣伝は、それを試してみたかった.

ドキュメント


ドキュメントは確かに良いですが、それは私が探していた正確に欠けている:再利用可能なUIコンポーネントを使用して構築された構造のマルチセクションのページを使用する方法(主人公、テキスト、テキストイメージ、ギャラリーなど).
私は、同じセットアップを求めるカップルのカップルを見つけることができた最後に私は、このツールは、主に単純なコンテンツ構造を持つデータ駆動静的ジェネレータとして使用するように設計されていることを考え出した:コンテンツとテンプレートの間の1〜1関係.
幸運にも、ロレンス氏が書いたこの興味深い記事を見つけました.Reusable code snippets and components in Eleventy

フロントエンドツールチェーンとライブラリ


11 tyはどんな種類のフロントエンドライブラリまたはフレームワークとも結合されません.ない場所でのコンパイルは、postcss、ないバベル、ウェブパック…!何もない.特定のツールは、デフォルトでは、あなたのためのツールチェーンのセットアップで使用されていません:あなたは何をしたいを使用して無料ですが、同時に、あなたは何を設定するだけで少し時間を費やすつもりです.

設定ファイル


たとえあなたがカスタムコレクション、フィルタ、基本的なセットアップなどを定義するためにそれを必要とするので

コンセプト


11 tyでは、コンテンツファイルはテンプレートと呼ばれ、通常はテンプレートと呼ばれるものをレイアウトと呼びます.
エンジンがたくさんあり、あなたもそれらをミックスすることができます.
私は、テンプレートのためにMarkdownを使用しました、そして、レイアウトのためのNunjucks(テンプレート).
いくつかの重要な点
  • デフォルトでは、すべてのテンプレートが自動的に最終HTMLページを生成します
  • あなたは、フロントティを使用して、11の動作を駆動し、レイアウト内で必要となるカスタムコンテンツを定義します
  • レイアウトのフロントキーを使用して、どのレイアウトを使用してページを生成するかを示します
  • コレクションは、APIを使用して再生することができますコンテンツのグループです:あなたは別の方法でコレクションを定義することができます
  • Nunjucks基本


    私はコンポーネントベースの開発が大好きです:アイデアは、あなたが時間を必要とするスコープ指定されたデータを渡す、あなたのプロジェクトをThoughtoutを使用できる再利用可能なカプセル化UIの一部を持っているということです.
    Twigを使用すると、通常、各コンポーネント(部分)に対して1つのマークアップファイルを記述し、次にincludewith only そのコンポーネントが必要とする唯一のデータを渡すキーワード.
    NunJucksは、テンプレートの継承とパーティションの定義をサポートしていますinclude そんなに実用的ではないwith キーワーク.
    Nunjucksでは、コンポーネントベースのテンプレートを書く最良の方法はmacro 成層
        {% macro field(name, value='', type='text') %}
            <div class="field">
                <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
            </div>
        {% endmacro %}
    
    注意:include 仕事をするようですが、実際にはparamsを必要としないテンプレートの断片のために使用するのは良いです.この問題はparamsスコープである.{% set %} include文の直前に「データを渡す」という文がありますが、スコープが存在しません.includeコールの前に設定したすべての変数は、コンポーネントの内部に表示されます.

    マルチセクションページのコンテンツとレイアウトの構造化


    それぞれのページには以下のディレクトリがあります.
  • 内部のすべてのファイルに対してページを生成しないための"permalink": false ) を設定し、tags ディレクトリ内のすべてのファイル
  • 使用するUIコンポーネントを示すためにカスタム“clyouyout”フロントキーを使用してページの各セクションの1つのファイル
  • ページのURLに設定されているパーマリンクフロントキーキーを持つ1ページのファイル
  • NunjucksとUIコンポーネント


    そして、これはレイアウトパーツの構造を示したものです.
  • 1すべての再利用可能なUIコンポーネントマークアップを含む特定のディレクトリ
  • すべての利用可能なUIコンポーネントを定義するファイルをインクルードとマクロステートメントを使用して定義する
  • すべての異なるページsetionファイル(コレクション)を循環させ、関連するコンポーネントをレンダリングするときに使用される
  • フロントエンドツールチェーン


    ここのGulp FTW.
    私は、SSSファイルをコンパイルするためにGulpを使用して、JavaScriptファイルをバベルとバンドルを使用してロールアップし、更新ソースファイルがあるときにSCSSとJSを処理するためにウォッチタスクを設定します.
    すべての処理されたファイル(最終的なスタイル. min . cssとapp . min . js)は、src/資産フォルダーの下で「処理された」フォルダに保存されます、そして、11 tyは変化を見て、単にそれらのファイルをコピーするために構成されます.

    多言語


    もう一つの一般的な要求は、あなたのプロジェクトでi 18 nを管理することです.
    私が知っている限りでは、これのための公式のプラグインがありません、そして、JavaScript Worldで通常通り、Tigsをする複数の方法があります.これが私のアプローチです.

    ページコンテンツの翻訳

  • サポートする各言語の1つのディレクトリを作成する
  • カスタムの“LANG”フロントキーキーを使用してロケールをテンプレートに設定します.これは、マルチ言語のグローバルデータファイル(ラベル、ヘッダー、フッター、ナビゲーションなど)から適切な内容を取得するために使用されます
  • {
        ---
        layout: layouts/pages/home-fr.njk
        title: "Homepage FR"
        permalink: /fr/
        lang: fr
        ---
    }
    

    グローバルコンテンツ(静的ラベル、ナビゲーションなど)の翻訳


    複数のキー(言語ごとに1つ)であなたのグローバルデータファイルを構造化し、relavantaデータのみを含むテンプレートとパーティションをコード化する
        {
            "en": {
                "websitename": "Berry is the best",
                "footercopyright": "Foo bar"
            },
    
            "fr": {
                "websitename": "Berry est la meilleure ",
                "footercopyright": "Foo bar fr"
            }
        }
    
        {% set navMain = navMain[lang] if lang else navMain['en'] %}
    
        <nav id="main-nav" class="c-nav-main u-show-on-desktop">
            <ul>
                {% for item in navMain %}
                [...]
            </ul>
        </nav>
    

    私にコードを見せてください!


    完璧ではないので、ここで実現しているすべてのことでREPOを見つけることができます.
    https://github.com/andberry/berry-11ty