Thêm mục lục cho bài viết

Trong một bài viết nếu như thêm mục lục vào cũng khá cần thiết. Nó sẽ cho độc giả của bạn dễ dàng biết những điểm quan trọng trong bài viết mà họ đang tham khảo. Vì thế, cũng có thể giữ chân độc giả lâu hơn vì đôi khi bài viết qua dài khiến cho độc giả họ ngại đọc, nhưng vì có những ý chính hay khiến họ suy nghĩ lại.
Bài viết này mình thảm khảo từ vietblogdao và mình có chỉnh sửa một chút đồng thời thêm style cho tiện ích này
Blog mình cũng đang sử dụng tiện ích này làm demo luôn

Javascript

Trước hết bạn chèn đoạn code bên dưới vào trước thẻ đóng </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
    postBody = document.getElementById( & quot; post - body - < data: view.postId / > & quot;);
    // <![CDATA[
    var titleChapter = postBody.querySelectorAll("h2");
    if (titleChapter.length >= 1) {
        var i;
        var leChapteraptor = [];
        for (i = 0; i < titleChapter.length; i++) {
            if (i < 9) {
                var z = "0";
            } else {
                var z = "";
            }
            anchorChapter = "chapitre-" + z + (i + 1);
            titleChapter[i].setAttribute("id", anchorChapter);
            leChapteraptor[i] = "<li><a onclick='jump(\"" + anchorChapter + "\")' title='Xem chi tiết'>" + titleChapter[i].innerHTML + "</a></li>";
        }
        document.getElementById("chapter").innerHTML = leChapteraptor.join('');
    } else {
        document.getElementsByClassName("category")[0].style.display = "none";
    }

    function jump(z) {
            a = document.getElementById;
            if (a) {
                a = 0;
            }
            var top = document.getElementById(z).offsetTop + (a);
            window.scrollTo(0, top);
        }
        //]]>
</script>
</b:if>

Đặt code mục lục trên nội dung bài viết

Trong template bạn tìm <data:post.body/> và dán đoạn code bên dưới vào trước nó

<div class='category'>
    <span class='title'>Tóm tắt</span>
    <ol id='chapter'/>
</div>

Thêm style cho phần mục lục

.category{float: right;border: 1px solid #dddfe2;padding: 10px;min-width: 150px;margin:0 0 20px 20px;}
.category .title{font-size: 15px;line-height: 1.2em;color: #12537f;font-weight: bold;}
.category ol{margin:0px;padding-left: 30px;}
.category a{cursor: pointer;}

Hướng dẫn hiển thị mục lục khi viết bài

Khi viết bài nội dung muốn hiển thị trên phần mục lục các bạn để nằm trong thẻ h2. Ví dụ như bài viết này mình đã để tiêu đề cho các mục lục nằm trong thẻ h2 thì sẽ được kết quả như phần mục lục của bài viết này

<h2>Javascript</h2>
...
<h2>Đặt code mục lục trên nội dung bài viết</h2>
...
<h2>Thêm style cho phần mục lục</h2>
...
<h2>Hướng dẫn hiển thị mục lục khi viết bài</h2>
...
<h2>Kết luận</h2>
...

Kết luận

1. Ở bản gốc mục lục sẽ xuất hiện khi bạn đặt thẻ ngắt <!--more--> cho bài viết, còn bài viết này mình hướng dẫn sẽ mặc định nằm ở trên cùng bên tay phải của bài viết như ở blog của mình
2. Mình chỉ để hiển thị khi các bạn sử dụng thẻ h2

Cảm ơn bạn đã theo dõi, chúc bạn thành công