Astro で TOC を追加する

Markdown の大きな部分は、マークアップをすぐに気にせずに記事を書くことができるということです.

しかし同時に、それにはいくつかの制限があります.
目次を追加する方法などの制限はありますか? (目次)

この記事では、これらの TOC の 1 つを Astro を利用した Web サイトに追加する方法を説明します.

Note: I'll be using Astro v0.23 for this article

フレームワークの設定

作業するための基本的なフレームワークを設定しましょう.

npm init astro -- --template blog

これにより、基本的な Astro ブログが開始され、pages/post フォルダーにアクセスし、既存の投稿を変更して、いくつかの見出しを持つ完全なマークダウン構造を含めます.

見出しは、# 記号を使用して作成されます. (見出しごとに 1 つ)

# Heading 1
## Heading 2
### Heading 3

ブログの投稿に満足したら、Web サイトを実行して、どのように表示されるかを確認します.

npm run dev

これで、詳細な記事を含む非常に最小限のブログを作成する必要があります.

TOC マークダウン プラグインの追加

幸いなことに、このプラグインをゼロから作成する必要はありません.
私たちが使用できる素晴らしい rehype 個のプラグインが既に作成されています.

まず、必要なプラグインをインストールしましょう.

rehype-autolink-headings

rehype-slug

rehype-toc

それらをインストールするには、次のコマンドを実行します.

npm i rehype-autolink-headings rehype-toc rehype-slug

それらをインストールしたら、Astro にこれらのプラグインの使用を開始するように指示できます.
astro.config.mjs ファイルを開きます.このファイルは、Astro のビルドに関するすべてを処理します.

最初に、レンダリングされた既存の Astro リマークをインポートする必要があります.これは、Astro の必要な構成をすべて保持します.

import astroRemark from "@astrojs/markdown-remark";

次に、エクスポート内にマークダウンの新しいオプションを追加する必要があります.これは次のようになります.

export default /** @type {import('astro').AstroUserConfig} */ ({
    renderers: [],
    buildOptions: {
        site: 'https://example.com/',
    },
    markdownOptions: {
        render: [
            astroRemark,
            {
                rehypePlugins: [
                    "rehype-slug",
                    [
                        "rehype-autolink-headings",
                        { behavior: "append"},
                    ],
                    [
                        "rehype-toc",
                        { headings: ["h1", "h2"] }
                    ]
                ],
            },
        ],
    },
});

ご覧のとおり、 markdownOptions を追加し、内部にデフォルトの astroRemark を追加してから、使用するプラグインを追加しました.

これらのプラグインの順序が違いを生むように見えることに注意することが重要です.他の 2 つはそれに依存しているため、rehype-slug を追加することから始めます.

自動リンクの見出しと TOC プラグインが構成オブジェクトに付属していることがわかります.これは、必要に応じて修正または変更できます.

ウェブサイトを再実行すると (再実行はそのときだけ有効になるため、再実行することが重要です)、クリックしてナビゲートできる非常にクールな TOC が表示されます.



完全なコード例は GitHub にもあります.

読んでいただきありがとうございます。接続しましょう。

私のブログを読んでいただきありがとうございます.メール ニュースレターを購読して、Facebook に接続してください.