📘

Docusaurusで「ページ・ディレクトリ一覧」を表示する方法

2021/12/11に公開約900字

こんな感じのメニューを表示します。

配下のページ・ディレクトリ一覧を表示

/docs/hoge/index.md
## ページ・フォルダ一覧

import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

<DocCardList items={useCurrentSidebarCategory().items}/>

DocCardListコンポーネントはDocusaurus本体に用意されています。useCurrentSidebarCategoryを使うことで、サイドバーの内容を利用できます。

こんな感じで、ページのコンテンツ一覧が表示されます。

index.mdかREADME.mdを有効活用しよう

/docs/hoge/index.mdまたは/docs/hoge/README.mdを作成すると、自動で/docs/hoge/というURLが付与されます。

README.mdにしておけば、GitHubでディレクトリにアクセスした際、そのままMarkdownを表示できて便利です。

Docusaurusのバージョン

2.0.0-beta.10から使えるようになりました!

https://github.com/facebook/docusaurus/pull/5830

こちらのPRです。

npm i @docusaurus/core@latest @docusaurus/preset-classic@latest

パッケージはこの2つを更新すればOK。

Discussion

ログインするとコメントできます