Vlastná Navigácia

Vezmime si ukážkovú stránku ako príklad na vysvetlenie i18n-demo.github.io ako prispôsobiť navigáciu.

Súbory zodpovedajúce očíslovaným oblastiam na obrázku vyššie sú nasledovné:

1. Vľavo .i18n/htm/t1.pug
2. Správne .i18n/htm/t2.pug

pug je jazyk šablóny, ktorý generuje HTML .

➔ Kliknite sem a naučte sa gramatiku pug

Formátovací reťazec ${I18N.sponsor} sa v súbore používa na implementáciu internacionalizácie a jeho obsah bude nahradený i18n.yml textom v adresári zdrojového jazyka.

Súbor zodpovedajúci štýlu navigačnej lišty .i18n/htm/topbar.css :

[!WARN] Nepíšte css a js v pug , inak dôjde k chybe.

Web Komponenty

js nemožno zapísať ako pug Ak je potrebná interakcia, možno ju dosiahnuť vytvorením webového komponentu.

Komponenty môžu definovať komponent webovej stránky v md/.i18n/htm/index.js a potom použiť komponent v foot.pug .

Vytváranie webových komponentov, ako sú napríklad vlastné <x-img> , je jednoduché.

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

V súčasnosti sa x/i-h.js označuje ako md/.i18n/htm/index.js , čo je webová komponenta používaná na internacionalizáciu textu prispôsobeného navigácie a päty Pozrite si zdrojový kód 18x/src/i-h.js