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

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

Датотеке које одговарају нумерисаним областима на горњој слици су следеће:

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

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

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

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

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

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

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

js се не може написати у pug Ако је потребна интеракција, то се може постићи креирањем веб компоненте.

Компоненте могу дефинисати компоненту веб странице у 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