定制页脚

还是以演示项目为例，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。