Pielāgota Navigācija

Ņemsim par piemēru demonstrācijas vietni i18n-demo.github.io lai izskaidrotu, kā pielāgot navigāciju.

Faili, kas atbilst numurētajiem apgabaliem iepriekšējā attēlā, ir šādi:

1. Pa kreisi .i18n/htm/t1.pug
2. Pa labi .i18n/htm/t2.pug

pug ir veidņu valoda, kas ģenerē HTML .

➔ Noklikšķiniet šeit, lai uzzinātu gramatiku pug

Formāta virkne ${I18N.sponsor} tiek izmantota failā, lai īstenotu internacionalizāciju, un tās saturs tiks aizstāts ar atbilstošo i18n.yml avota valodas direktorijā.

Navigācijas joslas stilam atbilstošais fails ir .i18n/htm/topbar.css :

[!WARN] Nerakstiet css un js pug , pretējā gadījumā radīsies kļūda.

Tīmekļa Komponenti

js nevar ierakstīt pug Ja ir nepieciešama mijiedarbība, to var panākt, izveidojot tīmekļa komponentu.

Komponenti var definēt tīmekļa lapas komponentu md/.i18n/htm/index.js un pēc tam izmantot komponentu foot.pug .

Ir viegli izveidot tīmekļa komponentus, piemēram, pielāgotus <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);
    }
  }
)

Pašlaik uz x/i-h.js ir atsauce md/.i18n/htm/index.js , kas ir tīmekļa komponents, ko izmanto navigācijas un kājenes pielāgota satura teksta internacionalizācijai. Skatiet avota kodu 18x/src/i-h.js