ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ನ್ಯಾವಿಗೇಷನ್

ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಹೇಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಡೆಮೊ ಸೈಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳೋಣ 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> ನಂತಹ ವೆಬ್ ಘಟಕಗಳನ್ನು ರಚಿಸುವುದು ಸುಲಭ.

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

18x/src/i-h.js x/i-h.js md/.i18n/htm/index.js ನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ, ಇದು ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ವಿಷಯ ಪಠ್ಯದ ಅಂತರರಾಷ್ಟ್ರೀಕರಣಕ್ಕಾಗಿ ಬಳಸಲಾಗುವ ವೆಬ್ ಅಂಶವಾಗಿದೆ.