Özelleştirilmiş Navigasyon

Gezinmenin nasıl özelleştirileceğini açıklamak için örnek olarak demo sitesini ele alalım i18n-demo.github.io

Yukarıdaki şekilde numaralandırılmış alanlara karşılık gelen dosyalar aşağıdaki gibidir:

1. Sol .i18n/htm/t1.pug
2. Sağ .i18n/htm/t2.pug

pug HTML üreten bir şablon dilidir.

➔ ! gramerini öğrenmek için buraya tıklayın pug

Uluslararasılaştırmayı uygulamak için dosyada ${I18N.sponsor} format dizisi kullanılır ve içeriği, kaynak dil dizinindeki karşılık gelen i18n.yml değiştirilecektir.

Gezinme çubuğunun stiline karşılık gelen dosya : .i18n/htm/topbar.css .

[!WARN] pug css ve js yazmayın yoksa hata olur.

Web Bileşenleri

pug js yazılamaz. Etkileşim gerekiyorsa web bileşeni oluşturularak sağlanabilir.

Bileşenler bir web sayfası bileşenini md/.i18n/htm/index.js tanımlayabilir ve ardından bileşeni foot.pug kullanabilir.

Özel <x-img> gibi web bileşenlerini oluşturmak kolaydır.

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

Şu anda, gezinme ve altbilgi özelleştirilmiş içerik metninin uluslararasılaştırılması için kullanılan bir web bileşeni olan md/.i18n/htm/index.js x/i-h.js başvurulmaktadır. Kaynak koduna bakın 18x/src/i-h.js