前回の記事の続きになります。
scriptタグすら使わずmdファイルを出力できてしまいました。
ここからさらに応用して、ブログの構成を作っていきます。
ContentDocとContentRendereの役割はいずれも単体の記事を扱うためのコンポーネントですが、それぞれ次のように役割が分かれています。
公式ドキュメントの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で記事リストを取得する方法について解説します。