カスタマイズされたナビゲーション

デモ サイトを例としてi18n-demo.github.ioナビゲーションをカスタマイズする方法を説明します。

上図の番号が付いた領域に対応するファイルは次のとおりです。

1. 左.i18n/htm/t1.pug
2. 右.i18n/htm/t2.pug

pug HTMLを生成するテンプレート言語です。

➔ の文法を学ぶにはここをクリックしてくださいpug

国際化を実装するためにファイル内でフォーマット文字列${I18N.sponsor}が使用され、その内容はソース言語ディレクトリ内の対応するi18n.ymlに置き換えられます。

ナビゲーション バーのスタイルに対応する.i18n/htm/topbar.cssは:

[!WARN] pugにcssとjs書き込まないでください。そうしないとエラーが発生します。

Webコンポーネント

pug js書き込むことはできません。対話が必要な場合は、Web コンポーネントを作成することで実現できます。

コンポーネントはmd/.i18n/htm/index.jsでWeb ページ コンポーネントを定義し、そのコンポーネントをfoot.pugで使用できます。

カスタム<x-img>などの Web コンポーネントを簡単に作成できます。

customElements.define(
  'x-img',
  class extends HTMLElement {
    constructor() {
      super();
      var img = document.createElement('img');
      img.src = '//p.3ti.site/i18n.svg';
      img.style = "height:99px;width:99px;";
      this.append(img);
    }
  }
)

現在、 x/i-h.jsはmd/.i18n/htm/index.jsで参照されています。これは、ナビゲーションおよびフッターのカスタマイズされたコンテンツ テキストの国際化に使用される Web コンポーネントです。ソース コードを参照してください18x/src/i-h.js