Pasgemaakte Navigasie

Kom ons neem die demo-werf as 'n voorbeeld om te verduidelik hoe om navigasie aan te pas i18n-demo.github.io

Die lêers wat ooreenstem met die genommerde areas in die bostaande figuur is soos volg:

1. Links .i18n/htm/t1.pug
2. Regs .i18n/htm/t2.pug

pug is 'n sjabloontaal wat HTML genereer.

➔ Klik hier om die grammatika van pug

Die formaatstring ${I18N.sponsor} word in die lêer gebruik om internasionalisering te implementeer, en die inhoud daarvan sal vervang word met die ooreenstemmende teks in die i18n.yml .

Die lêer wat ooreenstem met die styl van die navigasiebalk .i18n/htm/topbar.css :

[!WARN] Moenie css en js in pug skryf nie , anders sal daar 'n fout wees.

Webkomponente

js kan nie in pug geskryf word nie. Indien interaksie vereis word, kan dit bereik word deur 'n webkomponent te skep.

Komponente kan 'n webbladkomponent in md/.i18n/htm/index.js definieer en dan die komponent in foot.pug gebruik.

Dit is maklik om webkomponente te skep, soos pasgemaakte <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);
    }
  }
)

Tans word daar na x/i-h.js verwys in md/.i18n/htm/index.js , wat 'n webkomponent is wat gebruik word vir internasionalisering van navigasie- en voetskrif-aangepaste inhoudteks. Sien die bronkode 18x/src/i-h.js