Navigazione Personalizzata

Prendiamo come i18n-demo.github.io il sito demo per spiegare come personalizzare la navigazione.

I file corrispondenti alle aree numerate nella figura sopra sono i seguenti:

1. A sinistra .i18n/htm/t1.pug
2. Giusto .i18n/htm/t2.pug

pug è un linguaggio modello che genera HTML .

➔ Clicca qui per imparare la grammatica di pug

La stringa di formato ${I18N.sponsor} viene utilizzata nel file per implementare l'internazionalizzazione e il suo contenuto verrà sostituito con il testo corrispondente in i18n.yml nella directory della lingua di origine.

Il file corrispondente allo stile della barra di .i18n/htm/topbar.css è :

[!WARN] Non scrivere css e js in pug , altrimenti si verificherà un errore.

Componenti Web

js non può essere scritto in pug Se è necessaria l'interazione, è possibile ottenerla creando un componente web.

I componenti possono definire un componente della pagina Web in md/.i18n/htm/index.js e quindi utilizzare il componente in foot.pug .

È facile creare componenti Web, come <x-img> personalizzati0 .

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

Attualmente si fa riferimento x/i-h.js in md/.i18n/htm/index.js , che è un componente Web utilizzato per l'internazionalizzazione della navigazione e del testo del contenuto personalizzato nel piè di pagina. Vedere il codice sorgente 18x/src/i-h.js