Navegación Personalizada

Tomemos o sitio de i18n-demo.github.io como exemplo para explicar como personalizar a navegación.

Os ficheiros correspondentes ás áreas numeradas da figura anterior son os seguintes:

1. Esquerda .i18n/htm/t1.pug
2. Dereito .i18n/htm/t2.pug

pug é unha linguaxe de modelo que xera HTML .

➔ Fai clic aquí para aprender a gramática de pug

A cadea de formato ${I18N.sponsor} úsase no ficheiro para implementar a internacionalización e o seu contido substituirase polo texto i18n.yml no directorio da lingua de orixe.

O ficheiro correspondente ao estilo da barra .i18n/htm/topbar.css :

[!WARN] Non escriba css e js en pug , se non, producirase un erro.

Compoñentes Web

pug non se pode escribir js Se é necesaria a interacción, pódese conseguir creando un compoñente web.

Os compoñentes poden definir un compoñente de páxina web en md/.i18n/htm/index.js e despois usar o compoñente en foot.pug .

É doado crear compoñentes web, como <x-img> personalizadas0 .

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

Actualmente fai referencia x/i-h.js en md/.i18n/htm/index.js , que é un compoñente web usado para a internacionalización da navegación e o texto de contido personalizado do pé Vexa o código fonte 18x/src/i-h.js