Прилагодена Навигација

Да ја земеме i18n-demo.github.io страницата како пример за да објасниме како да ја приспособите навигацијата.

Датотеките што одговараат на нумерираните области на горната слика се како што следува:

1. Лево .i18n/htm/t1.pug
2. Десно .i18n/htm/t2.pug

pug е јазик на шаблон кој генерира HTML .

➔ Кликнете овде за да ја научите граматиката на pug

Низата за формат ${I18N.sponsor} се користи во датотеката за имплементација на интернационализација, а нејзината содржина ќе биде заменета со соодветниот i18n.yml во директориумот на изворниот јазик.

Датотеката што одговара на стилот на лентата .i18n/htm/topbar.css :

[!WARN] Не пишувајте css и js во pug , во спротивно ќе има грешка.

Веб Компоненти

pug не може да се запише js Доколку е потребна интеракција, таа може да се постигне со креирање на веб-компонента.

Компонентите можат да дефинираат компонента на веб-страница во md/.i18n/htm/index.js и потоа да ја користат компонентата во foot.pug .

Лесно е да се креираат веб компоненти, како што се сопствени <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);
    }
  }
)

Моментално x/i-h.js е референцирано со md/.i18n/htm/index.js , што е веб-компонента што се користи за интернационализација на навигацијата и приспособениот текст на содржината на подножјето Видете го изворниот код 18x/src/i-h.js