ناوبری سفارشی

بیایید سایت آزمایشی را به عنوان i18n-demo.github.io در نظر بگیریم تا نحوه سفارشی کردن ناوبری را توضیح دهیم.

فایل های مربوط به نواحی شماره گذاری شده در شکل بالا به شرح زیر است:

1. سمت چپ .i18n/htm/t1.pug
2. راست .i18n/htm/t2.pug

pug یک زبان قالب است که HTML را تولید می کند.

➔ برای یادگیری گرامر اینجا را کلیک کنید pug

رشته فرمت ${I18N.sponsor} در فایل برای پیاده سازی بین المللی استفاده می شود و محتوای آن با متن i18n.yml در فهرست زبان مبدأ جایگزین می شود.

فایل مربوط به سبک نوار ناوبری : .i18n/htm/topbar.css .

[!WARN] css و js را در pug ننویسید ، در غیر این صورت خطایی رخ می دهد.

اجزای وب

js نمی توان با pug نوشت. در صورت نیاز به تعامل، می توان با ایجاد یک جزء وب به آن رسید.

کامپوننت ها می توانند یک جزء صفحه وب را در md/.i18n/htm/index.js تعریف کنند و سپس از جزء در foot.pug استفاده کنند.

ایجاد اجزای وب، مانند <x-img> سفارشی0، آسان است.

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

در حال حاضر x/i-h.js در md/.i18n/htm/index.js ارجاع داده می شود، که یک مؤلفه وب است که برای بین المللی سازی متن محتوای سفارشی شده برای پیمایش و پاورقی استفاده می شود. کد منبع را ببینید 18x/src/i-h.js