Cách Tạo Mục Lục Tự Động Cho Blogger Đẹp Và Dễ Sử Dụng

Cách tạo mục lục tự động cho Blogger đẹp và dễ sử dụng

Những bài hướng dẫn dài thường có nhiều phần như khái niệm, cách cài đặt, ví dụ, sửa lỗi và câu hỏi thường gặp. Nếu người đọc phải cuộn toàn bộ bài để tìm một phần cụ thể, trải nghiệm sẽ khá bất tiện.

Một giải pháp đơn giản là thêm mục lục tự động. Mục lục có thể đọc các tiêu đề H2, H3 trong bài viết, sau đó tạo danh sách liên kết để người đọc bấm và di chuyển nhanh đến đúng nội dung cần xem.

Trong bài viết này, MODSHARER sẽ hướng dẫn cách tạo mục lục tự động cho Blogger, cách sử dụng heading đúng và xử lý những lỗi thường gặp.

Nếu bạn chưa hoàn thành phần Search Console, có thể xem bài trước: Cách gửi Sitemap Blogger lên Google Search Console đúng cách .

{tocify} $title={Mục lục}

Mục lục bài viết là gì?

Mục lục, hay Table of Contents — TOC, là danh sách các phần chính xuất hiện trong một bài viết.

Ví dụ một bài hướng dẫn có cấu trúc:

1. Mục lục Blogger là gì?
2. Tại sao nên dùng mục lục?
3. Cách cài đặt
4. Cách sử dụng
5. Lỗi thường gặp
6. Kết luận

Khi bấm vào một mục, trình duyệt sẽ cuộn đến tiêu đề tương ứng trong bài viết.

Tại sao bài viết dài nên có mục lục?

Mục lục mang lại một số lợi ích thực tế.

Giúp người đọc hiểu cấu trúc bài viết

Ngay khi mở bài, người đọc có thể nhìn nhanh các phần nội dung chính mà không cần cuộn xuống toàn bộ trang.

Đi đến nội dung cần xem nhanh hơn

Ví dụ người đọc chỉ muốn xem phần:

Lỗi mục lục không hoạt động

thì họ có thể bấm trực tiếp vào mục đó.

Phù hợp với bài hướng dẫn kỹ thuật

Những bài về Blogger, code, widget hoặc sửa lỗi thường khá dài. Mục lục giúp nội dung dễ theo dõi hơn.

Heading H2 và H3 là gì?

Để tạo mục lục tự động, trước tiên cần hiểu cấu trúc heading.

Trong HTML, các tiêu đề thường có dạng:

<h2>Tiêu đề phần chính</h2>

<h3>Tiêu đề phần phụ</h3>

Trong một bài Blogger, cấu trúc cơ bản nên là:

Tiêu đề bài viết
  ↓
H2 — Phần chính 1
    H3 — Phần nhỏ 1.1
    H3 — Phần nhỏ 1.2

H2 — Phần chính 2
    H3 — Phần nhỏ 2.1

Không nên dùng heading chỉ để làm chữ to

Một lỗi khá phổ biến là dùng H2 hoặc H3 chỉ vì muốn đoạn chữ nhìn lớn hơn.

Heading nên phản ánh cấu trúc nội dung.

Ví dụ:

H2: Cách tạo mục lục Blogger

H3: Bước 1: Thêm HTML
H3: Bước 2: Thêm CSS
H3: Bước 3: Thêm JavaScript

Nếu chỉ muốn làm chữ lớn hoặc đậm, nên dùng CSS thay vì tạo heading không cần thiết.

Cách đơn giản nhất: dùng mục lục có sẵn trong theme

Một số theme Blogger đã tích hợp chức năng tạo mục lục tự động. Trong trường hợp đó, bạn không cần cài lại HTML, CSS và JavaScript.

Bạn chỉ cần sử dụng shortcode mà theme hỗ trợ.

Ví dụ theme MODSHARER hiện tại có thể sử dụng:

<b>{tocify} $title={Mục lục}</b>

Khi bài viết được hiển thị, theme sẽ xử lý shortcode và tạo mục lục dựa trên các heading trong bài.

Cách chèn mục lục vào bài viết MODSHARER

Trong trình chỉnh sửa bài viết, chuyển sang:

Chế độ xem HTML

Sau phần mở đầu của bài viết, chèn:

<b>{tocify} $title={Mục lục}</b>

Ví dụ cấu trúc bài:

<p>Phần giới thiệu bài viết...</p>

<b>{tocify} $title={Mục lục}</b>

<h2>Mục đầu tiên</h2>
<p>Nội dung...</p>

<h2>Mục thứ hai</h2>
<p>Nội dung...</p>

Có thể đổi chữ “Mục lục” không?

Nếu theme hỗ trợ tham số tiêu đề, bạn có thể thay:

$title={Mục lục}

thành:

$title={Nội dung bài viết}

hoặc:

$title={Xem nhanh}

Khả năng tùy chỉnh chính xác phụ thuộc vào code mục lục được theme sử dụng.

Mục lục tự động hoạt động như thế nào?

Về nguyên lý, JavaScript thường thực hiện các bước:

1. Tìm nội dung bài viết.
2. Lấy tất cả H2 và H3.
3. Tạo ID cho từng heading.
4. Tạo danh sách mục lục.
5. Gắn link tới từng ID.
6. Khi bấm, trình duyệt chuyển đến heading tương ứng.

Ví dụ một mục lục HTML đơn giản

Một mục lục thủ công có thể có dạng:

<div class="toc">
  <strong>Mục lục</strong>
  <ul>
    <li>
      <a href="#phan-1">Phần 1</a>
    </li>
  </ul>
</div>

Heading tương ứng:

<h2 id="phan-1">Phần 1</h2>

Mục lục tự động thực chất giúp tạo các phần này bằng JavaScript thay vì nhập thủ công.

Nếu theme không có mục lục thì sao?

Nếu theme không hỗ trợ sẵn, bạn có thể tạo một hệ thống TOC bằng:

• HTML để tạo khung.
• CSS để thiết kế giao diện.
• JavaScript để quét heading.

Một cấu trúc khung đơn giản có thể là:

<div id="toc-container">
  <div class="toc-title">Mục lục</div>
  <div id="toc-list"></div>
</div>

CSS mẫu cho khung mục lục

Ví dụ thiết kế đơn giản:

.toc-box{ margin:20px 0; padding:18px; border:1px solid #e5e7eb; border-radius:10px; background:#f8fafc; } .toc-box ul{ margin:10px 0 0; padding-left:20px; } .toc-box li{ margin:7px 0; } .toc-box a{ text-decoration:none; }

Bạn có thể thay đổi màu sắc và khoảng cách để phù hợp với theme đang dùng.

JavaScript có thể tự lấy heading như thế nào?

Về cơ bản, script sẽ tìm:

document.querySelectorAll('.post-body h2, .post-body h3')

Sau đó lặp qua từng heading để tạo mục lục.

Ví dụ logic đơn giản:

var headings = document.querySelectorAll( '.post-body h2, .post-body h3' ); headings.forEach(function(heading,index){ if(!heading.id){ heading.id = 'toc-' + index; } });

Tại sao heading cần ID?

Muốn liên kết đến một phần cụ thể trong cùng trang, trình duyệt cần một điểm đích.

Ví dụ:

<h2 id="cach-cai-dat">Cách cài đặt</h2>

Link mục lục sẽ là:

<a href="#cach-cai-dat">Cách cài đặt</a>

Khi bấm vào link này, trình duyệt sẽ cuộn tới heading có ID tương ứng.

Có nên tự tạo ID từ nội dung heading?

Có thể, nhưng cần xử lý cẩn thận với:

• Tiếng Việt có dấu.
• Khoảng trắng.
• Ký tự đặc biệt.
• Hai heading giống tên nhau.

Ví dụ hai heading đều có tên:

Cách cài đặt

nếu JavaScript tạo cùng một ID cho cả hai thì mục lục có thể trỏ sai.

Cách xử lý ID bị trùng

Một cách đơn giản là thêm số thứ tự:

toc-heading-1
toc-heading-2
toc-heading-3

Cách này không đẹp bằng slug từ tiêu đề nhưng rất an toàn và dễ xử lý.

Cách tạo hiệu ứng cuộn mượt

Bạn có thể thêm CSS:

html{ scroll-behavior:smooth; }

Khi người đọc bấm vào mục lục, trang sẽ cuộn mềm hơn thay vì nhảy ngay đến vị trí mới.

Lỗi heading bị che bởi menu cố định

Nếu website sử dụng header cố định ở đầu trang, khi bấm mục lục heading có thể bị thanh menu che mất.

Có thể xử lý bằng:

.post-body h2, .post-body h3{ scroll-margin-top:80px; }

Giá trị 80px nên điều chỉnh theo chiều cao header thực tế.

Mục lục nên lấy H2 hay cả H3?

Điều này phụ thuộc độ dài bài viết.

Bài ngắn

Chỉ lấy H2 thường đã đủ.

Bài hướng dẫn dài

Có thể sử dụng H2 và H3.

Ví dụ:

1. Cài đặt mục lục
  1.1. Thêm HTML
  1.2. Thêm CSS
  1.3. Thêm JavaScript

2. Tùy chỉnh mục lục
  2.1. Đổi màu
  2.2. Thay tiêu đề

Có nên đưa H4 vào mục lục không?

Thông thường không cần.

Nếu mục lục có quá nhiều cấp, người đọc có thể thấy nó dài và rối hơn chính bài viết.

Với blog hướng dẫn thông thường, cấu trúc:

H2 + H3

là đủ trong đa số trường hợp.

Có nên tự động đánh số mục lục?

Đánh số có thể giúp bài hướng dẫn dễ theo dõi.

Ví dụ:

1. Mục lục là gì?
2. Cách cài đặt
3. Cách tùy chỉnh
4. Lỗi thường gặp

Tuy nhiên, nếu chính heading trong bài đã bắt đầu bằng số, mục lục tự đánh số có thể tạo thành:

1. 1. Cách cài đặt

Vì vậy chỉ nên chọn một trong hai cách.

Có nên làm mục lục đóng/mở?

Có, đặc biệt trên điện thoại.

Một bài có 20 heading có thể khiến mục lục rất dài.

Nút:

Hiện / Ẩn mục lục

giúp người dùng thu gọn khi không cần.

Vị trí tốt nhất để đặt mục lục

Không nhất thiết phải đặt ngay dòng đầu tiên.

Cấu trúc hợp lý:

Tiêu đề bài viết
↓
Đoạn giới thiệu 1
↓
Đoạn giới thiệu 2
↓
MỤC LỤC
↓
Nội dung chính

Người đọc có thể hiểu sơ qua bài viết trước khi nhìn mục lục.

Những bài nào không cần mục lục?

Không nên ép mọi bài đều có mục lục.

Có thể bỏ TOC khi:

• Bài chỉ có vài đoạn ngắn.
• Bài chỉ có một hoặc hai heading.
• Trang liên hệ.
• Trang giới thiệu ngắn.
• Bài chỉ chứa một công cụ đơn giản.

Mục lục nên phục vụ người đọc chứ không phải thêm vào chỉ vì website khác cũng có.

Lỗi mục lục không hiển thị

Nếu đã thêm shortcode nhưng không có mục lục, hãy kiểm tra:

• Theme có hỗ trợ shortcode đó không?
• Bài có H2 hoặc H3 không?
• Shortcode có nhập đúng không?
• JavaScript xử lý TOC có bị lỗi không?
• Shortcode có đang nằm trong phần nội dung bài viết không?

Lỗi bấm mục lục nhưng không di chuyển

Nguyên nhân thường liên quan đến:

• Heading chưa có ID.
• Link TOC và ID không khớp.
• JavaScript chưa chạy.
• Có nhiều ID bị trùng.

Lỗi mục lục hiển thị nhưng toàn bộ nằm trên một dòng

Đây thường là lỗi CSS.

Kiểm tra thuộc tính của:

ul
li
display
margin
padding

Lỗi mục lục quá dài trên điện thoại

Có thể xử lý bằng:

• Chỉ lấy H2.
• Không lấy H4.
• Thêm chức năng thu gọn.
• Giảm padding.
• Giảm font-size.

Checklist mục lục Blogger

□ Bài viết có cấu trúc H2/H3 rõ ràng

□ Không dùng heading chỉ để làm chữ to

□ Shortcode TOC được đặt đúng vị trí

□ Mục lục hiển thị đúng tiêu đề

□ Link trong mục lục bấm được

□ Heading không bị trùng ID

□ Header cố định không che heading

□ Mục lục không quá dài

□ Đã kiểm tra trên điện thoại

□ Không tạo TOC cho bài quá ngắn

□ Đã kiểm tra lại sau khi chỉnh theme

Kết luận

Mục lục tự động là một chức năng đơn giản nhưng rất hữu ích đối với những bài hướng dẫn dài trên Blogger.

Nếu theme đã hỗ trợ TOC, bạn nên tận dụng tính năng sẵn có thay vì cài thêm một hệ thống JavaScript khác.

Với MODSHARER, shortcode:

<b>{tocify} $title={Mục lục}</b>

giúp việc thêm mục lục vào mỗi bài khá nhanh.

Sau khi hoàn thiện mục lục, chức năng tiếp theo đặc biệt hữu ích cho một blog chia sẻ code là khung code có nút Copy. Người đọc chỉ cần bấm một lần để sao chép HTML, CSS hoặc JavaScript thay vì phải kéo chọn thủ công.

← Bài trước:
Cách gửi Sitemap Blogger lên Google Search Console đúng cách

Bài tiếp theo →
Cách tạo khung code có nút Copy cho Blogger