Navigasi Tersuai

Mari kita ambil tapak i18n-demo.github.io sebagai contoh untuk menerangkan cara menyesuaikan navigasi.

Fail yang sepadan dengan kawasan bernombor dalam rajah di atas adalah seperti berikut:

1. Kiri .i18n/htm/t1.pug
2. Betul .i18n/htm/t2.pug

pug ialah bahasa templat yang menjana HTML 's.

➔ Klik di sini untuk mempelajari tatabahasa pug

Rentetan format ${I18N.sponsor} digunakan dalam fail untuk melaksanakan pengantarabangsaan, dan kandungannya akan digantikan dengan teks yang i18n.yml dalam direktori bahasa sumber.

Fail yang sepadan dengan gaya bar navigasi .i18n/htm/topbar.css :

[!WARN] Jangan tulis css dan js dalam pug , jika tidak akan berlaku ralat.

Komponen Web

js tidak boleh ditulis dalam pug Jika interaksi diperlukan, ia boleh dicapai dengan mencipta komponen web.

Komponen boleh mentakrifkan komponen halaman web dalam md/.i18n/htm/index.js dan kemudian menggunakan komponen dalam foot.pug .

Mudah untuk membuat komponen web, seperti <x-img> tersuai0 .

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

Pada masa ini x/i-h.js dirujuk dalam md/.i18n/htm/index.js , yang merupakan komponen web yang digunakan untuk pengantarabangsaan navigasi dan teks kandungan tersuai footer Lihat kod sumber 18x/src/i-h.js