Prilagojena Navigacija

Vzemimo demo stran kot primer i18n-demo.github.io da pojasnimo, kako prilagoditi navigacijo!

Datoteke, ki ustrezajo oštevilčenim območjem na zgornji sliki, so naslednje:

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

pug je predlogni jezik, ki generira HTML .

➔ Kliknite tukaj, če želite izvedeti slovnico pug

Niz formata ${I18N.sponsor} se v datoteki uporablja za izvedbo internacionalizacije, njegova vsebina pa bo nadomeščena z i18n.yml besedilom v imeniku izvornega jezika.

Datoteka, ki ustreza slogu navigacijske vrstice .i18n/htm/topbar.css je :

[!WARN] Ne pišite css in js v pug , sicer bo prišlo do napake.

Spletne Komponente

js ni mogoče zapisati v pug Če je potrebna interakcija, jo lahko dosežete z ustvarjanjem spletne komponente.

Komponente lahko definirajo komponento spletne strani v md/.i18n/htm/index.js in jo nato uporabijo v foot.pug .

Preprosto je ustvariti spletne komponente, kot so <x-img> po meri0.

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 je x/i-h.js naveden v md/.i18n/htm/index.js , kar je spletna komponenta, ki se uporablja za internacionalizacijo besedila vsebine po meri za navigacijo in nogo Glej izvorno kodo 18x/src/i-h.js