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

Давайте возьмем демонстрационный сайт в качестве 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