Cách tạo mục lục (table of contents) cho Blogger

Bạn có thể dễ dàng tạo mục lục TOC cho Blogger nhanh chóng qua 2 bước sau:

Bước 1: Thêm mã JS của TOC

Hãy dán đoạn mã JS sau vào trước thẻ </body> trong giao diện Blogger của bạn nhé

<b:if cond='data:view.isSingleItem'>
    <script>
        //<![CDATA[
        function shortCodeIfy(t, n, i) {
            for (var e = t.split("$"), o = /[^{\}]+(?=})/g, c = 0; c < e.length; c++) {
                var a = e[c].split("=");
                if (a[0].trim() == n) return null != (i = a[1]).match(o) && String(i.match(o)).trim()
            }
            return !1
        }! function(t) {
            "use strict";
            var n = function(n) {
                    return this.each(function() {
                        var i, e, o = t(this),
                            c = o.data(),
                            a = [o],
                            r = this.tagName,
                            s = 0;
                        i = t.extend({
                            content: "body",
                            headings: "h1,h2,h3"
                        }, {
                            content: c.toc || void 0,
                            headings: c.tocHeadings || void 0
                        }, n), e = i.headings.split(","), t(i.content).find(i.headings).attr("id", function(n, i) {
                            return i || function(t) {
                                0 === t.length && (t = "?");
                                for (var n = t.replace(/\s+/g, "_"), i = "", e = 1; null !== document.getElementById(n + i);) i = "_" + e++;
                                return n + i
                            }(t(this).text())
                        }).each(function() {
                            var n = t(this),
                                i = t.map(e, function(t, i) {
                                    return n.is(t) ? i : void 0
                                })[0];
                            if (i > s) {
                                var o = a[0].children("li:last")[0];
                                o && a.unshift(t("<" + r + "/>").appendTo(o))
                            } else a.splice(0, Math.min(s - i, Math.max(a.length - 1, 0)));
                            t("<li/>").appendTo(a[0]).append(t("<a/>").text(n.text()).attr("href", "#" + n.attr("id"))), s = i
                        })
                    })
                },
                i = t.fn.toc;
            t.fn.toc = n, t.fn.toc.noConflict = function() {
                return t.fn.toc = i, this
            }, t(function() {
                n.call(t("[data-toc]"))
            })
        }(window.jQuery), $(".post-body b").each(function() {
            var t = $(this),
                n = t.text();
            n.toLowerCase().trim().match("{tocify}") && (n = 0 != shortCodeIfy(n, "title") ? shortCodeIfy(n, "title") : "Table of Contents", t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="' + n + '">' + n + '</a><ol id="toc"></ol></div></div>'), $(".tocify-title").each(function(t) {
                (t = $(this)).on("click", function() {
                    t.toggleClass("is-expanded"), $("#toc").slideToggle(170)
                })
            }), $("#toc").toc({
                content: ".post-body",
                headings: "h3"
            }), $("#toc li a").each(function(t) {
                (t = $(this)).click(function() {
                    return $("html,body").animate({
                        scrollTop: $(t.attr("href")).offset().top - 20
                    }, 500), !1
                })
            }))
        });
        //]]>
    </script>
</b:if>

Bước 2: Chọn vị trí chèn TOC trong bài viết Blogger

Để hiển thị TOC ra ngoài giao diện người dùng. Trong quá trình tạo mới bài viết trên Blogger, bạn chuyển qua chế độ Code và chèn đoạn mã HTML sau đây ở vị trí mong muốn:

<b>{tocify} $title = {Xem nhanh}</b>

Bước 3: Làm đẹp TOC bằng CSS

Nếu bạn không quá khắc khe về thẩm mỹ qua bước 2 là bạn đã xong việc chèn Mục lục cho bài viết blogger rồi đó. Còn nếu bạn muốn TOC đẹp hơn, hãy sử dụng một tí CSS để làm việc đó nhé.

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