Tạo Auto-generated Mục lục với HTML Slots


Mục lục hoàn toàn hoàn toàn có thể cải tổ đáng kể thưởng thức người dùng của nhiều trang web, ví dụ như những trang tài liệu hoặc những bách khoa toàn thư trực tuyến như Wikipedia.Mục lục được phong cách thiết kế tốt phân phối tổng quan về trang và giúp người dùng nhanh chóng điều hướng tới phần mà họ quan tâm.
Theo truyền thống, bạn có thể tạo bảng nội dung trong HTML hoặc JavaScript, tuy nhiên những HTML slot được chuẩn hóa gần đây cung ứng một khoảng giữa giữa hai thành phần. HTML Slot là một tiêu chuẩn web cho phép bạn thêm những trình giữ chỗ vào một trang web và sau đó điền nó với nội dung động.

Bạn có thể đặt những thẻ vào trong mục lục bên trong tệp tin HTML, do đó những slot có thể được điền vào những tiêu đề và phân nhóm có liên quan. Khi tiêu đề được thay đổi, slot được update tự động.
Với kỹ thuật này, bạn cần tạo mã nguồn HTML của mục lục theo cách thủ công. JavaScript chỉ tự động hóa hóa tạo ra nội dung văn bản của bảng mục lục, dựa trên tiêu đề hoặc phân nhóm trên trang.
Nếu bạn không muốn mục lục có mặt trong HTML, bạn cần phải tạo ra cả bố cục và nội dung bằng JavaScript.

Mã nguồn HTML của TOC (mục lục) sẽ nằm trong thẻ . Mã bên trong không được hiển thị cho đến khi nó được thêm vào tài liệu bằng JavaScript. TOC của tổng thể tất cả chúng ta sẽ có những trình giữ chỗ, được giữ trong những thẻ , cho toàn bộ những đề mục và phân nhóm được tìm thấy trong tài liệu.
Thuộc tính name của mỗi sẽ có cùng giá trị với thuộc tính slot trong những tiêu đề và phân nhóm tương ứng trong tài liệu.
Dưới đây, bạn có thể xem một mẫu HTML

với một số ít tiêu đề và phân nhóm.

ngay từ đầu là nơi chúng ta sẽ chèn TOC tự động.

Velociraptor (/vᵻˈlɒsᵻræptər/; meaning "swift seizer" in Latin) is a …

Bạn Đang Xem: Tạo Auto-generated Mục lục với HTML Slots

Description

Velociraptor was a mid-sized dromaeosaurid, with adults …

Feathers

Fossils of dromaeosaurids more primitive than …

History of discovery

During an American Museum of Natural History expedition …

Classification

Velociraptor is a member of the group Eudromaeosauria, a derived sub-group of …

Paleobiology

The "Fighting Dinosaurs" specimen, found in 1971, preserves a …

Scavenging behavior

Xem Thêm : 3 mẫu ô dù trang trí nhập khẩu cho quán café ngoài trời

In 2010, Hone and colleagues published a paper on …

Metabolism

Velociraptor was warm-blooded to some degree, as it required a …

Pathology

One Velociratoptor mongoliensis skull bears two parallel …

Như bạn thấy, mỗi tiêu đề được cho một giá trị slot duy nhất.

Và đây là mã HTML của TOC, bên trong thẻ .


ul { list-style: none; } /* … */

Trong hai đoạn mã ở trên, hãy quan tâm đến những thuộc tính slotname trong những tiêu đề và thẻ slot

2. Number the headings

Trước khi tìm kiếm mã JavaScript để thêm TOC từ vào tài liệu, hãy thêm số serial cho những tiêu đề, sử dụng các bộ đếm CSS.

templateContent = document.querySelector('template').content;
article = document.querySelector('article').cloneNode(true);
article.attachShadow({  mode: 'closed' }).appendChild(templateContent.cloneNode(true));
document.querySelector('#toc').appendChild(article);

Xem Thêm : Bình chữa cháy xe đẩy ABC 35KG

Đoạn mã trên tạo ra một bản sao của

và gắn một DOM Tree vào nó. Chúng ta cũng thêm một bản sao của nội dung vào cây DOM Shadow này.
Sau đó,

nhân bản được chèn vào thành phần

. Phần tử

cũng hiện diện trong TOC, tuy nhiên chỉ có các tiêu đề và phân nhóm của nó mới có thể thấy được vị trí bên trong TOC.
Nếu chúng ta đặt lại bộ đếm CSS ở phần thân hoặc phần tử html thay vì bài viết, bộ đếm sẽ đếm list các tiêu đề bên trong TOC.

4. Thêm các siêu liên kết

Nếu bạn muốn link các tiêu đề TOC với các tiêu đề và phân nhóm tương ứng bằng cách thêm id vào các tiêu đề và anchoring văn bản TOC tương ứng, bạn sẽ phải loại bỏ các giá trị id lặp lại khỏi bài viết nhân bản.

Velociraptor (/vᵻˈlɒsᵻræptər/; meaning "swift seizer" in Latin) is a …

Bạn Đang Xem: Tạo Auto-generated Mục lục với HTML Slots

Description

Velociraptor was a mid-sized dromaeosaurid, with adults …

Feathers

Fossils of dromaeosaurids more primitive than …

Như bạn thấy ở trên, thuộc tính id được thêm vào mỗi tiêu đề và phân mục trong bài viết.

Và, các tiêu đề bên trong bảng nội dung được neo:


In the extra line above, al

Trong dòng thêm ở trên, tất cả các thuộc tính id được xóa khỏi bài viết nhân bản trước khi gắn DOM Shadow vào nó.

templateContent = document.querySelector('template').content;
article = document.querySelector('article').cloneNode(true);
article.querySelectorAll('*[id]').forEach((ele)=>{ele.removeAttribute('id')})
article.attachShadow({  mode: 'closed' }).appendChild(templateContent.cloneNode(true));
document.querySelector('#toc').appendChild(article);

Nguồn: https://dontu.net
Danh mục: noindex

Related Posts