yuheijotaki.com

Astroで記事の目次を生成する

目次

はじめに

Content Collenction管理のAstroで記事の目次を生成するメモ。

手順

見出しのリストを取得

src/pages/blog/[…slug].astro
const { headings } = await post.render(); でheadingsに見出しのリストが返ってくる。

目次コンポーネントを作成

src/components/Toc.astro

所感

  • Content Collenction向けに用意されている機能を使うことで、便利だがとっても楽をしている気がしてくる
    • 公式ドキュメントでは remark-tocを使う方法など紹介されていたが色々やり方がある模様
    • AstroのMarkdownサポートではGitHub-flavored Markdownプラグインをデフォルトで適用しており、これもremarkを使っている
    • unified, remark, rehype あたりを触って抵抗がないようにしておきたい