Footer

Still taking the demo project as an example, in the md directory, .i18n/htm/foot.pug defines the footer of the website.

pug is a template language for generating HTML.

➔ Click here to learn the grammar of pug

Do not write css and js in foot.pug, otherwise there will be errors.

Please refer to the following: the style is written into the corresponding .css, and the interaction is achieved by creating web components.

Footer Style

There are three css files under md/.i18n/htm in the demo project.

Icon Font

The footer icon is generated by creating a font named F through iconfont.cn ( English version / Chinese version).

Please create your own icon font as needed and replace the following configuration in conf.css:

@font-face {
  font-family: "F";
  src: url("//at.alicdn.com/t/c/font_4281991_urfar2m2zce.woff2?t=1716188208767") format("woff2");
}

Web Components

You cannot write js in foot.pug. If interaction is required, please customize the web component.

A web component can be defined in md/.i18n/htm/index.js and then used in foot.pug.

It is easy to create web components, such as custom <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);
    }
  }
)

Multilingual Footer

The code in .i18n/htm/foot.pug is as follows:

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

Here ${I18N.C} corresponds to that in en/i18n.yml:

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

Using ${I18N.xxx} in a similar way like this, combined with i18n.yml, can achieve multilingual internationalization of the footer.

Adding class="a" to the link is to prevent the link from being converted to MarkDown. See: ➔ YAML: How to prevent the HTML of the link from being converted to MarkDown.