【nuxt3】ContentDocでブログを構成する

前回の記事の続きになります。

scriptタグすら使わずmdファイルを出力できてしまいました。

ここからさらに応用して、ブログの構成を作っていきます。

ContentDocとContentRenderer

ContentDocとContentRendereの役割はいずれも単体の記事を扱うためのコンポーネントですが、それぞれ次のように役割が分かれています。

• ContentDoc：mdファイルを取得する
• ContentRenderer：取得されたmdファイルを表示する

ContentDocの仕組み

公式ドキュメントのContentDocの項目にもあるように、ContentDocにpathを渡すとそのパスを使ってmdファイルを探してくれる一方で、pathを渡さない場合は$route.pathで取得を試みるようになっています。

また、ContentDocがmd検索をする場所はデフォルトでcontentディレクトリが基準になっています。

さて、前回の記事で作成してきたファイル・ディレクトリ構成は次のようになっていました。

content
└── test.md
pages
└── test.vue

test.vueは次のような状態でした（scriptタグもなし）。

<template>
        <ContentDoc v-slot="{ doc }">
            <ContentRenderer :value="doc" />
        </ContentDoc>
</template>

/testにアクセスするとtest.vueが表示されます。

test.vueのContentDocにpathを指定していないため、$route.pathの値の/testが読み取られます。

こうしてContentDocは/content/test.mdを検索して、該当したものがあるため取得される、ということになります。

（この取得された記事がContentRendereのvalueに渡されて、記事が表示されます）

様々なファイル名に対応する

これを踏まえると、応用としてまずは次のような構成が考えられます。

content
├── cats.md
├── dogs.md
├── rabbits.md
└── ...
pages
└── [slug].vue //test.vueをファイル名だけ変更

こうすれば、xxx.com/catsとxxx.com/dogs、xxx.com/rabbitsを開いたとき、それぞれContentDocが対応した記事を取得してくれます。

たとえばxxx.com/catsなら、ContentDocが$route.pathの値/catsを取得し、/content/cats.mdを探します（前述しましたが、ContentDocはcontentディレクトリを基準に検索してくれるのでした）。

カテゴリーに対応する

さらにもう一段階発展させると、次のような構造にも対応できます。

content
├── cats
│   ├── mike.md
│   ├── chatora.md
│   └── hachiware.md
├── dogs
│   ├── shiba.md
│   └── chiwawa.md
└── rabbits
    ├── netherland-dwarf.md
    └── holland-lop.md
pages
├── [category]
│   ├── index.vue //カテゴリーの記事リストページ
│   └── [...slug].vue //個別記事ページ。test.vueをファイル名だけ変更
└── index.vue //トップページ

ここまで使ってきたtest.vueは[...slug].vueに名前を変えているだけです。

たとえば /cats/mikeにアクセスすると、pages/[category]/[...slug].vueが表示され、その中のContentDocが$route.pathの値/cats/mikeを読み取り、/content/cats/mike.mdを探してくれます。

これでカテゴリーに対応でき、ブログらしくなってきましたね！このサイトもこういう形で作成しています。

次の記事では、pages/[category]/index.vueで記事リストを取得する方法について解説します。