Navegación Personalizada

i18n-demo.github.io Tomemos el sitio de demostración como ejemplo para explicar cómo personalizar la navegación!

Los archivos correspondientes a las áreas numeradas en la figura anterior son los siguientes:

1. Izquierda .i18n/htm/t1.pug
2. Derecha .i18n/htm/t2.pug

pug es un lenguaje de plantilla que genera HTML .

➔ Haga clic aquí para aprender la gramática de pug

La cadena de formato ${I18N.sponsor} se utiliza en el archivo para implementar la internacionalización y su contenido se reemplazará con el texto i18n.yml en el directorio del idioma de origen.

El archivo correspondiente .i18n/htm/topbar.css estilo de la barra de navegación es :

[!WARN] No escriba css y js en pug , de lo contrario habrá un error.

Componentes Web

js no se puede escribir en pug Si se requiere interacción, se puede lograr creando un componente web.

Los componentes pueden definir un componente de página web en md/.i18n/htm/index.js y luego usar el componente en foot.pug .

Es fácil crear componentes 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 x/i-h.js está referenciado en md/.i18n/htm/index.js , que es un componente web utilizado para la internacionalización de la navegación y el texto del contenido personalizado del pie de página. ¡Vea el código fuente 18x/src/i-h.js