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

Давайце возьмем дэма 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