Kohandatud Navigeerimine

Võtame näitena demo saidi i18n-demo.github.io et selgitada, kuidas navigeerimist kohandada.

Ülaloleval joonisel nummerdatud aladele vastavad failid on järgmised:

1. .i18n/htm/t1.pug
2. Õige .i18n/htm/t2.pug

pug on mallikeel, mis genereerib HTML -sid.

➔ Keele grammatika õppimiseks klõpsake siin pug

Failis kasutatakse rahvusvahelistumise realiseerimiseks vormingustringi ${I18N.sponsor} ja selle sisu asendatakse i18n.yml kataloogis vastava tekstiga.

Navigeerimisriba stiilile vastav fail on .i18n/htm/topbar.css :

[!WARN] Ärge kirjutage css ja js pug -sse , vastasel juhul tekib viga.

Veebikomponendid

js ei saa kirjutada pug Kui interaktsioon on vajalik, saab seda saavutada veebikomponendi loomisega.

Komponendid saavad määratleda veebilehe komponendi väärtuses md/.i18n/htm/index.js ja seejärel kasutada komponenti väärtuses foot.pug .

Veebikomponente, näiteks kohandatud <x-img> , on lihtne luua.

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);
    }
  }
)

Praegu on x/i-h.js viidatud md/.i18n/htm/index.js , mis on veebikomponent, mida kasutatakse navigeerimise ja jaluse kohandatud sisuteksti rahvusvahelistumiseks. Vaadake lähtekoodi 18x/src/i-h.js