次のコンテンツの目次.JSブログ

This post has been taken from my primary blog https://alexbh.dev/posts/2020-12-31-nextjs-toc

最近落ち着いたNext.js 私の静的サイトジェネレータの選択として.私は1年ほど前にフロントエンドの開発をしてきました.だから、あなたが反応アプリケーションをして学んだ人のことを考えると、それは私です.
私はおそらく別の時間について書くだろうが、反応とこれらのフロントエンドのフレームワークは、JavaScript経由で削除されます..map(d => <div />) ) 私は、CSSクラスを使用して、本当に抽象的に正しいことを考え出すことで決してあきらめませんでした.Cookwind CSSのような技術は、私により多くの感覚を作ります.
次の解決の一部としてanywho.私はこのサイトのブログをセットアップしなければならなかったPortabella . 以前は使っていたEleventy しかし、上記の理由(あまりにもjsを好み)私は反応に移動しました.私は、私のポストのための目次を生成するどんな良い方法も見つけることができませんでした.

依存
私はここで依存関係の束に引っ張ります、そして、私は多分彼らを整えることができました、しかし、今のところ、それはちょうど私と大丈夫です.

yarn add gray-matter marked markdown-it markdown-it-anchor markdown-it-toc-done-right

ポストページ
私のポスト/posts/<slug> だから私はpages/posts/[slug].tsx 次のようにします.

export default function ({ content }) {
  return (
    <div>
      ...
      <div className="post">
        <div dangerouslySetInnerHTML={{ __html: content }} />
      </div>
    </div>
  )
  return <Post {...props} />;
}

export async function getStaticProps(context) {
  return {
    props: await getPostBySlug(context.params.slug),
  };
}

TOCをレンダリングする
この記事の実際の肉はここにあります、我々はちょうど目次を与えるために上記のライブラリを活用しています.我々getPostBySlug 関数は以下のようになります:

export async function getPostBySlug(slug) {
  const fileContent = await import(`../posts/${slug}.md`);
  const meta = matter(fileContent.default);

  const result = md.render(meta.content);
  return {
    ...meta.data,
    content: result,
  };
}

用途
実際にあなたがする必要があるすべての記事の内容のテーブルを取得するには[[toc]] どこでそれが行って欲しい.