কাস্টম নেভিগেশন

ন্যাভিগেশন কাস্টমাইজ করার জন্য একটি উদাহরণ হিসাবে ডেমো সাইট নেওয়া যাক 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] pug এর মধ্যে css এবং js লিখবেন না , অন্যথায় একটি ত্রুটি হবে।

ওয়েব উপাদান

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

বর্তমানে md/.i18n/htm/index.js এ x/i-h.js উল্লেখ করা হয়েছে, যা নেভিগেশন এবং ফুটার কাস্টমাইজড কন্টেন্ট টেক্সটের জন্য ব্যবহৃত একটি ওয়েব কম্পোনেন্ট 18x/src/i-h.js