Astro のブログに目次を追加

(2024-04-14)

Astro ブログに目次を作成します。

rehype のプラグインをインストール

まず、rehype のプラグインをインストールします。

npm i rehype-slug rehype-toc

astro.config.mjs の編集

これが少し理解できないのですが、以下のようにしました。

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import mdx from "@astrojs/mdx";
import toc from 'rehype-toc';
import slug from 'rehype-slug';
import expressiveCode from "astro-expressive-code";

export default defineConfig({
  integrations: [
    tailwind(),
    expressiveCode({
      themes: ['one-dark-pro'],
    }),
    mdx()
  ],
  markdown: {
    rehypePlugins: [
      slug,
      [toc, { headings: ["h2", "h3"] }], // toc.rehypePlugins ではなく toc を直接指定
    ],
  },
});

/src/components/BaseLayout.astro の編集

---
import Header from '/src/components/Navigation.astro';
import Footer from '/src/components/Footer.astro';
import '@fontsource/noto-sans-jp';
import '/src/styles/global.css';
const { pageTitle, showToc } = Astro.props;
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <div class="contents-wrapper">
      <Header />
      <h1 class="mx-3">{pageTitle}</h1>
        <div class="mx-5">
          {showToc && (
            <astro-custom-toc />
          )}
          <slot />
        </div>
      <Footer />
    </div>
  </body>
</html>

global.css の編集

/* toc-menu */
.toc {
  display: inline-block;
  border: 1px solid gray;
  margin-bottom: 50px;
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 10px;
}
.toc ol li {
  counter-increment: toc;
  color:rgb(28, 28, 116);
  margin-left: 10px;
  margin-right: 10px;
}
.toc ol li:before {
  content: counters(toc, ".") ".　";
}

これで動くはずです。