ਅਨੁਕੂਲਿਤ ਨੈਵੀਗੇਸ਼ਨ

ਆਉ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਲਈ ਇੱਕ ਉਦਾਹਰਣ ਦੇ ਤੌਰ 'ਤੇ ਲੈਂਦੇ ਹਾਂ i18n-demo.github.io

ਉਪਰੋਕਤ ਚਿੱਤਰ ਵਿੱਚ ਅੰਕਿਤ ਖੇਤਰਾਂ ਨਾਲ ਸੰਬੰਧਿਤ ਫਾਈਲਾਂ ਇਸ ਪ੍ਰਕਾਰ ਹਨ:

1. ਖੱਬੇ .i18n/htm/t1.pug
2. ਸੱਜਾ .i18n/htm/t2.pug

pug ਇੱਕ ਟੈਂਪਲੇਟ ਭਾਸ਼ਾ ਹੈ ਜੋ HTML 's ਤਿਆਰ ਕਰਦੀ ਹੈ।

➔ ਦੀ ਵਿਆਕਰਨ ਸਿੱਖਣ ਲਈ ਇੱਥੇ ਕਲਿੱਕ ਕਰੋ 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);
    }
  }
)

ਵਰਤਮਾਨ ਵਿੱਚ md/.i18n/htm/index.js ਵਿੱਚ x/i-h.js ਦਾ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਜੋ ਕਿ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਫੁੱਟਰ ਕਸਟਮਾਈਜ਼ਡ ਸਮੱਗਰੀ ਟੈਕਸਟ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਇੱਕ ਵੈੱਬ ਭਾਗ ਹੈ 18x/src/i-h.js