記事の目次を付けられるようにした

2020/12/04

TL;DR

Gatsby 製ブログで、記事の目次を付けられるようにした。 h1 〜 h3 タグの見出しにジャンプする目次を自動的に生成できる。

目次の付け方

Front Matter に以下の項目を追加する。

---
toc: true
---

実装方法

目次を自動生成する実装について説明する。

前提

Markdown のパースに gatsby-transformer-remark を使っていることが前提。 gatsby-transformer-remark だけで GraphQL から見出し情報を取得できる。 以下は gatsby-transformer-remark のドキュメントにあるサンプルコード。

{
  allMarkdownRemark {
    edges {
      node {
        html
        tableOfContents(
          absolute: true
          pathToSlugField: "frontmatter.path"
          heading: "only show toc from this heading onwards"
          maxDepth: 2
        )
        frontmatter {
          # Assumes you're using path in your frontmatter.
          path
        }
      }
    }
  }
}

見出しに id 属性を付与

gatsby-remark-autolink-headers というプラグインを利用する。 このプラグインは gatsby-transformer-remark と併用すると、読み込むだけで見出しに id 属性を付与できる。 そして、生成した目次にページ内リンクを設定できる。

今後対応したいこと

  • 目次を文中の任意の場所への挿入

さいごに

ここ数日の当ブログへの機能追加は、技術検証というか、Gatsby をもう少し理解するための素振りが目的だった。

WordPress v5 以降のブロックエディタは自由度は高いが、ブロックごとにテキストエリアがわかれるので書きなぐるには向いていない。 WordPress で記事を投稿する様子を見ると、一度お気に入りのエディタで(独自記法で注釈を入れながら)一気に文章を書き上げる人が多いように思う。 かと言って記事の HTML を人が手で書くことは期待できないし、可読性に欠けるので、Markdown の表現力を拡張するアプローチを試した。

WordPress ブログでよく使われる、

  • 吹き出し
  • 記事をカテゴリーとタグで分類
  • 目次自動生成

を Gatsby ブログでもできるようにした。素振りはこれで一旦終了。


morishitter

フリーランスのデザイナー。デジタルプロダクトのUIデザインを中心に、ブランディングからユーザー体験設計、ビジュアルデザインをおこなう。

© 2021, Masaaki Morishita