多言語コンポーネントベースの柔軟なページ(別名I 18 Nの1つのページウェブサイト)のための11
イントロ
昨年の11回目(11代)についての大規模な誇大宣伝は、それを試してみたかった.
ドキュメント
ドキュメントは確かに良いですが、それは私が探していた正確に欠けている:再利用可能なUIコンポーネントを使用して構築された構造のマルチセクションのページを使用する方法(主人公、テキスト、テキストイメージ、ギャラリーなど).
私は、同じセットアップを求めるカップルのカップルを見つけることができた最後に私は、このツールは、主に単純なコンテンツ構造を持つデータ駆動静的ジェネレータとして使用するように設計されていることを考え出した:コンテンツとテンプレートの間の1〜1関係.
幸運にも、ロレンス氏が書いたこの興味深い記事を見つけました.Reusable code snippets and components in Eleventy
フロントエンドツールチェーンとライブラリ
11 tyはどんな種類のフロントエンドライブラリまたはフレームワークとも結合されません.ない場所でのコンパイルは、postcss、ないバベル、ウェブパック…!何もない.特定のツールは、デフォルトでは、あなたのためのツールチェーンのセットアップで使用されていません:あなたは何をしたいを使用して無料ですが、同時に、あなたは何を設定するだけで少し時間を費やすつもりです.
設定ファイル
たとえあなたがカスタムコレクション、フィルタ、基本的なセットアップなどを定義するためにそれを必要とするので
コンセプト
11 tyでは、コンテンツファイルはテンプレートと呼ばれ、通常はテンプレートと呼ばれるものをレイアウトと呼びます.
エンジンがたくさんあり、あなたもそれらをミックスすることができます.
私は、テンプレートのためにMarkdownを使用しました、そして、レイアウトのためのNunjucks(テンプレート).
いくつかの重要な点
Nunjucks基本
私はコンポーネントベースの開発が大好きです:アイデアは、あなたが時間を必要とするスコープ指定されたデータを渡す、あなたのプロジェクトをThoughtoutを使用できる再利用可能なカプセル化UIの一部を持っているということです.
Twigを使用すると、通常、各コンポーネント(部分)に対して1つのマークアップファイルを記述し、次に
include
とwith 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
ディレクトリ内のすべてのファイルNunjucksとUIコンポーネント
そして、これはレイアウトパーツの構造を示したものです.
フロントエンドツールチェーン
ここのGulp FTW.
私は、SSSファイルをコンパイルするためにGulpを使用して、JavaScriptファイルをバベルとバンドルを使用してロールアップし、更新ソースファイルがあるときにSCSSとJSを処理するためにウォッチタスクを設定します.
すべての処理されたファイル(最終的なスタイル. min . cssとapp . min . js)は、src/資産フォルダーの下で「処理された」フォルダに保存されます、そして、11 tyは変化を見て、単にそれらのファイルをコピーするために構成されます.
多言語
もう一つの一般的な要求は、あなたのプロジェクトでi 18 nを管理することです.
私が知っている限りでは、これのための公式のプラグインがありません、そして、JavaScript Worldで通常通り、Tigsをする複数の方法があります.これが私のアプローチです.
ページコンテンツの翻訳
{
---
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
Reference
この問題について(多言語コンポーネントベースの柔軟なページ(別名I 18 Nの1つのページウェブサイト)のための11), 我々は、より多くの情報をここで見つけました https://dev.to/andberry/eleventy-11ty-setup-for-multilingual-component-based-flexible-pages-aka-one-page-websites-with-i18n-2iloテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol