【nuxt3】ContentListで記事リストを出力する

この記事の環境

"nuxt": "^3.8.0",
"@nuxt/content": "^2.8.5", //今回使用するモジュール

概要

以前の記事で単体の記事を@nuxt/contentのコンポーネントContentDocを使ってmarkdownから読み出してくる方法を説明しました。

一応、この記事から読んでも問題ないように書いていきます！

ここまでの構成は以下のようになっています。

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 //トップページ

今回はここから、ContentListを使って記事リストを表示する方法についてご紹介します。

ContentList

ContentListは、その名前の通りリストを出力するコンポーネントです。

ContentList - The fastest way to query your content with a component.

コンポーネントにpathを渡すことで、contentディレクトリを基準にpathのディレクトリを探索してくれます。

リストの実装

１．pathを手動で指定して取得してみる

/pages/[category]/index.vueを作成し、以下のように書いてみましょう。

<template>
    <ContentList path="cats" v-slot="{list}">
        <div v-for="article in list">
            {{ article.title }}
        </div>
    </ContentList>
</template>
<script setup>
</script>

/pages/catsを表示すると、/content/catsに入っているmdファイルのタイトルのリストが出力できました。

ContentListのpathに"/cats"を渡すことで、/content/catsを探索して表示してくれているんですね。

しかし、もちろん現状では/pages/dogsを表示した場合でも/content/catsのリストが表示されてしまいます。

そこで次！

２．pathを動的に指定する

アクセスしたカテゴリーに応じてリストを表示するため、ContentListのpathの部分を:pathに変更し、値をルートパラメーターにしてみましょう。

<template>
    <ContentList :path="$route.params.category" v-slot="{list}">
        <div v-for="article in list">
            {{ article.title }}
        </div>
    </ContentList>
</template>
<script setup>
</script>

これで、/pages/catsを開くと/content/catsのリストが、/pages/dogsを開くと/content/dogsのリストが表示されるはずです。

３．queryを使ってみる

ContentListにpathを渡してきましたが、より細かい条件で検索したり、表示する数や順序を制御したりといった目的にはqueryを渡すのが適しています。

順番にいきましょう。まず、以下のようにすると、これまでと同じ条件で表示ができます。

<template>
    <ContentList :query="query" v-slot="{list}">
        <div v-for="article in list" :key="article._path">
            {{ article.title }}
        </div>
    </ContentList>

</template>
<script setup>
const route = useRoute();
const query = {
    path: route.params.category,
}
</script>

これまでContentListにpathだけ渡していたのを、queryに入れた上でqueryを渡しています。

これだけの使い方ならpathだけ渡すほうが楽ですが、たとえば普通のブログの記事リストでは、一覧では10記事ずつ出したり、あるいは特定の条件で3記事だけ出したりしますよね。

そこで次！

４．queryで細かく条件指定する

queryを以下のようにすると、さらに細かいカスタマイズができます。

const query = {
    path:route.params.category,
    where:[{publish:true}],
    sort:[{date:1}],
    limit:5,
}

まず、whereを使ってmdファイルのフロントマターでpublishをtrueに指定しているものだけ検索しています。

また、上記ではsortを使ってフロントマターのdateをもとに昇順で表示してみました。明示的に降順にしたい場合は{date:-1}にしましょう。

limit:5にすることで、5記事だけ表示しています。

まとめ

これでブログに必要な取得・表示・記事管理は一通り完成しました。

@nuxt/contentのコンポーネントが便利すぎて、本当に簡単に作れてしまいますね。