Anpassad Navigering

Låt oss ta i18n-demo.github.io som ett exempel för att förklara hur man anpassar navigeringen.

Filerna som motsvarar de numrerade områdena i ovanstående figur är följande:

1. Vänster .i18n/htm/t1.pug
2. Höger .i18n/htm/t2.pug

pug är ett mallspråk som genererar HTML :or.

➔ Klicka här för att lära dig grammatiken för pug

Formatsträngen ${I18N.sponsor} används i filen för att implementera internationalisering, och dess innehåll kommer att ersättas med motsvarande text i källspråkskatalogen i18n.yml

Filen som motsvarar stilen .i18n/htm/topbar.css :

[!WARN] Skriv inte css och js i pug , annars blir det ett fel.

Webbkomponenter

pug kan inte skrivas js Om interaktion krävs kan det uppnås genom att skapa en webbkomponent.

Komponenter kan definiera en webbsideskomponent i md/.i18n/htm/index.js och sedan använda komponenten i foot.pug .

Det är enkelt att skapa webbkomponenter, till exempel anpassade <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);
    }
  }
)

För närvarande hänvisas x/i-h.js till md/.i18n/htm/index.js , vilket är en webbkomponent som används för internationalisering av navigering och anpassad sidfotstext. Se källkoden 18x/src/i-h.js