68 Kopakolong, Thống nhất, TP.Kon Tum 600000

14.349171, 108.007778

Code tạo mục lục tự động bên dưới dấu ngắt nhảy của bài viết

Code tạo mục lục tự động bên dưới dấu ngắt nhảy của bài viết Tạo mục lục với nội dung chính sử dụng các thẻ tiêu đề của bài viết giúp điều hướng nhanh

Chào bạn! có phải phải đang tìm mẫu Code tạo mục lục tự động bên dưới dấu ngắt nhảy của bài viết? trong tất cả các bài viết trên website thì phần mục lục bài viết có thể nói rất là hữu ích, hôm nay VeoSpot.com chi sẻ code HTML dành cho các blogger muốn thêm mục lục tự động vào bài viết của mình
Code tạo mục lục tự động bên dưới dấu ngắt nhảy của bài viết

Cách tạo mục lục tự động và bài viết

Những Blog chuyên viết về thủ thuật, nhật ký,..., có bài viết với nội dung dài nên sử dụng mục lục để giúp điều hướng nhanh đến mục muốn xem khi click chuột vào mục đó. Tương tự như sách, văn bản, thuyết trình,..., phải có mục lục đầu trang thì trong bài viết cũng vậy nhưng đơn giản hơn vì bài viết bị giới hạn từ nên chỉ cần chia thành những mục chính cũng đủ đáp ứng yêu cầu.
Khi soạn thảo bài viết sau vài đoạn giới thiệu đầu dòng thường sử dụng dấu nhắt nhảy, và thêm mục lục bên dưới vị trí này là thích hợp nhất

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>

2. Chèn Javascript (JS)

Bạn nhớ chèn JS trước thẻ </body> nha, hoặc nếu bạn sử dụng template mà tác giả code ngắn gọn dùng id để trong <b:includable id='template-script'>
<b:if cond='data:view.isPost'>
<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>

3. Chèn CSS

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;
    }
}
*Lưu ý:
  1. 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ị.
  2. Template cần có thư viện link jquery
Nếu bạn muốn góp ý cùng mình thì vui lòng để lại lời nhắn trong phần comments nhé
Nguồn code: Việt Blogger