Bài viết liên quan:
Giới thiệu về mục lục bài viết
Với mục lục tự động, giờ đây bạn có thể tạo mục lục cho các bài đăng trên blog của mình chỉ bằng vài cú nhấp chuột. Mục lục sẽ xuất hiện ở đầu bài đăng của bạn, cho phép người đọc nhanh chóng điều hướng đến các phần mà họ quan tâm. Điều này không chỉ làm cho nội dung của bạn thân thiện hơn với người dùng mà còn giúp cải thiện việc tối ưu hóa công cụ tìm kiếm (SEO) bằng cách giúp các công cụ tìm kiếm hiểu cấu trúc bài đăng của bạn dễ dàng hơn.Vậy làm thế nào nó hoạt động? Về cơ bản, bạn tạo danh sách các liên kết đến từng phần trong bài đăng của mình và khi người đọc nhấp vào liên kết, họ sẽ được đưa thẳng đến phần đó.
Những lợi ích của việc sử dụng mục lục bài viết
Mục lục bài viết tự động giúp người đọc dễ dàng tìm thấy thông tin mình đang tìm kiếm. Thay vì cuộn qua một bài đăng blog dài, người đọc có thể chỉ cần nhấp vào phần họ quan tâm và chuyển ngay đến phần đó. Điều này có thể đặc biệt hữu ích đối với các bài đăng dài hơn hoặc bài đăng bao gồm nhiều chủ đề.Mục lục bài viết tự động có thể cải thiện trải nghiệm tổng thể của người dùng trên blog của bạn. Bằng cách cung cấp cái nhìn tổng quan rõ ràng và ngắn gọn về bài đăng của bạn, người đọc có nhiều khả năng tiếp tục tương tác và tiếp tục đọc hơn. Điều này cũng có thể dẫn đến tăng thời gian dành cho trang web của bạn và giảm tỷ lệ thoát.
Từ góc độ SEO, mục lục bài viết tự động cũng có thể giúp cải thiện khả năng hiển thị blog của bạn. Bằng cách sắp xếp nội dung của bạn thành các phần riêng biệt, công cụ tìm kiếm có thể hiểu rõ hơn về cấu trúc và thứ bậc bài đăng của bạn. Điều này có thể dẫn đến thứ hạng được cải thiện và tăng lưu lượng truy cập không phải trả tiền.
Việc sử dụng mục lục bài viết tự động có thể giúp bạn tiết kiệm thời gian và công sức. Thay vì tạo mục lục cho mỗi bài đăng theo cách thủ công, một công cụ tự động có thể làm việc đó cho bạn chỉ bằng vài cú nhấp chuột. Điều này có thể giải phóng thời gian cho các nhiệm vụ quan trọng khác như tạo nội dung mới hoặc tương tác với khán giả của bạn.
Cách tạo mục lục bài viết tự động
Bước 1: copy CSS bên dưới dán trước thẻ đóng ]]></b:skin>post-body ul{padding:0 0 0 15px;margin:10px 0}
.rtl .post-body ul{padding:0 15px 0 0}
.post-body li{margin:5px 0;padding:0}
.post-body ul li,.post-body ol ul li{list-style:none}
.post-body ul li:before{display:inline-block;content:'\2022';margin:0 5px 0 0}
.rtl .post-body ul li:before{margin:0 0 0 5px}
.post-body ol{counter-reset:ify;padding:0 0 0 15px;margin:10px 0}
.rtl .post-body ol{padding:0 15px 0 0}
.post-body ol > li{counter-increment:ify;list-style:none}
.post-body ol > li:before{display:inline-block;content:counters(ify,'.')'.';margin:0 5px 0 0}
.rtl .post-body ol > li:before{margin:0 0 0 5px}
#toc li a{color:#4285f4;font-weight:normal}
.tocify-wrap{display:block;width:100%;clear:both;margin:0}
.tocify-inner{position:relative;max-width:100%;background-color:rgba(155,155,155,0.05);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:var(--title-color);line-height:1.6em;border-radius:4px}
a.tocify-title{position:relative;height:58px;background-color:rgba(155,155,155,0.05);font-size:24px;color:#344955;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:4px}
a.tocify-title.is-expanded{border-radius:4px 4px 0 0}
.tocify-title:after{content:'\2261';font-size:18px;font-weight:400;margin:0 0 0 25px}
.rtl .tocify-title:after{margin:0 25px 0 0}
.tocify-title.is-expanded:after{font-weight:900}
a.tocify-title:hover{text-decoration:none}
#toc{display:none;padding:8px 15px;margin:0}
#toc ol{padding:0 0 0 15px}
.rtl #toc ol{padding:0 15px 0 0}
#toc li{font-size:14px;margin:7px 0}
#toc li a:hover{color:#4285f4;text-decoration:underline}<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:"h2,h3,h4"}),$("#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>Muốn làm tiêu đề cho mục lục thì chọn các thẻ H1, H2, H3, H4 cho tiêu đề đó
- Tiêu đề lớn: là thẻ H1
- Tiêu đề: là thẻ H2
- Tiêu đề phụ: là thẻ H3
- Tiêu đề nhỏ: là thẻ H4
Chèn đoạn {tocify} $title = {Mục lục bài viết} vào vị trí bạn muốn xuất hiện phần mục lục tự động trong bài viết (bắt buộc in đậm {tocify} $title = {Mục lục bài viết} bạn nhé).