Xem Nội Dung Ngay

Cách làm mục lục tự động (table of content) cho bài viết Ghost

Hướng dẫn cách làm mục lục (table of content) tự động chi tiết cho các bài viết dài trong Ghost.

Cường Trần
Cường Trần
4 phút đọc
Cách làm mục lục tự động (table of content) cho bài viết Ghost

Đa số các bài viết dài trên 2.000 từ với nhiều đề mục nếu không có mục lục sẽ rất khó để người đọc có thưởng thức trọn vẹn nội dung.

Với các bài dài hơi thì người đọc sẽ có xu hướng chia nhỏ để đọc hơn là đọc một lần. Mà bài viết thì không có tính năng lưu bookmark các điểm dừng.

Khi đó mục lục luôn là giải pháp hoàn hảo nhất giúp người đọc vừa có thể bao quát toàn bộ nội dung, vừa là menu mini điều hướng nội dung và vừa là công cụ đảm bảo mạch đọc không bị đứt quãng.

Bạn có thể tạo mục lục tự động cho Ghost và tự chèn vào bài viết ở bất cứ nơi nào (kể cả sidebar) trong trang bạn muốn với hướng dẫn sau.

Cài đặt TOCBOT để tạo mục lục tự động

TOCBOT (Table of content bot) là một script ngoài giúp bạn tạo tự động mục lục dựa vào đề mục heading có trong bài viết.

Cách cài đặt như sau:

1 Thêm Style link vào vào Post Head.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.min.css" integrity="sha512-SFw7k74K3983tyOlJIHa8atr9Ppef3Kix5cmifwzU7ZdtU2E0FRuOVRtd3ENpMJ8sNCie5hlb/0j23efcdQJXA==" crossorigin="anonymous" />
Post Head
Post Head

2 Thêm code style tùy chỉnh vào bài viết ở vị trí bạn mong muốn.

<aside class="toc"></aside>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.min.js" integrity="sha512-8u1QblAcGUuhEv26YgTYO3+OtPL7l37qiYoPQtahVTaiLn/H3Z/K16TOXJ3U7PDYBiJWCWKM0a+ELUDGDgED2Q==" crossorigin="anonymous"></script>
<script>
    tocbot.init({
        tocSelector: '.toc',
        orderedList: true,
        linkClass: 'toc-link',
        headingSelector: 'h2, h3',
        contentSelector: '.c-content',
        headingsOffset: 40,
        scrollSmooth: true,
		scrollSmoothDuration: 420,
  		scrollSmoothOffset: -40,
        hasInnerContainers: true
    });
</script>

<style>
.toc:before {
  content: "Nội Dung:";
  display: block;
  margin-bottom: 20px;
  font-size: larger;
  font-weight: bold;
  border-bottom: 1px dashed #dadada;
  padding-bottom: 10px;
}
.toc {
  padding: 30px;
  border: 1px solid #dadada;
  border-radius: 5px;
  background-color: #fafafa;
}
a.toc-link {
  font-size: 80%;
  text-decoration: none;
}
.toc-list .is-collapsible {
  margin-left: 15px;
  color: #666;
}
</style>
Nên lưu lại thành Content Snipet TOC để dùng

Thành quả như bên dưới

Bạn nên chèn vào Post Head thay vì Ghost Head bởi vì bạn chỉ nên chèn mục lục vào các bài viết dài mà thôi. Các bài ngắn thì không nên (Như bạn thấy đấy, bài này là không nên 😅). Hãy cố gắng sao cho người đọc dễ nhìn và thuận tiện nhất có thể.

Bạn nhớ lưu vào Content Snipet với tên là Mục Lục hay TOC để tái sử dụng cho các bài viết trong tương lai.

Lưu ý khi chèn mục lục tự động bằng TOCBOT

Sau khi đã cài đặt xong TOCBOT bạn thêm block HTML sau vào bất kỳ bài viết nào bạn muốn.

Một lưu ý cực kỳ quan trọng đó là contentSelector: '.c-content' , mỗi theme sẽ không giống nhau và sẽ có class phần nội dung bài viết khác nhau.

Ví dụ như tất cả theme của Aspire Theme sẽ có class .c-content , trong khi Fueko themes sẽ có class là post-content , Casper theme cũng có class là post-content,...

Nếu bạn sai class thì mục lục sẽ không thể tạo tự động. Mỗi theme sẽ có Class Name tùy theo sở thích của nhà phát triển.

Để chuyển động cuộn trang mượt hơn bạn có thể thêm CSS sau vào Ghost Head <style> tag.

html {
  scroll-behavior: smooth;
}

Lời kết...

Bạn không nên chèn vào trực tiếp theme đang dùng mà chỉ chèn thủ công vào các bài viết dài như hướng dẫn để có kết quả tốt nhất về tốc độ site cũng như trải nghiệm người đọc.

Khi muốn thêm mục lục tự động vào bài viết, tóm gọn lại bạn sẽ làm như sau:

  1. Chèn TOCBOT vào post head.
  2. Chèn Content Snipet block đã lưu ở trên vào vị trí nào bạn muốn của bài viết.

Chúc bạn thành công!

Hướng Dẫn

Bạn có thể quan tâm

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Hướng dẫn tự tạo thông báo email thời gian thực khi có thành viên mới đăng ký bằng IFTTT miễn phí.

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Thủ thuật chuyển đổi "đồng loạt" mọi định dạng ảnh sang WebP

Hướng dẫn chuyển đổi "all-in-one" đồng loạt mọi định dạng ảnh cho bài viết sang webp với một lệnh đơn giản.

Thủ thuật chuyển đổi đồng loạt mọi định dạng ảnh sang WebP

Mẹo tạo popup thông báo đơn giản cho website Ghost

Hướng dẫn cách tạo Popup thông báo cho Ghost siêu nhanh và đơn giản.

Mẹo tạo popup thông báo đơn giản cho website Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.