Điều Hướng Tùy Chỉnh

Hãy lấy trang web i18n-demo.github.io làm ví dụ để giải thích cách tùy chỉnh điều hướng.

Các file tương ứng với các vùng được đánh số trong hình trên như sau:

1. Còn lại .i18n/htm/t1.pug
2. Đúng .i18n/htm/t2.pug

pug là ngôn ngữ mẫu tạo ra HTML 's.

➔ Bấm vào đây để học ngữ pháp pug

Chuỗi định dạng ${I18N.sponsor} được sử dụng trong tệp để triển khai quốc tế hóa và nội dung của nó sẽ được thay thế bằng văn bản tương ứng trong i18n.yml trong thư mục ngôn ngữ nguồn.

Tệp tương ứng với kiểu của thanh điều hướng .i18n/htm/topbar.css :

[!WARN] Đừng viết css và js vào pug , nếu không sẽ xảy ra lỗi.

Thành Phần Web

js không thể được viết bằng pug Nếu cần có sự tương tác, bạn có thể đạt được điều đó bằng cách tạo một thành phần web.

Các thành phần có thể xác định thành phần trang web trong md/.i18n/htm/index.js và sau đó sử dụng thành phần đó trong foot.pug .

Thật dễ dàng để tạo các thành phần web, chẳng hạn như <x-img> tùy chỉnh0.

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

Hiện tại, x/i-h.js được tham chiếu trong md/.i18n/htm/index.js , là một thành phần web được sử dụng để quốc tế hóa văn bản nội dung tùy chỉnh ở chân trang và điều hướng. Xem mã nguồn 18x/src/i-h.js