Mukautettu Navigointi

Otetaan i18n-demo.github.io esimerkkinä navigoinnin mukauttamisesta.

Yllä olevan kuvan numeroituja alueita vastaavat tiedostot ovat seuraavat:

1. Vasen .i18n/htm/t1.pug
2. Oikea .i18n/htm/t2.pug

pug on mallikieli, joka luo HTML :n.

➔ Napsauta tästä oppiaksesi kieliopin pug

Tiedostossa käytetään muotomerkkijonoa ${I18N.sponsor} kansainvälistymisen toteuttamiseen, ja sen sisältö korvataan vastaavalla tekstillä i18n.yml hakemistossa.

Navigointipalkin tyyliä vastaava tiedosto on : .i18n/htm/topbar.css

[!WARN] Älä kirjoita css ja js pug :aan , muuten tapahtuu virhe.

Web-Komponentit

js ei voi kirjoittaa pug Jos vuorovaikutusta tarvitaan, se voidaan tehdä luomalla verkkokomponentti.

Komponentit voivat määrittää verkkosivun komponentin arvolla md/.i18n/htm/index.js ja sitten käyttää komponenttia kohdassa foot.pug .

Verkkokomponenttien, kuten mukautettujen <x-img> , luominen on helppoa.

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

Tällä hetkellä x/i-h.js viitataan kohdassa md/.i18n/htm/index.js , joka on verkkokomponentti, jota käytetään navigoinnin ja alatunnisteen mukautetun sisällön tekstin kansainvälistämiseen. Katso lähdekoodi 18x/src/i-h.js