Přizpůsobená Navigace

Vezměme si i18n-demo.github.io web jako příklad pro vysvětlení, jak přizpůsobit navigaci.

Soubory odpovídající číslovaným oblastem na výše uvedeném obrázku jsou následující:

Vlevo .i18n/htm/t1.pug
Správně .i18n/htm/t2.pug

pug je jazyk šablony, který generuje HTML .

➔ Kliknutím sem se naučíte gramatiku pug

Formátový řetězec ${I18N.sponsor} se v souboru používá k implementaci internacionalizace a jeho obsah bude nahrazen i18n.yml textem v adresáři zdrojového jazyka.

Soubor odpovídající stylu navigační lišty .i18n/htm/topbar.css :

[!WARN] Nepište css a js v pug , jinak dojde k chybě.

Webové Komponenty

js nelze zapsat jako pug Pokud je vyžadována interakce, lze toho dosáhnout vytvořením webové komponenty.

Komponenty mohou definovat komponentu webové stránky v md/.i18n/htm/index.js a pak použít komponentu v foot.pug .

Je snadné vytvářet webové komponenty, jako jsou vlastní <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);
    }
  }
)

V současné době je x/i-h.js odkazováno na md/.i18n/htm/index.js , což je webová komponenta používaná pro internacionalizaci textu přizpůsobeného navigace a zápatí Viz zdrojový kód 18x/src/i-h.js