本記事では、サイドバーで目次を表示する方法を解説しています。JAMStackでブログを作る際に、必要になると思います。参考になれば幸いです。

JavaScriptのコード

本ブログでは、Nuxt.jsを使っているのですが、JavaScriptを使用しているので、基本的な実装方法はどのフレームワークを使用しても変わらないと思います。

document.addEventListener("DOMContentLoaded", () => {
  const article = document.querySelector(".article")
  const heads = article.querySelectorAll("h1, h2")
  if (heads && heads.length) {
    let contents = ""
    heads.forEach((head, i) => {
      contents += `<li><a href="#head${i}">${head.textContent}</a></li>`
      head.innerHTML += `<a id="head${i}"></a>`
    })
    document.querySelector(
      "#table-of-content"
    ).innerHTML += `<ol>${contents}</ol>`
  }
})

Window: DOMContentLoaded イベントで、最初の HTML 文書の読み込みと解析が完了を待ってから、Headタグを取得します。

document.querySelector(".article") で記事のセレクタを取得します。

次にarticle.querySelectorAll("h1, h2")でh1とh2タグを取得しています。

そして、"#table-of-content"にHTMLを挿入しています。

HTMLのコード

<div id="table-of-content" />

このようにidを指定していれば、HTMLが挿入されます。

セレクタは、classでもidでも良いと思います。

Vue.jsの場合

mountedの中に、JavaScriptのコードを入れてあげてください。

mounted() {
  // JavaScriptのコード
}

createdの中にコードを入れてしまうと、documentが読み込めないので、注意しましょう。