Skræddersyet Navigation

Lad os tage i18n-demo.github.io som et eksempel for at forklare, hvordan man tilpasser navigation.

Filerne, der svarer til de nummererede områder i ovenstående figur, er som følger:

1. Venstre .i18n/htm/t1.pug
2. Højre .i18n/htm/t2.pug

pug er et skabelonsprog, der genererer HTML .

➔ Klik her for at lære grammatikken i pug

Formatstrengen ${I18N.sponsor} bruges i filen til at implementere internationalisering, og dens indhold vil blive erstattet med den tilsvarende tekst i kildesprogsbiblioteket i18n.yml

Filen, der svarer til navigationslinjens stil .i18n/htm/topbar.css :

[!WARN] Skriv ikke css og js i pug , ellers vil der være en fejl.

Web Komponenter

pug kan ikke skrives js Hvis interaktion er påkrævet, kan det opnås ved at oprette en webkomponent.

Komponenter kan definere en websidekomponent i md/.i18n/htm/index.js og derefter bruge komponenten i foot.pug .

Det er nemt at oprette webkomponenter, såsom brugerdefinerede <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);
    }
  }
)

I øjeblikket henvises til x/i-h.js i md/.i18n/htm/index.js , som er en webkomponent, der bruges til internationalisering af navigation og sidefod tilpasset indholdstekst. Se kildekoden 18x/src/i-h.js