CMS Development

Winnie
Participant

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

SOLVE

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
1 Accepted solution
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

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

SOLVE

@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

View solution in original post

4 Replies 4
albertsg
Guide

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

SOLVE

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 



Did my answer help you? Mark it as a solution

You also connect with me on LinkedIn or Twitter

mangelet
Guide | Platinum Partner
Guide | Platinum Partner

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

SOLVE

@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 Veteran (12+ years)

Worried about messing up your HubSpot? I've got your back.

Join the thousands of people who have discovered how to avoid problems with simple tricks and have started to dominate HubSpot (and not be dominated).

️ Don't get left behind.

→ Click the subscribe button and scroll down to find the opt-in box.

Subscribe

Did I help answer your question? Mark this as a solution.

deconseil
Member

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

SOLVE

Hi Stefen, how to install this in hubspot CMS ?

0 Upvotes
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

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

SOLVE

@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