Aangepaste Navigatie

Laten i18n-demo.github.io de demosite als voorbeeld nemen om uit te leggen hoe u de navigatie kunt aanpassen.

De bestanden die overeenkomen met de genummerde gebieden in de bovenstaande afbeelding zijn als volgt:

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

pug is een sjabloontaal die HTML -en genereert.

➔ Klik hier om de grammatica van te leren pug

De formatstring ${I18N.sponsor} wordt in het bestand gebruikt om internationalisering te implementeren, en de inhoud ervan wordt vervangen door de overeenkomstige tekst in de i18n.yml .

Het bestand dat overeenkomt met de stijl van de navigatiebalk .i18n/htm/topbar.css :

[!WARN] Schrijf niet css en js in pug , anders treedt er een fout op.

Webcomponenten

js kan niet in pug worden geschreven. Als er interactie nodig is, kan dit worden bereikt door een webcomponent te maken.

Componenten kunnen een webpaginacomponent in md/.i18n/htm/index.js definiëren en vervolgens de component in foot.pug gebruiken.

Het is eenvoudig om webcomponenten te maken, zoals aangepaste <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);
    }
  }
)

Momenteel wordt naar x/i-h.js verwezen in md/.i18n/htm/index.js , een webcomponent die wordt gebruikt voor de internationalisering van de aangepaste inhoudstekst van de navigatie en 18x/src/i-h.js voettekst.