Персонализирана Навигация

Нека вземем демонстрационния сайт като пример, за да обясним как да персонализираме навигацията 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