How to add a table of contents automatically under the jump break of the article

How to add a table of contents automatically under the jump break of the article in the blogger.The blog dedicated to tips, diary, ..., articles with long content should use the index to help navigate quickly to the item you want to see when clicked on that item. Similar to books, text, presentations, etc., there must be a top-level index, so the article is the same but simpler because the article is limited to words, so just divide the main items are enough to meet request. When composing a post after a few introductory paragraphs, it is usually best to use jumps, and adding the index below this is the most appropriate.

Cách thêm mục lục tự động dưới dấu ngắt nhảy của bài viết

Steps to do:

1. Add the code below the article data tag < article : 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>

Insert the script before the closing </ body> tag

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>

In the script above you notice the part a = document.getElementById ("backer"); With the backer id of the top menu bar, you replace the template with the correct one.

Note: the article must use the jump after a few lines of opening, otherwise the table will not show.

3. When writing or editing posts, in the HTML editor of the article, add the tags h2, h3, h4, h5, h6.

For example, when you write the items: Label in the article, Label in Vietnamese, Label in the breadcrumb, Label in the Label, Label in the Label, Label in the Label and Label on the label. You pass the HTML editing pane of the article in turn as follows:

<h3> Label Label in article </ h3>
...
<h3> Label Label in Breadcrumb </ h3>
. .
<h3> Vietnam chemical Label widget Label </ h3>
...
<h3> Label Vietnamese goods in the script </ h3>
...
<h3> Vietnam chemical Label on meta tag </ h3>
...

you Can replace h3 with h2, h4,

4. The css for the display interface of the table, you design your own custom