Prilagođena Navigacija

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

Datoteke koje odgovaraju numeriranim područjima na gornjoj slici su sljedeće:

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

pug je jezik predloška koji generira HTML .

➔ Kliknite ovdje da naučite gramatiku pug

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

Datoteka koja odgovara stilu .i18n/htm/topbar.css trake je :

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

Web Komponente

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

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

Lako je stvoriti 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 spominje u md/.i18n/htm/index.js , što je web komponenta koja se koristi za internacionalizaciju teksta prilagođenog sadržaja za navigaciju i podnožje. Pogledajte izvorni kod 18x/src/i-h.js