Hướng dẫn chi tiết cách tạo Table of Contents cho Blogger

Như các bạn đã biết một trong bảy tiêu chí quan trọng để SEO một trang,  là mỗi bài viết phải có một Table of Contents.

Table of Contents là gì?

Table of Contents (TOC) là một mục lục của bài viết. Thông thường đầu mỗi bài viết đều có một mục lục, giúp cho người đọc có cái nhìn tổng quan về bài viết, có thể truy cập nhanh và chính xác đến một mục trong bài viết. Làm cho người đọc có trãi nghiệm tốt hơn, thân thiện hơn.

Trong bài viết này, tôi sẽ hướng dẫn các bạn từ A đến Z cách tạo một Table of Contents. Nếu bạn có kiến thức tốt về CSS và jQuery thì chắc chắn sau khi xem xong video và bài viết này các bạn có thể tự xây dựng một Table of Contents riêng cho chính mình. Nếu bạn chưa hiểu lắm thì có thể dùng tạm code của mình, rồi từ từ hiểu sau cũng được.

Vì đây là code do bản thân mình tự tạo ra nên sẽ dễ phát hiện và xử lý khi xảy ra lỗi. Nếu các bạn muốn lấy để chia sẻ trên trang cá nhân thì mong rằng các bạn để rõ nguồn nhé.

-contents-ch

Liên kết giữa Table of Contents với Post Content

Thông qua cách thức liên kết giữa Table of Content với Post Content, tôi đã vẽ lại một mô hình để các bạn có thể dễ hình dung sự liên kết này.

Giải thích mô hình trên như sau:

Bên trong các bài viết đều có gắn các thẻ Heading (H2, H3. H4, H5). Trên mỗi heading có một ID duy nhất, và các ID này không trùng nhau. Để liên kết được một mục trong Table of Contents với một Heading, thì phải lấy ID của heading đó đưa vào thuộc tính href của thẻ a (href="#id_of_heading"). 

Mô hình hoạt động của Table of Contents

Để có thể xây dựng được các hàm cho Table of Contents thực thi hoàn toàn tự động. Thì chúng ta cùng tham khảo qua mô hình sau: 

Chúng ta sẽ dùng một cặp thẻ <div> có chứa id ở ngoài cùng, mục đích để bao trọn tất cả. Trên đầu bài viết thì được chèn thêm vào một đoạn code để hiện thị Table of Contents. Dưới thân của bài viết chúng ta thêm function getHeading(). Chức năng của hai function trên được miêu tả như sau:

1. fuction getHeading(), chờ bài viết tải lên hoàn tất, rồi thực thi nhiệm vụ:

• Gán cho mỗi heading trong bài viết một ID, không trùng nhau.
• Lấy nội dung của các heading (H2, ..., H4) đưa vào Table of Content

2. function onClick() có nhiệm vụ thăm dò tác động của người dùng. Nếu người dùng nhấp vào biểu tượng trên Table of Content thì Table of Content sẽ được mở rộng ra. Nếu người dùng nhấp vào biểu tượng thêm ần nữa thì Table of Content sẽ thu vào.  

Thêm Table of Content vào bài viết

Các bạn vào phần quản lý của Blogger, tiếp theo chọn Theme \ Edit HTML. Sau đó nhấn tổ hợp phím Ctrl + F, và tìm chuỗi <data:post.body/>. Thay thế <data:post.body/> bằng đoạn code sau đây:

<div id='post_content'>
	<div id='box-container'>
            <div class='header-container'>
                <p class='title-header-container'> Table of Contents</p>
                <span class='icon-header-container'>
                    <a onclick='return lstToggle();' id='icon_toggle'>
                        <i class='fa fa-list-ul'/>
                    </a>
                </span>
            </div>
            <nav class='table-container'>
                <ul id='list-heading' style='display: none;'/>
            </nav>
        </div>
        <data:post.body/>
        <script type='text/javascript'>
            //<![CDATA[
                getHeading();
            //]]>
        </script>
    </div>

Trong đó <div id='box-container'> chứa Table of Contents gồm:

• <div class='header-container'> là phần header
• <nav class='table-container'> là phần chứa danh sách liên kết

Thiết kế giao diện Table of Contents

Để tạo giao diện của Table of Content, các bạn vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi ]]></b:skin>:

Và dán đoạn code CSS sau đây vào trên vị trí vừa tìm gặp.

/*-- Table of Contents CSS by tips.vn --*/
    #box-container{
	border: 1px solid #3355FF;
        border-radius: 7px;
        margin: 20px 0px;
        width: auto;
        display: table;
        padding: 10px;
        position: relative;
        box-shadow: 0.5px 2px 5px #2255ff;
        color: #3355FF;
        font-weight: 600;
    }
    .header-container{
        display:flex;
        width: 100%;
    }
    #box-container p.title-header-container{
        margin-right: 10px;
        border-bottom: 2px solid #FF3F33;
        margin: 0px 10px 0px 0px;
        width: 100%;
    }
    .icon-header-container{
        display: table-cell;
        border: 1px solid #bbb;
        padding: 1px 5px;
        border-radius: 5px;
    }
    #box-container ul li {
        font-size: 95%;
    }
    #box-container a:hover{
        color: #d33;
    }
    #box-container a {
        color: #000;
        box-shadow: none;
	text-decoration: none;
        text-shadow: none;
    }
    #box-container li.Level-H3{
        margin-left: 30px;
    }
    #box-container li.Level-H4{
	margin-left: 60px;
    }
/*-- End Table of Contents CSS --*/

Nếu các bạn muốn biết mỗi đoạn CSS trên có ảnh hưởng đến Table of Contents thế nào thì xem chi tiết ở video đầu bài viết nhé.

Xây dựng hàm cho Table of Contents

Các bạn tiếp tục vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi </head>. Dán đoạn code jQuery sau đây vào trên thẻ </head>.

<script>
    //<![CDATA[
    function getHeading(){
        var htag = "";
        $("#post_content h2, #post_content h3, #post_content h4").each(function(i){
            $(this).attr("id", "point_" + i);
            htag += '<li class="Level-' + $(this).get(0).tagName + '"><a href="#point_' + i + '">' + $(this).html() + '</a></li>';
        });
        $('#list-heading').append(htag);
    }
    function lstToggle(){
        $('#list-heading').slideToggle('slow');
    }
    //]]>
</script>

Cuối cùng các bạn lưu lại và load lại bài viết xem thành quả nhé.