Prilagođena Navigacija

Uzmimo demo stranicu kao primjer da objasnimo kako prilagoditi navigaciju i18n-demo.github.io

Fajlovi koji odgovaraju numerisanim područjima na gornjoj slici su sljedeći:

1. Lijevo .i18n/htm/t1.pug
2. Desno .i18n/htm/t2.pug

pug je jezik šablona koji generiše HTML .

➔ Kliknite ovdje da naučite gramatiku pug

Niz formata ${I18N.sponsor} se koristi u datoteci za implementaciju internacionalizacije, a njen sadržaj će biti zamijenjen i18n.yml tekstom u direktoriju izvornog jezika.

Fajl koji odgovara stilu trake .i18n/htm/topbar.css :

[!WARN] Nemojte pisati css i js u pug , inače će doći do greške.

Web Komponente

js se ne može napisati u pug Ako je potrebna interakcija, to se može postići kreiranjem web komponente.

Komponente mogu definirati komponentu web stranice u md/.i18n/htm/index.js , a zatim koristiti komponentu u foot.pug .

Lako je kreirati web komponente, kao što su prilagođene <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);
    }
  }
)

Trenutno se x/i-h.js navodi u md/.i18n/htm/index.js , što je web komponenta koja se koristi za internacionalizaciju navigacije i prilagođenog teksta u podnožju. Pogledajte izvorni kod 18x/src/i-h.js