1. Mục lục (TOC) là gì?
Mục lục (TOC) là danh sách các tiêu đề (heading) của bài viết, thường bao gồm các thẻ tiêu đề từ H2, H3, H4. Nó cho phép người đọc nhanh chóng chuyển đến các phần khác nhau trong bài viết mà không cần phải cuộn qua toàn bộ nội dung.2. Lợi ích của việc tạo mục lục (TOC)
Việc thêm mục lục vào bài viết trên diễn đàn phpBB không chỉ mang lại nhiều lợi ích cho người đọc mà còn có tác động tích cực đến SEO. Dưới đây là một số lợi ích chi tiết:- Cải thiện trải nghiệm người dùng: Mục lục giúp người đọc dễ dàng tìm kiếm thông tin quan trọng mà họ quan tâm trong một bài viết dài. Đối với những bài viết có nhiều nội dung hoặc chủ đề khác nhau, mục lục cho phép người đọc di chuyển trực tiếp đến các phần mà không cần phải cuộn qua toàn bộ nội dung. Điều này không chỉ tiết kiệm thời gian mà còn giúp người đọc cảm thấy thoải mái hơn khi truy cập vào bài viết.
- Tối ưu hóa SEO: Mục lục đóng vai trò quan trọng trong việc cải thiện SEO của trang web. Khi bạn sử dụng mục lục, các công cụ tìm kiếm như Google sẽ có khả năng hiểu rõ hơn về cấu trúc nội dung của bài viết. Điều này giúp tăng khả năng bài viết được xếp hạng cao hơn trên kết quả tìm kiếm. Ngoài ra, các tiêu đề trong mục lục còn có thể được hiển thị trực tiếp trên kết quả tìm kiếm dưới dạng rich snippets, giúp thu hút người dùng nhấp vào bài viết.
- Tăng tính tương tác
Một bài viết có cấu trúc rõ ràng, bao gồm mục lục sẽ khuyến khích người đọc ở lại trang lâu hơn và khám phá thêm các phần khác của bài viết. Mục lục không chỉ giúp tổ chức nội dung một cách logic mà còn tạo cảm giác chuyên nghiệp và dễ tiếp cận. Điều này giúp tăng cường khả năng người dùng quay lại trang web trong tương lai.
- Phù hợp với bài viết dài: Đối với các bài viết có nhiều nội dung hoặc chủ đề phức tạp, việc sử dụng mục lục là vô cùng quan trọng. Người đọc sẽ không bị choáng ngợp với lượng thông tin lớn mà có thể dễ dàng điều hướng qua các phần của bài viết. Điều này giúp giữ chân người đọc, giảm tỷ lệ thoát trang và tăng thời gian ở lại trang.
3. Cách tạo mục lục (TOC) trong phpBB
Để tạo mục lục tự động cho bài viết trong diễn đàn phpBB, bạn cần thực hiện theo các bước sau:Bước 1: Thêm mã JavaScript để tạo mục lục
- Tìm tệp tin overall_footer.html:+ Truy cập vào thư mục template của phpBB.
+ Tìm tệp tin overall_footer.html nằm trong đường dẫn /styles/your_theme/template/ (thay your_theme bằng tên giao diện bạn đang sử dụng).
- Thêm đoạn mã JavaScript vào tệp tin overall_footer.html: Thêm đoạn mã dưới đây ngay trước thẻ </body> để chèn JavaScript tự động tạo TOC:
Mã: Chọn tất cả
<script>
document.addEventListener("DOMContentLoaded", function() {
// Tìm thẻ <div class="content"></div> chứa nội dung bài viết
var postContainer = document.querySelector('.content');
if (!postContainer) {
return; // Nếu không có phần tử .content, dừng lại
}
// Lấy tất cả các tiêu đề có class heading_h2, heading_h3, heading_h4 trong phần tử content
var headers = postContainer.querySelectorAll('.heading_h2, .heading_h3, .heading_h4');
// Kiểm tra nếu không có thẻ H2 nào, thì không hiển thị mục lục
var firstH2 = postContainer.querySelector('.heading_h2');
if (!firstH2 || headers.length === 0) {
return; // Nếu không có heading_h2 hoặc không có tiêu đề nào, không tạo mục lục
}
// Tạo phần tử chứa mục lục (TOC)
var toc = document.createElement('div');
toc.id = "toc";
// Thêm tiêu đề cho mục lục bằng thẻ span
var tocTitle = document.createElement('span');
tocTitle.textContent = "Mục lục";
toc.appendChild(tocTitle);
// Tạo danh sách các liên kết mục lục
var tocList = document.createElement('ul');
toc.appendChild(tocList);
// Duyệt qua các tiêu đề và tạo liên kết cho mục lục
headers.forEach(function(header, index) {
var tocItem = document.createElement('li');
var tocLink = document.createElement('a');
// Tạo ID cho tiêu đề nếu chưa có
if (!header.id) {
header.id = 'header-' + index;
}
tocLink.href = '#' + header.id;
tocLink.textContent = header.textContent;
// Điều chỉnh cấp độ của mục lục dựa vào cấp độ tiêu đề
if (header.classList.contains('heading_h2')) {
tocItem.style.marginLeft = '0px'; // Cấp tiêu đề H2
} else if (header.classList.contains('heading_h3')) {
tocItem.style.marginLeft = '20px'; // Cấp tiêu đề H3
} else if (header.classList.contains('heading_h4')) {
tocItem.style.marginLeft = '40px'; // Cấp tiêu đề H4
}
// Thêm liên kết vào mục lục
tocItem.appendChild(tocLink);
tocList.appendChild(tocItem);
});
// Chèn mục lục vào trước thẻ H2 đầu tiên
postContainer.insertBefore(toc, firstH2);
});
</script>
- document.addEventListener("DOMContentLoaded"): Đảm bảo rằng mã JavaScript chỉ chạy sau khi nội dung trang đã được tải đầy đủ.
- postContainer.querySelector('.content'): Tìm thẻ div với class là .content nơi chứa nội dung của bài viết.
- headers = postContainer.querySelectorAll('.heading_h2, .heading_h3, .heading_h4'): Lấy tất cả các tiêu đề có class .heading_h2, .heading_h3, và .heading_h4 để tạo mục lục.
- if (!firstH2 || headers.length === 0): Kiểm tra xem có tiêu đề H2 nào hay không. Nếu không có, mục lục sẽ không được tạo.
- tocTitle.textContent = "Mục lục": Tạo phần tiêu đề cho mục lục bằng thẻ span.
- forEach: Duyệt qua các tiêu đề để tạo liên kết tương ứng trong mục lục.
- tocItem.style.marginLeft: Điều chỉnh lề của mục lục tùy thuộc vào cấp độ của tiêu đề (H2, H3, H4).
- postContainer.insertBefore(toc, firstH2): Chèn mục lục vào trước tiêu đề H2 đầu tiên trong bài viết.
Bước 2: Thêm CSS để làm đẹp mục lục
Sau khi đã thêm JavaScript để tạo mục lục, bạn có thể thêm CSS để làm đẹp mục lục. Chỉnh sửa tệp overall_header.html hoặc thêm vào tệp CSS của giao diện như sau:Mã: Chọn tất cả
/* TOC
----------------------------------------*/
#toc {
background-color: rgba(255,255,255,.5);
border: 1px solid #ccc;
padding: 10px 10px 10px 20px;
margin-bottom: 20px;
font-size: 16px;
position: relative;
}
#toc span {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}
#toc ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
#toc li {
margin-bottom: 0;
}
#toc a {
text-decoration: none;
color: #0076b1;
}
#toc a:hover {
text-decoration: underline;
}
Đây chỉ là CSS mẫu, bạn có thể điều chỉnh CSS để phù hợp hơn với giao diện của diễn đàn.
Bước 3: Xóa bộ nhớ đệm (cache)
Sau khi chỉnh sửa xong, bạn cần xóa bộ nhớ đệm của phpBB để cập nhật các thay đổi:- Truy cập vào ACP (Admin Control Panel).
- Vào phần General > Purge the cache.
- Nhấp vào Purge cache để xóa bộ nhớ đệm.
Bước 4: Kiểm tra kết quả
Giờ bạn có thể kiểm tra lại một bài viết trên diễn đàn. Khi bài viết có các thẻ tiêu đề H2, H3, H4, hệ thống sẽ tự động tạo ra một mục lục (TOC) ở đầu bài viết với các liên kết đến từng phần tiêu đề.Lưu ý:
- Nếu có nhiều bài viết cần mục lục, bạn có thể áp dụng cách này cho tất cả các bài viết mà không cần phải làm thủ công.
- Các thẻ tiêu đề được đánh số rõ ràng từ H2 đến H4 theo đúng thứ tự.
- Mở đầu bài viết nên có phần giới thiệu ngắn gọn trước khi vào nội dung chi tiết.
Nếu bạn cần điều chỉnh hoặc thêm nội dung gì khác, hãy phản hồi ở dưới bài viết này nhé!
4. Cách ẩn/hiện mục lục với nút bấm
Để thêm tính năng ẩn/hiện mục lục, bạn có thể thêm một nút toggle để người dùng có thể tùy chọn xem hoặc ẩn mục lục. Đoạn mã JavaScript bên dưới sẽ giúp bạn thêm nút [ẩn/hiện]:Mã: Chọn tất cả
<script>
document.addEventListener("DOMContentLoaded", function() {
// Tìm phần tử TOC (Mục lục) đã được tạo
var toc = document.getElementById('toc');
// Tạo nút ẩn/hiện mục lục
var toggleButton = document.createElement('button');
toggleButton.textContent = "[ẩn]";
// Thêm sự kiện khi người dùng nhấn vào nút ẩn/hiện
toggleButton.addEventListener('click', function() {
var tocList = toc.querySelector('ul');
// Kiểm tra trạng thái hiển thị của mục lục và thay đổi trạng thái
if (tocList.style.display === "none") {
tocList.style.display = "block"; // Hiển thị lại mục lục
toggleButton.textContent = "[ẩn]"; // Đổi nhãn nút thành [ẩn]
} else {
tocList.style.display = "none"; // Ẩn mục lục
toggleButton.textContent = "[hiện]"; // Đổi nhãn nút thành [hiện]
}
});
// Chèn nút ẩn/hiện vào mục lục (TOC)
toc.insertBefore(toggleButton, toc.firstChild);
});
</script>
- var toc = document.getElementById('toc'): Lấy phần tử TOC đã được tạo trước đó.
- toggleButton.textContent = "[ẩn]": Tạo nút ẩn/hiện với nhãn mặc định là "[ẩn]".
- toggleButton.addEventListener('click', function() {...}): Thêm sự kiện cho nút, để khi người dùng nhấn vào, mục lục sẽ ẩn hoặc hiển thị.
- if (tocList.style.display === "none"): Kiểm tra xem mục lục đang bị ẩn hay hiển thị, sau đó thay đổi trạng thái và cập nhật nhãn nút tương ứng.
- toc.insertBefore(toggleButton, toc.firstChild): Chèn nút ẩn/hiện vào đầu mục lục để người dùng dễ dàng sử dụng.
Bạn có thể kết hợp hai mã JavaScript này làm một như sau:
Mã: Chọn tất cả
<script>
document.addEventListener("DOMContentLoaded", function() {
// Tìm thẻ <div class="content"></div>
var postContainer = document.querySelector('.content');
if (!postContainer) {
return; // Nếu không có content, dừng lại
}
// Lấy tất cả các tiêu đề có class heading_h2, heading_h3, heading_h4 trong content
var headers = postContainer.querySelectorAll('.heading_h2, .heading_h3, .heading_h4');
// Kiểm tra nếu không có thẻ H2 nào
var firstH2 = postContainer.querySelector('.heading_h2');
if (!firstH2 || headers.length === 0) {
return; // Nếu không có heading_h2 hoặc không có tiêu đề nào, không hiển thị TOC
}
// Tạo phần chứa TOC
var toc = document.createElement('div');
toc.id = "toc";
// Thay thế h2 bằng span cho mục lục
var tocTitle = document.createElement('span');
tocTitle.textContent = "Mục lục";
toc.appendChild(tocTitle);
var tocList = document.createElement('ul');
toc.appendChild(tocList);
headers.forEach(function(header, index) {
var tocItem = document.createElement('li');
var tocLink = document.createElement('a');
// Đặt ID cho các tiêu đề nếu chưa có
if (!header.id) {
header.id = 'header-' + index;
}
tocLink.href = '#' + header.id;
tocLink.textContent = header.textContent;
// Phân cấp mục lục dựa trên cấp độ tiêu đề (heading_h2, heading_h3, heading_h4)
if (header.classList.contains('heading_h2')) {
tocItem.style.marginLeft = '0px';
} else if (header.classList.contains('heading_h3')) {
tocItem.style.marginLeft = '20px';
} else if (header.classList.contains('heading_h4')) {
tocItem.style.marginLeft = '40px';
}
tocItem.appendChild(tocLink);
tocList.appendChild(tocItem);
});
// Tạo nút ẩn/hiện TOC
var toggleButton = document.createElement('button');
toggleButton.textContent = "[ẩn]";
toggleButton.style.cssFloat = "right";
toggleButton.style.marginBottom = "10px";
// Gán sự kiện ẩn/hiện cho nút
toggleButton.addEventListener('click', function() {
if (tocList.style.display === "none") {
tocList.style.display = "block";
toggleButton.textContent = "[ẩn]";
} else {
tocList.style.display = "none";
toggleButton.textContent = "[hiện]";
}
});
// Chèn nút và TOC vào trước thẻ heading_h2 đầu tiên
toc.insertBefore(toggleButton, toc.firstChild);
postContainer.insertBefore(toc, firstH2);
});
</script>
5. Cách thêm tính năng cuộn mượt scrollIntoView
Để thêm tính năng cuộn mượt mà khi người dùng nhấn vào mục lục (TOC), bạn có thể thêm đoạn mã JavaScript sử dụng tính năng scrollIntoView với tùy chọn smooth. Dưới đây là mã JavaScript đã được cập nhật để bao gồm cả tính năng cuộn mượt mà và nút ẩn/hiện mục lục (TOC)Mã: Chọn tất cả
<script>
document.addEventListener("DOMContentLoaded", function() {
// Tìm thẻ <div class="content"></div> chứa nội dung bài viết
var postContainer = document.querySelector('.content');
if (!postContainer) {
return; // Nếu không có phần tử .content, dừng lại
}
// Lấy tất cả các tiêu đề có class heading_h2, heading_h3, heading_h4 trong phần tử content
var headers = postContainer.querySelectorAll('.heading_h2, .heading_h3, .heading_h4');
// Kiểm tra nếu không có thẻ H2 nào, thì không hiển thị mục lục
var firstH2 = postContainer.querySelector('.heading_h2');
if (!firstH2 || headers.length === 0) {
return; // Nếu không có heading_h2 hoặc không có tiêu đề nào, không tạo mục lục
}
// Tạo phần tử chứa mục lục (TOC)
var toc = document.createElement('div');
toc.id = "toc";
// Thêm tiêu đề cho mục lục bằng thẻ span
var tocTitle = document.createElement('span');
tocTitle.textContent = "Mục lục";
toc.appendChild(tocTitle);
// Tạo danh sách các liên kết mục lục
var tocList = document.createElement('ul');
toc.appendChild(tocList);
// Duyệt qua các tiêu đề và tạo liên kết cho mục lục
headers.forEach(function(header, index) {
var tocItem = document.createElement('li');
var tocLink = document.createElement('a');
// Tạo ID cho tiêu đề nếu chưa có
if (!header.id) {
header.id = 'header-' + index;
}
tocLink.href = '#' + header.id;
tocLink.textContent = header.textContent;
// Thêm sự kiện click cho mỗi liên kết để kích hoạt cuộn mượt mà
tocLink.addEventListener('click', function(event) {
event.preventDefault(); // Ngăn trình duyệt chuyển trực tiếp
document.getElementById(header.id).scrollIntoView({
behavior: 'smooth', // Cuộn mượt mà
block: 'start' // Cuộn đến đầu tiêu đề
});
});
// Điều chỉnh cấp độ của mục lục dựa vào cấp độ tiêu đề
if (header.classList.contains('heading_h2')) {
tocItem.style.marginLeft = '0px'; // Cấp tiêu đề H2
} else if (header.classList.contains('heading_h3')) {
tocItem.style.marginLeft = '20px'; // Cấp tiêu đề H3
} else if (header.classList.contains('heading_h4')) {
tocItem.style.marginLeft = '40px'; // Cấp tiêu đề H4
}
// Thêm liên kết vào mục lục
tocItem.appendChild(tocLink);
tocList.appendChild(tocItem);
});
// Tạo nút ẩn/hiện TOC
var toggleButton = document.createElement('button');
toggleButton.textContent = "[ẩn]";
toggleButton.style.cssFloat = "right";
toggleButton.style.marginBottom = "10px";
// Gán sự kiện ẩn/hiện cho nút
toggleButton.addEventListener('click', function() {
if (tocList.style.display === "none") {
tocList.style.display = "block";
toggleButton.textContent = "[ẩn]";
} else {
tocList.style.display = "none";
toggleButton.textContent = "[hiện]";
}
});
// Chèn nút và TOC vào trước thẻ heading_h2 đầu tiên
toc.insertBefore(toggleButton, toc.firstChild);
postContainer.insertBefore(toc, firstH2);
});
</script>