webantam43 · August 30, 2023 09:24 · Aug 30, 2023 · Aug 8, 2023 · Aug 8, 2023
diff --git a/code tự động tạo mục lục bài viết không cần plugin b/code tự động tạo mục lục bài viết không cần plugin
@@ -1,4 +1,4 @@
-<!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết -->
+<!-- Đặ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">
@@ -79,11 +79,9 @@
   });
 </script>
 
-
-
 <style>
 
-	span.muc-luc {
+    span.muc-luc {
     font-weight: 700;
     text-align: center;
     display: block;

diff --git a/code tự động tạo mục lục bài viết không cần plugin b/code tự động tạo mục lục bài viết không cần plugin
@@ -1,6 +1,6 @@
 <!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết -->
 <div class="table-of-content-webantam">
-  <span class='muc-luc'> <i class="fa-solid fa-list"></i> Mục lục</span>
+  <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>

diff --git a/code tự động tạo mục lục bài viết không cần plugin b/code tự động tạo mục lục bài viết không cần plugin
@@ -0,0 +1,158 @@
+<!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết -->
+<div class="table-of-content-webantam">
+  <span class='muc-luc'> <i class="fa-solid fa-list"></i> 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 -->
No results found