Sau nhiều lần làm dự án thấy khách hàng cài mấy plugin tạo mục lục bài viết đồ, thấy khá nặng mình quyết định viết code tự động tạo mục lục bài viết luôn, vừa có thể hoàn toàn làm chủ được code, bảo mật cao, có thể dễ dàng nâng cấp thêm code sau này (Chứ cài plugin thì các bạn không thể can thiệp chỉnh sửa sâu được ở plugin của nhà phát triển, vì liên quan đến cập nhật sau này)
Ưu điểm của code tự động tạo mục lục bài viết
- Các bạn có thể chỉnh sửa tùy ý theo sở thích của các bạn
- Bảo mật cao vì không cần cài plugin của nhà phát triển khác vào website
- Tốc độ load sẽ nhanh hơn so với các plugin
Cách chèn code mục lục bài viết
- Bước 1: vào file quản trị web trên host hoặc vps rồi tìm đến wp-content/themes/flatsome/template-parts/posts/content-single.php
- Bước 2: copy toàn bộ thư mục template-parts/posts/content-single.php vào theme Flatsome child ( xem hình dưới )
- bước 3: vào mục template-parts ở Flatsome child theo đường dẫn template-parts/posts/content-single.php
- bước 4: mở file content-single.php để chèn code dưới đây vào
<!-- Đặ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'> 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ất cả code bạn đều có thể chỉnh sửa theo ý của mình từ html, css, java script
- Muốn sửa css thì nó nằm ở thẻ <style>
- Muốn sửa java script thì nó nằm ở thẻ <script>
Xem thêm:
