Navegació Personalitzada

Prenem el lloc de demostració com a i18n-demo.github.io per explicar com personalitzar la navegació.

Els fitxers corresponents a les àrees numerades de la figura anterior són els següents:

1. Esquerra .i18n/htm/t1.pug
2. Dret .i18n/htm/t2.pug

pug és un llenguatge de plantilla que genera HTML .

➔ Feu clic aquí per aprendre la gramàtica de pug

La cadena de format ${I18N.sponsor} s'utilitza al fitxer per implementar la internacionalització, i el seu contingut es substituirà pel text i18n.yml al directori de l'idioma font.

El fitxer corresponent a l'estil de .i18n/htm/topbar.css :

[!WARN] No escriviu css i js en pug , en cas contrari hi haurà un error.

Components Web

js no es pot escriure en pug Si es requereix interacció, es pot aconseguir creant un component web.

Els components poden definir un component de pàgina web en md/.i18n/htm/index.js i després utilitzar el component en foot.pug .

És fàcil crear components web, com ara <x-img> personalitzades0 .

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

Actualment es fa referència x/i-h.js en md/.i18n/htm/index.js , que és un component web utilitzat per a la internacionalització de la navegació i el text de contingut personalitzat al peu de pàgina. Vegeu el codi font 18x/src/i-h.js