CMS Development

Winnie
Teilnehmer/-in

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

lösung

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 Akzeptierte Lösung
stefen
Lösung
Autorität | Partner
Autorität | Partner

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

lösung

@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

Lösung in ursprünglichem Beitrag anzeigen

4 Antworten
albertsg
Ratgeber/-in

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

lösung

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
Ratgeber/-in | Platinum Partner
Ratgeber/-in | Platinum Partner

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

lösung

@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
Mitglied

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

lösung

Hi Stefen, how to install this in hubspot CMS ?

0 Upvotes
stefen
Lösung
Autorität | Partner
Autorität | Partner

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

lösung

@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