Cách thêm mục lục tự động dưới dấu ngắt nhảy của 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

Hình minh họa Mục lục hiển thị dưới các đoạn mở bài

Các bước thực hiện:

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

Copy

<div class='post-body' expr:id='&quot;post-body-&quot; + data:post.id'>



  <data:post.body/>

  <!-- Chèn đoạn code hiển thị Mục lục -->

  <div class='category'>

    <span class='title'>Nội dung chính</span>

    <ul id='chapter'/>

  </div>



</div>

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

Copy

<b:if cond='data:view.isPost'>

<script>

postBody = document.getElementById(&quot;post-body-<data:view.postId/>&quot;);

// <![CDATA[

var titleChapter = postBody.querySelectorAll("h2, h3, h4, h5, h6");

if (titleChapter.length >= 1) {

  var i;

  var leChapteraptor = [];

  for (i = 0; i < titleChapter.length; i++) {

    if (i < 9) {

      var z = "0";

    } else {

      var z = "";

    }

    anchorChapter = "chapitre-" + z + (i + 1);

    titleChapter[i].setAttribute("id", anchorChapter);

    leChapteraptor[i] = "<li><span onclick='jump(\"" + anchorChapter + "\")' title='Xem chi tiết'>" + titleChapter[i].innerHTML + "</span></li>";

  }

  document.getElementById("chapter").innerHTML = leChapteraptor.join('');

} else {

  document.getElementsByClassName("category")[0].style.display = "none";

}



function jump(z) {

  a = document.getElementById("backer");

  if (a) {

    a = a.offsetHeight || a.clientHeight;

  } else {

    a = 0;

  }

  var top = document.getElementById(z).offsetTop + (a);

  window.scrollTo(0, top);

}



$(function() {

  var more = $('.post-body a[name="more"]')

  if (more) {

    $('.category').appendTo(more)

  } else {

    $('.category').empty()

  }

})

//]]></script>

</b:if>

Trong đoạn script trên các bạn để ý phần a = document.getElementById("backer"); với backer là id của thanh menu trên cùng, các bạn thay lại cho đúng với template.

Lưu ý: bài viết phải sử dụng 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ị.

3. 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.

Ví dụ khi các bạn viết các mục: Việt hóa Label trong bài viết, Việt hóa Label trong đường dẫn Breadcrumb, Việt hóa Label trong widget Label, Việt hóa Label trong script và Việt hóa Label trên thẻ meta. Các bạn chuyển qua khung soạn thảo HTML của bài viết thêm lần lượt các như sau:

<h3>Việt hóa Label trong bài viết</h3>
...
<h3>Việt hóa Label trong đường dẫn Breadcrumb</h3>
...
<h3>Việt hóa Label trong widget Label</h3>
...
<h3>Việt hóa Label trong script</h3>
...
<h3>Việt hóa Label trên thẻ meta</h3>
...

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

4. 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

Nội dung chính