Tilpasset Navigasjon

La oss ta i18n-demo.github.io som et eksempel for å forklare hvordan du tilpasser navigasjonen.

Filene som tilsvarer de nummererte områdene i figuren ovenfor er som følger:

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

pug er et malspråk som genererer HTML -er.

➔ Klikk her for å lære grammatikken til pug

Formatstrengen ${I18N.sponsor} brukes i filen for å implementere internasjonalisering, og innholdet vil bli erstattet med den tilsvarende i18n.yml i kildespråkkatalogen.

Filen som tilsvarer stilen til navigasjonslinjen .i18n/htm/topbar.css :

[!WARN] Ikke skriv css og js i pug , ellers vil det oppstå en feil.

Webkomponenter

js kan ikke skrives i pug Hvis interaksjon er nødvendig, kan det oppnås ved å lage en webkomponent.

Komponenter kan definere en nettsidekomponent i md/.i18n/htm/index.js og deretter bruke komponenten i foot.pug .

Det er enkelt å lage nettkomponenter, for eksempel tilpassede <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);
    }
  }
)

For øyeblikket er x/i-h.js referert til md/.i18n/htm/index.js , som er en webkomponent som brukes for internasjonalisering av navigasjons- og bunntekst tilpasset innholdstekst. Se kildekoden 18x/src/i-h.js