Angepasste Navigation

Nehmen wir die Demoseite als Beispiel i18n-demo.github.io um zu erklären, wie die Navigation angepasst werden kann.

Die Dateien, die den nummerierten Bereichen in der obigen Abbildung entsprechen, lauten wie folgt:

1. Links .i18n/htm/t1.pug
2. Richtig .i18n/htm/t2.pug

pug ist eine Vorlagensprache, die HTML generiert.

➔ Klicken Sie hier, um die Grammatik von zu lernen pug

Zur Implementierung der Internationalisierung wird in der Datei die Formatzeichenfolge ${I18N.sponsor} verwendet und ihr Inhalt wird durch den entsprechenden Text in i18n.yml im Quellsprachenverzeichnis ersetzt.

Die dem Stil der Navigationsleiste entsprechende .i18n/htm/topbar.css ist :

[!WARN] Schreiben Sie nicht css und js in pug , da sonst ein Fehler auftritt.

Webkomponenten

js kann nicht in pug geschrieben werden. Wenn eine Interaktion erforderlich ist, kann dies durch die Erstellung einer Webkomponente erreicht werden.

Komponenten können eine Webseitenkomponente in md/.i18n/htm/index.js definieren und dann die Komponente in foot.pug verwenden.

Es ist einfach, Webkomponenten zu erstellen, z. B. benutzerdefinierte <x-img> .

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

Derzeit wird x/i-h.js in md/.i18n/htm/index.js referenziert, einer Webkomponente, die zur Internationalisierung von Navigations- und Fußzeilen-individuellen Inhaltstexten verwendet wird. Siehe Quellcode 18x/src/i-h.js