page内に、パス以下にあるページ一覧とそのリンクを書いておきたくなったが、手動追加するのが億劫なので一覧取得、生成するようにした
やり方はAIに教えてもらった。聞けばvitaの機能を使っているようだが、vita全然わからん、なので自力ではたどり着けなかった。助かった
環境
- node: 20
- evidence: 40.1.6
実装
この例では、pageファイルはpages/demo/index.mdとして設置した。内容は以下
---
title: demo page
sidebar_link: false
sidebar: never
---
welcome demo page
<script>
// vitaの機能。ファイルパス一覧を取得
const modules = import.meta.glob('./**/+page.md');
const pages = Object.entries(modules).map(([path, mod]) => {
// パスからファイル名などを整形
// see .evidence/template/src/pages
const slug = path.replace('./', '').replace('/+page.md', '');
return {
title: slug,
path: '/demo/' + slug
};
}).filter(Boolean); // null (自分自身) をリストから消す
</script>
## デモ一覧
<ul class="list-disc pl-6 space-y-2 my-4">
{#each pages as page}
<li>
<a href={page.path} class="text-blue-600 hover:text-blue-800 hover:underline transition-colors font-medium">
{page.title}
</a>
</li>
{/each}
</ul>
少しハードコーディング感もある。
modulesの参照先は、.evidence/template/src/pages/demo以下から相対パスでpathが取得される。フォルダ構成も.evidence内をみるとはやい。
それらの文字列に対してページへのリンクになるよう文字列加工をした。mdファイルからfrontmetterのtitleを取得したかったが、ファイルの中身からパースしないといけなそうだったので、パスをリンクテキストとして表示している
ページはこんな感じになる。ページ一覧は/demo以下に3ページ適当においている
ちなみにこの書き方は、動的ページ（/[id].mdみたいな）のリンクは、対応していない
動的ページは割とそれ用の実装が必要になるので記事一覧にのせるにはちょっと重いコンテンツになる
https://docs.evidence.dev/core-concepts/templated-pages/
リンク自体はサイドバーが表示されるのでそれでもいいのだが、ページの説明など、リッチなコンテンツとして設置もできるので便利
この辺楽にできるといいけど、難しいのだろうな。コンポーネントとして実装もしてみたけど、ここではmdファイルにスクリプトを書いたものを紹介した