Cách tạo mục lục cho bài viết trên website

Cách tạo mục lục cho bài viết trên website

Tình huống sử dụng

Mục lục trong bài viết sẽ giúp người đọc dễ dàng di chuyển đến phần họ muốn mà không cần phải kéo chuột quá lâu. Đồng thời, nó như một bảng sắp xếp nội dung của bạn được ngăn nắp và dễ hiểu hơn. Chẳng hạn, với một bài viết có nội dung khá dài nếu không có mục lục rất khó để giữ chân khách hàng lâu hơn. Vì nó được phân chia thành khá nhiều mục nên khi đọc đến một số mục con khách hàng sẽ không nắm được nó thuộc phần nào. Để biết được bắt buộc họ phải kéo ngược lên trên xác định. Tuy nhiên, khi có mục lục sẽ khác, người đọc sẽ có được một cái nhìn tổng quan về nội dung bài viết trước khi tìm hiểu về nó. Vì vậy, việc xác định được nội dung bài viết sẽ dễ dàng hơn nhiểu.

Trên Nhanh.vn mục lục bài viết được sử dụng khi tạo bài viết tin tức, xem thêm hướng dẫn về tạo tin tức cho website tại đây

Tại giao diện chỉnh sửa bài viết tin tức để mục lục bài viết doanh nghiệp thao tác như sau:

Bước 1: Tạo mục lục, nhập các đề mục chính trong bài viết

Mỗi đề mục để một dòng

Sau chữ "Các nội dung chính" thì viết thêm chữ "[hide]"

Chọn biểu tượng "Nguồn" và copy đoạn code sau, trong đó thay các đề mục tương ứng trong các đoạn "Đây là đề mục"

                              [<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"> 
                              <p><strong>Nội dung ch&iacute;nh [<span class="showHideArticleSectionMenu">hide</span>]</strong></p> 
                              <div class="boxContentGuide<p><a href="#id1">Đây là đề mục 1</a></p>
                              <p><a href="#id2">Đây là đề mục 2</a></p>
                              <p><a href="#id3">Đây là đề mục 3</a></p>
                              <p><a href="#id4">Đây là đề mục 4</a></p>
                              <p><a href="#id5">Đây là đề mục 5</a></p>
                              </div>
                              </div>]                             

Bước 2: Mở lại phần nguồn, Ctrl F tìm h2 và copy đoạn code này trước dòng h2 hoặc h3 tương ứng và đối chiếu với id tương ứng trên bảng mục lục

                              [<div id="Đây là id tương ứng với đề mục">]