การนำทางที่กำหนดเอง

มาดูไซต์สาธิต 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