Navigare Personalizată

Să luăm site-ul i18n-demo.github.io ca exemplu pentru a explica cum să personalizați navigarea.

Fișierele corespunzătoare zonelor numerotate din figura de mai sus sunt următoarele:

Stânga .i18n/htm/t1.pug
Corect .i18n/htm/t2.pug

pug este un limbaj șablon care generează HTML .

➔ Faceți clic aici pentru a afla gramatica lui pug

Șirul de format ${I18N.sponsor} este utilizat în fișier pentru a implementa internaționalizarea, iar conținutul acestuia va fi înlocuit cu textul i18n.yml în directorul limbii sursă.

Fișierul corespunzător stilului barei .i18n/htm/topbar.css :

[!WARN] Nu scrieți css și js în pug , altfel va apărea o eroare.

Componente Web

js nu poate fi scris în pug Dacă este necesară interacțiunea, aceasta poate fi realizată prin crearea unei componente web.

Componentele pot defini o componentă de pagină web în md/.i18n/htm/index.js și apoi pot folosi componenta în foot.pug .

Este ușor să creați componente web, cum ar fi <x-img> personalizate0 .

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);
    }
  }
)

În prezent, x/i-h.js este referit în md/.i18n/htm/index.js , care este o componentă web utilizată pentru internaționalizarea textului de conținut personalizat de navigare și subsol. Vezi codul sursă 18x/src/i-h.js