ניווט מותאם אישית

בואו ניקח את אתר ההדגמה 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] אל תכתוב css ו js ב pug , אחרת תהיה שגיאה.

רכיבי אינטרנט

לא ניתן לכתוב js ב pug אם נדרשת אינטראקציה, ניתן להשיג זאת על ידי יצירת רכיב אינטרנט.

רכיבים יכולים להגדיר רכיב של דף אינטרנט ב md/.i18n/htm/index.js ולאחר מכן להשתמש ברכיב ב foot.pug .

קל ליצור רכיבי אינטרנט, כגון <x-img> מותאמים אישית0 .

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