Người Viết : ViKiMi Editor

Table of Contents / Mục Lục cho một Website dễ dàng, hữu ích khi sử dụng Bootstrap !
Thiết kế Website quen thuộc với những thành phần Bootstrap. Thật hữu ích, vậy cần làm gì để có một Website mới mẻ và hiện đại. Chắc hẳn là bạn muốn có một Website với trang hiển thị nội dung bài viết có một Table Of Contents / Mục Lục giúp người dùng dễ dàng biết cần phải xem những gì. Mục Lục chính là một thiết kế khá mạnh mẽ, tạo cho trang nội dung hiện đại thân thiện.
Điều này không hề khó với Bootstrap & jQuery Plugin dành cho việc tạo Mục Lục. Công việc thật đơn giản để có kết quả như ý :
+ Download Bootstrap dành cho Website của bạn
+ Download jQuery Plugin : bootstrap-toc dành cho Website của bạn
Đây là một Plugin cho phép bạn tạo Mục Lục cho bất kỳ trang nào, nó dựa vào các thanh tiêu đề (<h1>, <h2>, etc..) được cung cấp để tạo ra Mục Lục. Chẳng hạn trong trang hiển thị nội dung bài Viết bạn có các thanh tiêu đề <h1>, <h2>, etc… Plugin này sẽ dựa vào các thanh tiêu đề mà bạn cung cấp, nó sẽ tạo mục lục một cách tự động cho bạn.
jQuery Plugin Bootstrap Toc sẽ giúp tạo ra một Mục Lục giống một Sidebar cho trang hiển thị nội dung bài viết. Rất hiện đại & dễ dàng sử dụng cho Khách Truy Cập. Cách tạo ra một Mục Lục như vậy sẽ có các bước :
CÁCH 1 :
Tạo Table Of Contents dùng các thuộc tính BOOTSTRAP
Bước 1 : Thực hiện sử dụng Bootstrap + jQuery Plugin Bootstrap TOC
+ Cài Đặt jQuery
+ Cài Đặt Bootstrap
+ Thêm cài đặt phía dưới như mô tả :
<!– Hãy Thêm vào phía sau bootstrap.min.css –>
<link rel=”stylesheet” href=”https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css”
/>
<!– Hãy Thêm vào phía sau bootstrap.min.js or bootstrap.bundle.min.js –>
<script src=”https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js”></script>
Bước 2 : Chúng ta có một Layout cơ bản cho trang nội dung như sau. Và sự kết hợp giữa Bootstrap + jQuery Plugin Bootstrap TOC sẽ giúp chúng ta sẽ có một Mục Lục thật đẹp. Tất cả công việc đều được Plugin này thực hiện toàn bộ, và chỉ cần sử dụng :
<body data-spy=”scroll” data-target=”#toc”>
<div class=”container”>
<div class=”row”>
<!– Một Mục Lục giống sidebar –>
<div class=”col-sm-3″>
<nav id=”toc” data-toggle=”toc” class=”sticky-top”></nav>
</div>
<!– Phần nội dung bài viết –>
<div class=”col-sm-9″>…
<!– Phần nội dung này sẽ chứa các Thanh Tiêu Đề,
mà bạn cung cấp để tạo Mục Lục tự Động –>
</div>
</div>
</div>
</body>

Hình Ảnh : Mục Lục / Table Of Contents
GIẢI THÍCH : Phần Mục Lục cho trang nội dung được tạo ra như sau :
Tạo một phần tử <nav> với thuộc tính data-toggle=”toc”. Phần tử này để chứa Mục Lục được sinh ra tự động.
<nav id=”toc” data-toggle=”toc” class=”sticky-top”></nav>
Và để Mục Lục có thể hiển thị và cố định nó tại một vị trí trên vùng Website, chúng ta cần thêm vào <body> cặp thuộc tính như sau :
+ Nếu bạn sử dụng Bootstrap v4 Scrollspy :
<body data-spy=“scroll” data-target=“#toc”></body>
+ Nếu bạn sử dụng Bootstrap v5 Scrollspy :
<body data-bs-spy=“scroll” data-bs-target=“#toc”></body>
Như vậy, bạn đã có được mục lục cho trang hiển thị nội dung bài viết thật dễ dàng. Bạn chỉ cần sử dụng Bootstrap + jQuery Plugin Bootstrap TOC, tất cả những gì bạn sẽ có quá đơn giản & không khó khăn.
Mục Lục giúp Website của bạn đạt một hiệu quả tối đa. Việc điều hướng ngay chính trong trang hiển thị nội dung bài viết cũng dễ dàng. Website của bạn sẽ tăng tỉ lệ giữ chân khách truy cập >> từ đó tăng độ hấp dẫn người dùng.
CÁCH 2 : Tạo Table Of Contents dùng Javascript (jQuery)
Để tạo Table Of Contents sử dụng Javascript chúng ta sẽ thay thế Thẻ NAV với nội dung mới:
<nav id=”toc”></nav>
Đồng thời sẽ sử dụng đoạn Javascript (jQuery) để tạo Mục Lục tự động như sau:
$(function () {
var navSelector = “#toc”;
var $myNav = $(navSelector);
Toc.init($myNav);
$(“body”).scrollspy({
target: navSelector,
});
});
Như vậy đã tạo thành công Mục Lục tự động với Javascript. Và với tất cả các trang hiển thị nội dung bài viết đã có một Mục Lục bài viết được tạo một cách tự động.
+ Khi dùng Toc.int() chúng ta có thể truyền đối tượng jQuery cho phần tử NAV như ở trên, hoặc truyền vào đối tượng tuỳ chọn :
$nav (yêu cầu) : Phần tử mà Mục Lục sẽ được tạo bên trong
$scope : Danh sách các tiêu đề sử dụng trong Mục Lục. Giá trị Mặc định là $(document.body).
EXAMPLE :
Chúng ta có ví dụ về các Headings trong nội dung bài viết:
<h1>The title</h1>
<h2>Some sub-title</h2>
...
<h3>Section 1</h3>
<h4>Subsection A</h4>
...
<h4>Subsection B</h4>
...
<h3>Section 2</h3>
SỬ DỤNG TOC.INIT() :
Toc.init({
$nav: $(“#toc”),
$scope: $(“h4”)
// …
});
Kết quả Table of Contents:
· Subsection A
· Subsection B
+ Để bỏ qua một Heading không cho phép thêm nó vào Mục Lục chúng ta sử dụng thuộc tính data-toc-skip :
<h2 data-toc-skip > Đây là Heading không thêm vào Mục Lục </h2>
+ Để Customize / Tuỳ chỉnh hiển thị Text trong Mục Lục chúng ta sử dụng thuộc tính data-toc-text tới Headings:
<h2 data-toc-text=”Đoạn Text Ngắn”> Đoạn Text này quá dài nên cần thay thế </h2>
Như vậy, trong Mục Lục sẽ hiển thị “Đoạn Text Ngắn”. Mục Lục đã được tạo rõ ràng đẹp mắt hơn.