How to create menu of blog automatically using the content of H2, H3 tag?

Winnie
Participant

I would like to create a blog menu that the content of H2, H3 tag can automatically input into the menu. I think it's called toc generator?

I find the Javascript code like below seems can be do it but it's not work at all.

I know how to display the blog title with hubl but I don't know how to display the content of H2, H3 tag...

Could anyone know that how to display the content of H2, H3 tag and the method of the toc generator?


<!-- 目次を作成する先 -->
<div id="toc">
</div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
var div = document.createElement('div'); // 作成する目次のコンテナ要素
// .entry-content配下のh2、h3要素を全て取得する
var matches = document.querySelectorAll('.blog-section h2, .blog-section h3');
// 取得した見出しタグ要素の数だけ以下の操作を繰り返す
matches.forEach(function (value, i) {
// 見出しタグ要素のidを取得し空の場合は内容をidにする
var id = value.id;
if(id === '') {
id = value.textContent;
value.id = id;
}
// 要素がh2タグの場合
if(value.list_title === 'h2') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// コンテナ要素である<div>の中に要素を追加する
div.appendChild(ul);
}
// 要素がh3タグの場合
if(value.list_title === 'h3') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// コンテナ要素である<div>の中から最後の<li>を取得する。
var lastUl = div.lastElementChild;
var lastLi = lastUl.lastElementChild;
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// 最後の<li>の中に要素を追加する
lastLi.appendChild(ul);
}
});
// 最後に画面にレンダリング
contentsList.appendChild(div);
});
</script>

0 Upvotes
4 Replies 4
stefen
Key Advisor | Partner

@Winnie have you tried Tocbot? I haven't used it personally but it looks like a decent solution for automatically generating your table of contents: https://github.com/tscanlin/tocbot

Stefen Phelps, Community Champion, Kelp Web Developer
deconseil
Member

Hi Stefen, how to install this in hubspot CMS ?

0 Upvotes
mangelet
Contributor | Gold Partner

@Winnie @deconseil 

 

You need to add a little code into your post template.

 

We've done this here: https://blog.nubox.com/empresas/como-calcular-las-vacaciones

 

We used vanilla js to accomplish that... 

... you could go about using what @stefen suggested too.

Martin Angeletti
HubSpot CRM Specialist @ Andimol.com
ln: www.linkedin.com/in/mangelet
w: www.andimol.co
e: martin@andimol.com

Did I helped answer your question? Help the community liking and marking this post as a solution.

Learn HubSpot with me
albertsg
Participant

Hi @Winnie, just do it with vanilla JS as @mangelet suggests, no need to add third party apps to your blog just to do that, it's very simple.
A quick Google search will provide you the answer: https://stackoverflow.com/questions/43950084/how-to-get-all-headings-tags-values-using-js