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 あたりを触って抵抗がないようにしておきたい