Custom Navigation

Let's take the demo site i18n-demo.github.io as an example to explain how to customize the navigation.

The files corresponding to the numbered areas in the above figure are as follows:

1. Left .i18n/htm/t1.pug
2. Right .i18n/htm/t2.pug

pug is a template language for generating HTML.

➔ Click here to learn Pug's syntax

The format string ${I18N.sponsor} is used in the file to implement internationalization, and its content will be replaced with the corresponding text in i18n.yml in the source language directory.

The file corresponding to the style of the navigation bar is: .i18n/htm/topbar.css.

[!WARN] Do not write CSS or JavaScript in Pug files, as this will cause errors.

Web Components

pug does not support writing js. If interaction is required, it can be achieved by creating web components.

Components can be defined in md/.i18n/htm/index.js web page components, and then used in foot.pug.

Creating web components is simple, for example, a custom <x-img> tag.

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

Currently, md/.i18n/htm/index.js references x/i-h.js, which is a web component used for internationalizing the navigation and footer customized content text. See the source code at 18x/src/i-h.js.