Cách tự động tạo mục lục với các khe cắm HTML
Mục lục Chẳng hạn, có thể cải thiện trải nghiệm người dùng của nhiều trang web trang web tài liệu hoặc là bách khoa toàn thư trực tuyến như Wikipedia. Một bảng mục lục được thiết kế tốt đưa ra một cái nhìn tổng quan về trang và giúp người dùng nhanh chóng điều hướng đến phần họ quan tâm.
Theo truyền thống, bạn có thể tạo mục lục bằng HTML hoặc bằng JavaScript, nhưng các vị trí HTML được chuẩn hóa gần đây cung cấp một đường giữa giữa hai. Khe cắm HTML là một tiêu chuẩn web cho phép bạn thêm giữ chỗ vào một trang web và sau đó điền nó với nội dung một cách linh hoạt.
Khi nào nên sử dụng
Bạn có thể đặt
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 tạo nội dung văn bản của mục lục, dựa trên các tiêu đề hoặc các tiêu đề phụ trên trang.
Nếu bạn không muốn mục lục được trình bày trong HTML, bạn cần phải tạo cả bố cục và nội dung bằng JavaScript.
1. Tạo HTML
Mã nguồn HTML cho TOC (mục lục) sẽ là bên trong nhãn. Mã bên trong không được kết xuất cho đến khi được JavaScript thêm vào tài liệu. TOC của chúng tôi sẽ có giữ chỗ, tổ chức tại
Các Tên thuộc tính của mỗi khe thuộc tính trong các tiêu đề và tiêu đề tương ứng của chúng trong tài liệu.
Dưới đây, bạn có thể thấy một mẫu HTML Velociraptor (có nghĩa là "máy thu thập nhanh" trong tiếng Latin) là một loại Velociraptor là một dromaeizardid cỡ trung bình, với người lớn Hóa thạch của dromaeizardids nguyên thủy hơn so với giáo dục Trong một chuyến thám hiểm Bảo tàng Lịch sử Tự nhiên Hoa Kỳ Velociraptor là thành viên của nhóm Eudromaeizardia, một nhóm phụ có nguồn gốc của Lát Mẫu vật "Khủng long chiến đấu", được tìm thấy vào năm 1971, bảo tồn một con tàu Năm 2010, Hone và các đồng nghiệp đã xuất bản một bài báo về Velociraptor máu nóng ở một mức độ nào đó, vì nó đòi hỏi một LỚN Một hộp sọ Velociratoptor mongoliensis mang hai song song Như bạn có thể thấy, mỗi tiêu đề là đưa ra một cách độc đáo Và, đây là Mã HTML của TOC, bên trong Trong hai đoạn mã ở trên, hãy chú ý phù hợp Trước khi xem xét mã JavaScript sẽ thêm TOC từ Đảm bảo rằng Bây giờ, chúng tôi thêm đoạn script chèn TOC ở trên Đoạn mã trên tạo một bản sao của Sau đó, nhân bản Nếu chúng ta sẽ thiết lập lại bộ đếm CSS tại Dưới đây là ảnh chụp màn hình của đầu ra: Nếu bạn muốn liên kết các tiêu đề TOC với các tiêu đề và phân nhóm tương ứng của chúng bằng cách thêm Velociraptor (có nghĩa là "máy thu thập nhanh" trong tiếng Latin) là một loại Velociraptor là một dromaeizardid cỡ trung bình, với người lớn Hóa thạch của dromaeizardids nguyên thủy hơn so với giáo dục Như bạn có thể thấy ở trên, Và tiêu đề bên trong mục lục được neo: Trong dòng phụ ở trên, tất cả Xem ảnh chụp màn hình của mục lục liên kết phía dưới: Bạn có thể kiểm tra, tải xuống hoặc fork mã được sử dụng trong bài đăng này từ Github Repo của chúng tôi. với một số tiêu đề và phân nhóm. Các
Sự miêu tả
Lông vũ
Lịch sử khám phá
Phân loại
Cổ sinh vật học
Hành vi nhặt rác
Sự trao đổi chất
Bệnh lý
khe giá trị. nhãn.
khe và Tên thuộc tính bên trong các tiêu đề và 2. Đánh số đề mục
vào tài liệu, hãy thêm số sê-ri cho các tiêu đề, sử dụng bộ đếm CSS. bài viết counter-reset: đề mục; bài viết h2 :: before counter-tăng: title; nội dung: '0'count (tiêu đề)': ';
Thiết lập lại bộ đếm quy tắc thuộc về yếu tố đó là cha mẹ ngay lập tức của tất cả các chức danh mang khe thuộc tính (đó là yếu tố trong mã của chúng tôi).3. Chèn TOC vào tài liệu
nhãn, bên trong thùng đựng hàng. templateContent = document.querySelector ('template'). nội dung; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'shut'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (bài viết); và đính kèm Shadow DOM Tree vào nó. Chúng tôi cũng thêm một bản sao của nội dung của đến cây Shadow DOM này. được chèn vào yếu tố là bây giờ cũng có mặt trong TOC, tuy nhiên, chỉ có các tiêu đề và tiêu đề phụ tìm thấy một trình giữ chỗ bên trong TOC. thân hình hoặc là html yếu tố thay vì bài báo, quầy cũng sẽ đếm danh sách các tiêu đề bên trong TOC. Đó là lý do tại sao bạn nên đặt lại các quầy tại cha mẹ ngay lập tức của các tiêu đề.
4. Thêm siêu liên kết
ID đến các tiêu đề và neo văn bản TOC tương ứng của chúng, bạn sẽ phải loại bỏ sự lặp đi lặp lại ID các giá trị từ nhân bản bài báo.
Sự miêu tả
Lông vũ
ID thuộc tính là được thêm vào mỗi tiêu đề và phân nhóm trong bài viết.
ID thuộc tính là xóa khỏi bài viết nhân bản trước gắn cây Shadow DOM vào nó. templateContent = document.querySelector ('template'). nội dung; article = document.querySelector ('article'). cloneNode (true); article.querySelector ALL ('* [id]'). forEach ((ele) => ele.removeAttribution ('id')) article.attachShadow (mode: 'shut'). appendChild (templateContent.cloneNode )); document.querySelector ('# toc'). appendChild (bài viết); 
Bản demo của Github
