अनुकूलित नेविगेशन

आइए नेविगेशन को अनुकूलित करने के तरीके को समझाने के लिए एक उदाहरण के रूप में डेमो साइट लें 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 न लिखें , अन्यथा त्रुटि हो जायेगी।

वेब घटक

pug js नहीं लिखा जा सकता है। यदि इंटरैक्शन की आवश्यकता है, तो इसे एक वेब घटक बनाकर प्राप्त किया जा सकता है।

घटक एक वेब पेज घटक को md/.i18n/htm/index.js में परिभाषित कर सकते हैं और फिर foot.pug में घटक का उपयोग कर सकते हैं।

कस्टम <x-img> जैसे वेब घटक बनाना आसान है।

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