Last active
August 30, 2023 09:24
-
-
Save webantam43/dd8c7dfa69243036485037d9ad5f6a04 to your computer and use it in GitHub Desktop.
Chia sẻ code tự động tạo mục lục bài viết không cần plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết web an tam share --> | |
| <div class="table-of-content-webantam"> | |
| <span class='muc-luc'> Mục lục</span> | |
| <ol id="toc-list"> | |
| <!-- Mục lục tự động sẽ được tạo ở đây --> | |
| </ol> | |
| </div> | |
| <!-- Đặt nội dung bài viết vào phần tử có ID "article-content" --> | |
| <div id="article-content"> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const tocList = document.getElementById("toc-list"); | |
| const articleContent = document.getElementById("article-content"); | |
| const headings = articleContent.querySelectorAll("h2, h3, h4, h5, h6"); // Lấy các tiêu đề h2, h3, h4, h5, h6 trong nội dung bài viết | |
| let section = 0; | |
| let subsection = 0; | |
| let subsubsection = 0; | |
| let subsubsubsection = 0; | |
| let subsubsubsubsection = 0; | |
| headings.forEach((heading, index) => { | |
| const id = `section-${index + 1}`; | |
| heading.id = id; | |
| // Xác định cấp độ của tiêu đề (h2, h3, h4, h5, h6) | |
| const level = parseInt(heading.tagName.substring(1)); | |
| // Cập nhật số thứ tự của mục lục | |
| if (level === 2) { | |
| section++; | |
| subsection = 0; | |
| subsubsection = 0; | |
| subsubsubsection = 0; | |
| subsubsubsubsection = 0; | |
| } else if (level === 3) { | |
| subsection++; | |
| subsubsection = 0; | |
| subsubsubsection = 0; | |
| subsubsubsubsection = 0; | |
| } else if (level === 4) { | |
| subsubsection++; | |
| subsubsubsection = 0; | |
| subsubsubsubsection = 0; | |
| } else if (level === 5) { | |
| subsubsubsection++; | |
| subsubsubsubsection = 0; | |
| } else if (level === 6) { | |
| subsubsubsubsection++; | |
| } | |
| // Loại bỏ số thứ tự cho tiêu đề "Table of Contents" | |
| if (heading.textContent !== "Table of Contents") { | |
| const listItem = document.createElement("li"); | |
| const link = document.createElement("a"); | |
| link.href = `#${id}`; | |
| // Tạo nội dung cho mục lục | |
| let indent = ""; | |
| if (level === 2) { | |
| indent = `${section} `; | |
| } else if (level === 3) { | |
| indent = `${section}.${subsection} `; | |
| } else if (level === 4) { | |
| indent = `${section}.${subsection}.${subsubsection} `; | |
| } else if (level === 5) { | |
| indent = `${section}.${subsection}.${subsubsection}.${subsubsubsection} `; | |
| } else if (level === 6) { | |
| indent = `${section}.${subsection}.${subsubsection}.${subsubsubsection}.${subsubsubsubsection} `; | |
| } | |
| link.textContent = `${indent} ${heading.textContent}`; | |
| listItem.appendChild(link); | |
| tocList.appendChild(listItem); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| span.muc-luc { | |
| font-weight: 700; | |
| text-align: center; | |
| display: block; | |
| font-size: 22px; | |
| } | |
| /* Định dạng cho mục lục */ | |
| .table-of-content-webantam { | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| background-color: #f9f9f9; | |
| margin-bottom: 20px; | |
| border-radius: 5px; | |
| position: relative; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: inline-block; | |
| } | |
| /* Định dạng cho danh sách mục lục */ | |
| .table-of-content-webantam ol { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| /* Định dạng cho mỗi mục trong mục lục */ | |
| .table-of-content-webantam li { | |
| margin-bottom: 5px; | |
| } | |
| /* Định dạng cho liên kết mục lục */ | |
| .table-of-content-webantam a { | |
| text-decoration: none; | |
| color: #0070c9; | |
| } | |
| /* Định dạng cho liên kết mục lục khi di chuột qua */ | |
| .table-of-content-webantam a:hover { | |
| text-decoration: underline; | |
| color: #b40404; | |
| } | |
| /* Định dạng cho các tiêu đề h2, h3, h4, h5, h6 trong mục lục */ | |
| .table-of-content-webantam li a { | |
| display: block; | |
| } | |
| /* Định dạng thụt vào cho các tiêu đề h3 trong mục lục */ | |
| .table-of-content-webantam li li a { | |
| margin-left: 10px; | |
| } | |
| /* Định dạng thụt vào cho các tiêu đề h4 trong mục lục */ | |
| .table-of-content-webantam li li li a { | |
| margin-left: 20px; | |
| } | |
| /* Định dạng thụt vào cho các tiêu đề h5 trong mục lục */ | |
| .table-of-content-webantam li li li li a { | |
| margin-left: 30px; | |
| } | |
| /* Định dạng thụt vào cho các tiêu đề h6 trong mục lục */ | |
| .table-of-content-webantam li li li li li a { | |
| margin-left: 40px; | |
| } | |
| </style> | |
| <!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết end --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment