કસ્ટમાઇઝ નેવિગેશન

નેવિગેશનને કેવી રીતે કસ્ટમાઇઝ કરવું તે સમજાવવા માટે ડેમો સાઇટને ઉદાહરણ તરીકે લઈએ 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);
    }
  }
)

હાલમાં x/i-h.js સંદર્ભ md/.i18n/htm/index.js માં છે, જે નેવિગેશન અને ફૂટર કસ્ટમાઇઝ્ડ કન્ટેન્ટ ટેક્સ્ટ માટે ઉપયોગમાં 18x/src/i-h.js વેબ ઘટક છે.