定制導航

我們以演示站點 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，否則會有錯誤。

網頁組件

pug中不能寫js，如需交互，可通過創建網頁組件來實現。

組件可在 md/.i18n/htm/index.js 中定義網頁組件，然后在foot.pug使用該組件。

創建網頁組件很簡單, 比如自定義標签<x-img>。

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);
    }
  }
)

目前 md/.i18n/htm/index.js 中引用了x/i-h.js，這是用于導航和頁腳定制內容文本國際化的網頁組件，源代碼見 18x/src/i-h.js。