カスタマイズされたフッター

引き続きデモ プロジェクトを例に挙げると、 mdディレクトリの.i18n/htm/foot.pugは Web サイトのフッターを定義します。

フッターのスタイル

デモ プロジェクトにはmd/.i18n/htmの下にcssファイルが 3 つあります。

• foot.css :フッターのスタイル
• import.css : 1サイト全体のi18n.siteスタイル
• conf.css :フッターのアイコンとフォント

アイコンフォント

フッター アイコンは、 F iconfont.cn (英語版/中文版) という名前のフォントを作成することによって生成されます。

独自のアイコン フォントを作成し、 conf.cssの設定内のアイコン フォントを置き換えてください:

@font-face {
  font-family: "F";
  src: url(//p.3ti.site/ico1.woff2) format("woff2");
}

#Ft>b>a.site {
  background: url("//p.3ti.site/i18n.svg") 0 0 / cover;
  display: block;
  height: 24px;
  opacity: 0.8;
  width: 115px;
  flex-shrink: 0;
}

iconfont.cnのフォントファイルはSafariブラウザでは読み込むことができないため、直接参照しないでください。

多言語フッター

.i18n/htm/foot.pugのコードは次のとおりです:

#Ft
  b
    a.site(href="/")
    b ${I18N.C}

ここで、 ${I18N.C} en/i18n.ymlに対応します:

C: Power By <a class="a" href="https://i18n.site">i18n.site</a>

この書き方と同様に${I18N.xxx}使用し、 i18n.ymlと組み合わせることで、フッターの多言語国際化を実現できます。

リンクにclass="a"追加すると、リンクがMarkDownに変換されなくなります。「 :参照してください。 ➔ YAML :リンクHTML Markdownに変換されないようにする方法。