Navegação Personalizada

Vamos pegar o site i18n-demo.github.io demonstração como exemplo para explicar como personalizar a navegação.

Os arquivos correspondentes às áreas numeradas na figura acima são os seguintes:

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

pug é uma linguagem de modelo que gera HTML 's.

➔ Clique aqui para aprender a gramática de pug

A string de formato ${I18N.sponsor} é usada no arquivo para implementar a internacionalização e seu conteúdo será substituído pelo texto i18n.yml no diretório do idioma de origem.

O arquivo correspondente ao estilo da barra de navegação é .i18n/htm/topbar.css :

[!WARN] Não escreva css e js em pug , caso contrário ocorrerá um erro.

Componentes Da Web

js não pode ser escrito em pug Se a interação for necessária, ela pode ser obtida criando um componente web.

Os componentes podem definir um componente de página da web em md/.i18n/htm/index.js e então usar o componente em foot.pug .

É fácil criar componentes da 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);
    }
  }
)

Atualmente x/i-h.js é referenciado em md/.i18n/htm/index.js , que é um componente web utilizado para internacionalização de navegação e texto de conteúdo customizado de rodapé Veja o código fonte 18x/src/i-h.js