定制导航

我们以演示站点 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。