Navigasi Khusus

Mari kita ambil situs demo i18n-demo.github.io sebagai contoh untuk menjelaskan cara menyesuaikan navigasi.

File yang sesuai dengan area bernomor pada gambar di atas adalah sebagai berikut:

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

pug adalah bahasa templat yang menghasilkan HTML .

➔ Klik di sini untuk mempelajari tata bahasa pug

Format string ${I18N.sponsor} digunakan dalam file untuk mengimplementasikan internasionalisasi, dan isinya akan diganti dengan teks yang sesuai dalam i18n.yml di direktori bahasa sumber.

File .i18n/htm/topbar.css sesuai dengan gaya bilah navigasi adalah :

[!WARN] Jangan menulis css dan js di pug , jika tidak maka akan terjadi kesalahan.

Komponen Web

js tidak dapat ditulis dengan pug Jika diperlukan interaksi, hal ini dapat dicapai dengan membuat komponen web.

Komponen dapat mendefinisikan komponen halaman web di md/.i18n/htm/index.js dan kemudian menggunakan komponen di foot.pug .

Sangat mudah untuk membuat komponen web, seperti <x-img> khusus0 .

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

Saat ini x/i-h.js direferensikan dalam md/.i18n/htm/index.js , yang merupakan komponen web yang digunakan untuk internasionalisasi teks konten navigasi dan footer yang disesuaikan Lihat kode sumber 18x/src/i-h.js