Dostosowana Nawigacja

Weźmy jako przykład witrynę demonstracyjną i18n-demo.github.io aby wyjaśnić, jak dostosować nawigację.

Pliki odpowiadające ponumerowanym obszarom na powyższym rysunku są następujące:

1. Lewe .i18n/htm/t1.pug
2. Prawo .i18n/htm/t2.pug

pug to język szablonów, który generuje HTML .

➔ Kliknij tutaj, aby poznać gramatykę pug

Ciąg formatujący ${I18N.sponsor} jest używany w pliku do implementacji internacjonalizacji, a jego zawartość zostanie zastąpiona i18n.yml tekstem w katalogu języka źródłowego.

Plik odpowiadający stylowi paska nawigacji to : .i18n/htm/topbar.css .

[!WARN] Nie zapisuj css i js w pug , w przeciwnym razie wystąpi błąd.

Komponenty Sieciowe

js nie można zapisać w postaci pug Jeśli wymagana jest interakcja, można ją osiągnąć tworząc komponent sieciowy.

Komponenty mogą definiować komponent strony internetowej w md/.i18n/htm/index.js , a następnie używać komponentu w foot.pug .

Tworzenie komponentów internetowych, takich jak niestandardowe <x-img> , jest łatwe.

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

Obecnie x/i-h.js jest przywoływane w md/.i18n/htm/index.js , który jest komponentem sieciowym używanym do internacjonalizacji tekstu nawigacji i dostosowanej zawartości stopki. Zobacz kod źródłowy 18x/src/i-h.js