Navigation Personnalisée

Prenons le site de i18n-demo.github.io comme exemple pour expliquer comment personnaliser la navigation.

Les fichiers correspondant aux zones numérotées dans la figure ci-dessus sont les suivants :

1. Gauche .i18n/htm/t1.pug
2. Droite .i18n/htm/t2.pug

pug est un langage de modèle qui génère HTML .

➔ Cliquez ici pour apprendre la grammaire de pug

La chaîne de format ${I18N.sponsor} est utilisée dans le fichier pour implémenter l'internationalisation, et son contenu sera remplacé par le texte correspondant dans i18n.yml dans le répertoire de la langue source.

Le fichier correspondant au style de la barre de navigation est : .i18n/htm/topbar.css .

[!WARN] N'écrivez pas css et js dans pug , sinon il y aura une erreur.

Composants Web

js ne peut pas être écrit en pug Si une interaction est requise, elle peut être réalisée en créant un composant Web.

Les composants peuvent définir un composant de page Web en md/.i18n/htm/index.js puis utiliser le composant en foot.pug .

Il est facile de créer des composants Web, tels que <x-img> personnalisées0 .

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

Actuellement, x/i-h.js est référencé dans md/.i18n/htm/index.js , qui est un composant Web utilisé pour l'internationalisation du texte de navigation et du contenu personnalisé du pied de page. Voir le code source 18x/src/i-h.js