Cách tạo table content cho blogger

Đối với các web sử dụng nền tảng wordpress, việc tạo một bảng mục lục hay còn gọi là table content là rất đơn giản. Chỉ cần thêm một plugin nhỏ là được thôi. Tuy nhiên đối với các blogger, việc tạo một table content tương đối hơi khó một tý. Ở bài này mình sẽ hướng dẫn các bạn chỉ với 4 bước nhanh chóng sau, các bạn cũng có thể tạo cho mình một table cotent khá đẹp mắt nhưng cũng không kém phần mượt mà
{tocify} $title={Nội Dung}

Mục lục của bài 5 điều cần biết về kết nối 5G mà bạn cần biết sau khi đã chèn thành công trên bài đăng blogger

Giải thích thêm một chút về table content: Trong bài viết các bạn sử dụng các thẻ tiêu đề h2, h3, h4...để điều hướng nhanh đến mục cần đọc. Điều này thực sự hữu ích đối với các bạn chuyên viết về blog truyện hay chia sẽ những nội dung thật dài mà cần phân ra các mục nhỏ hơn để độc giả tiện theo dõi,

Các bạn xem qua phần demo ở đây : Bài đăng có sử dụng table-content  hoặc có thể xem ngay tại chính bài đăng này cũng có mục table content cho cac bạn tham khảo xem trước

Vị trí xuất hiện của bảng mục lục thích hợp nhất chính là ngay tại dấu ngắt nhẩy. Lúc này khi viết bài cho blog các bạn nhớ chèn dấu ngắt nhầy vào nhé. Bảng mục lục sẽ hiện ra tự động luôn

Các bước thực hiện theo 4 bước lần lượt như sau

1. Chèn code html

Thêm đoạn code bên dưới thẻ dữ liệu nội dụng bài viết <data:post.body/>

<b:if cond='data:view.isPost'>
  <div class='box_category'/>
</b:if>

Lưu ý: Với vị trí chèn như trên, bảng mục lục sẽ xuất hiện ngay tại vị trí dấu ngắt nhầy khá đẹp mắt

Các bạn có thể tìm các vị trí chèn khác để trải nghiệm xem sao nhé

2. Chèn script trước thẻ đóng </body>

<script>//<![CDATA[
var postBody = document.querySelector('.post-body');
var titleChapter = postBody.querySelectorAll('h2,h3,h4,h5,h6')
if (1 <= titleChapter.length) {
  var i, leChapteraptor = []
  for (i = 0; i < titleChapter.length; i++) {
    anchorChapter = 'chapter-' + (i + 1)
    titleChapter[i].setAttribute('id', anchorChapter)
    titleChapter[i].setAttribute('title', 'Lên đầu trang')
    leChapteraptor[i] = '<li data-target=' + "#" + anchorChapter + '>' + titleChapter[i].innerHTML + '</li>'
  }
  $('.box_category').html('<p>Nội dung chính <label></label></p><ul class="chapter">' + leChapteraptor.join('') + '</ul>')
} else {
  $('.box_category').remove()
}
$(function() {
  var name_more = $('.post-body a[name=more]')
  if (name_more) {
    $('.box_category').insertAfter(name_more)
  } else {
    $('.box_category').remove()
  }
})
$('.box_category p>label').click(function() {
  $(this).toggleClass('show');
  $(this).parent().parent().find('ul').slideToggle('slow')
})
$('.box_category li').bind('click', function() {
  var target = $(this).attr('data-target')
  $('html, body').stop().animate({
    scrollTop: ($(target).offset().top) - 70
  }, 'slow')
})
for (k = 0; k < titleChapter.length; k++) {
  titleChapter[k].addEventListener('click', function() {
    $('html, body').stop().animate({
      scrollTop: ($('.box_category').position().top)
    }, 'slow')
  })
}
//]]></script>
</b:if>

Lưu ý:
Bài viết phải chèn dấu ngắt nhảy sau vài dòng mở đầu, nếu không mục lục sẽ không hiển thị.
Template cần có thư viện link jquery

3. Cách thêm thẻ tiêu đề:

Có 2 cách:

+ Thêm trực tiếp bên khung soạn thảo bằng cách để con trỏ nhấp nháy, ngay trước hoặc sau hoặc bôi đen đoạn văn bản sau đó trên thanh công cụ soạn thảo click chọn ô Chuẩn => menu xổ xuống chọn một trong các loại Tiêu đề (h2), Tiêu đề con (h3), Tiêu đề nhỏ (h4)

+ Thêm bên khung soạn thảo HTML bài viết

Khi soạn hay chỉnh sửa bài viết, bên khung soạn thảo HTML của bài viết, thêm các thẻ h2, h3, h4, h5, h6.

<h2>Tiêu đề </h2>
<h3>Tiêu đề con</h3>
<h4>Tiêu đề nhỏ</h4>
...

Bôi đen đọa text rồi chọn tiêu đề nhỏ là vừa để phần text không quá lớn gây khó đọc

Các bạn có thể thay bằng các thẻ headings h2, h3, h4, h5 hay h6 tùy các bạn

Khi viết bài thường thì mình sẽ bôi đen hết đoạn tiêu đề rồi cho vào Tiêu Đề Nhỏ cho gọn gàng và dễ nhìn. Chứ nếu cho vào tiêu đề con hay Tiêu Đề thì đoạn text hiển thị quá lớn

4. Viết css hiển thị

Phần viết css cho giao diện hiển thị của mục lục, các bạn tự thiết kế theo sở thích của mình, code css tham khảo đang áp dụng với trường hợp blog mình

.box_category {
    background-color: #f0f1f5;
    margin-top: 22px;
    padding: 15px;
    border-left: 4px solid;
    border-color: #4285f4;
}
.box_category p {
    font-size: 1.3em;
    text-align: center;
}
.box_category p>label:after {
    content: '[Ẩn]';
}
.box_category p>label.show:after {
    content: '[Hiện]';
}
.box_category ul {
    margin: 10px 0 0;
    padding: 0;
}
.box_category li {
    list-style-type: none;
    line-height: 1.8rem;
}
@media (min-width: 769px) {
    .box_category p>label, .box_category li {
       cursor: pointer;
    }
}

Các bạn chép hết đoạn code bên trên rồi chèn trước thẻ ]]></b:skin> là xong

Đến đây là coi như bạn đã hoàn thành việc cài đặt phần mục lục cho bài viết của mình rồi nhé. Các bạn chỉ việc lưu lại và xem thành quả mình vừa làm có như ý không nhé, Chúc các bạn làm thành công nhé!