Індивідуальна Навігація

Давайте візьмемо демонстраційний сайт як приклад 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 , інакше буде помилка.

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

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