定制頁腳

還是以演示項目為例，md目錄中.i18n/htm/foot.pug定義了網站的頁腳。

頁腳樣式

演示項目中md/.i18n/htm下面有3個css文件。

• foot.css: 頁腳樣式
• import.css:i18n.site全站的默認樣式
• conf.css: 頁腳的圖標、字體

圖標字體

頁腳圖標是通過 iconfont.cn ( 英文版 / 中文版 ) 創建名為F的字體生成的。

請您創建自己的圖標字體后，替換掉 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。