Nuxt/Contentのcontentフォルダの階層を深くする

2020.09.20

一覧記事の取得
1記事のみを取得する

Nuxt/Contentで記事を書いていくと記事フォルダの階層を深くしたくなります。

私の場合、記事をカテゴリで分けたくなりました例えば以下のように。

content/
  articles/
    Next/
      next-article-01.md
    Nuxt/
      nuxt-article-01.md
      nuxt-article-02.md
      nuxt-article-03.md
    ServerlessFramework/
      serverless-framework-article-01.md
      serverless-framework-article-02.md

このようにした場合、記事取得時の処理の書き方が少し特殊になります。

Nuxt/Contentのv1.3.0以上にのみ対応しているので、それ以下だと動きません。

一覧記事の取得

重要な点は $content の第2引数に {deep: true} を指定するところ。

<script lang="ts">
import { Context } from '@nuxt/types'
 
export default {
  async asyncData({ $content, params }: Context) {
    const articles = await $content('articles', { deep: true }).fetch()
    return { articles }
  },
}
</script>

{deep: true} を指定しない場合は articles/ 直下のファイルのみしか取得出来ませんが、これで階層が深くなったファイル群も取得出来ます。

1記事のみを取得する

記事詳細ページでは以下のように取得するのが主流です（公式のコードを参考)

export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()
 
    return {
      article
    }
  }
}

これは内部的に $content('article', params.slug) が /articles/${params.slug} に変換されます。

例えば https://hogehoge.com/articles/sample-01 というURLにアクセスした場合、 articles/sample-01 となり以下の「sample-01.md」を参照してくれます。

articles/
  sample-01.md

しかし残念ながらこの方法だと階層を深くした場合に対応していません。

もちろんNuxtのフォルダを使ったルーティング方法を用いてカテゴリ名を渡しつつ、という事をすれば出来ますが、 URLと記事のフォルダ階層を常に同じにしなければいけなくなります。

そこで少し無理矢理ですが記事を取得する際に where を使って対応してみます。

<script lang="ts">
import { Context } from '@nuxt/types'
 
export default {
  async asyncData({ $content, params }: Context) {
    const articles = await $content('articles', { deep: true }).where({ slug: params.slug }).fetch()
    if (articles.length === 0) {
      // TODO: 存在しない記事、404へ
      return
    }
    const article = articles[0]
    return { article }
  },
}
</script>