【Nuxt.js】Nuxt Contentを使って、ブログ機能を実装する – その①

//npmの場合
npm install @nuxt/content

//yarnの場合
yarn add @nuxt/content

//・・・省略
  modules: [
    "@nuxt/content" //追記
  ],
//・・・省略

content
└ post
　 ├ post-1.md
　 ├ post-2.md
　 └ post-3.md
pages
├ post
│ └ _slug.vue
├ category
│ └ slug
│ 　 └ index.vue
└ index.vue

---
title: テスト投稿
description: 説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。
category: カテゴリー1
---

# h1 タイトル

## h2 タイトル

### h3 タイトル

#### h4 タイトル

**大文字テキスト**

_斜体テキスト_

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

- リスト 1
- リスト 2
- リスト 3

1. 連番リスト 1
2. 連番リスト 2
3. 連番リスト 3

[リンクテキスト](https://hogehogehoge.com/)

| テーブル項目 1 | テーブル項目 2 | テーブル項目 3 |
| -------------- | -------------- | -------------- |
| テーブル内容 1 | テーブル内容 2 | テーブル内容 3 |

module.exports = {
  category: [
    { text: "カテゴリー1", slug: "category1" },
    { text: "カテゴリー2", slug: "category2" },
    { text: "カテゴリー3", slug: "category3" }
  ]
}

//・・・省略
category: category1
//・・・省略

//npmの場合
npm install @nuxtjs/dayjs

//yarnの場合
yarn add @nuxtjs/dayjs

//・・・省略
  modules: [
    "@nuxt/content",
    "@nuxtjs/dayjs" //追記
  ],
//・・・省略

<template>
  <div class="container">
    <h1>{{ post.title }}</h1>
    <p>
      投稿日：{{ $dayjs(post.createdAt).format("YYYY/MM/DD") }}<br />
      更新日：{{ $dayjs(post.updatedAt).format("YYYY/MM/DD") }}
    </p>
    <p>カテゴリー：{{ getCatName(post.category) }}</p>
    <nuxt-content :document="post" />
  </div>
</template>

<script>
import Vue from "vue";
import taxonomy from "@/taxonomy";
export default Vue.extend({
  async asyncData ({ $content, params }) {
    const post = await $content(`post/${params.slug}`).fetch()
    return { post }
  },
  data () {
    return {
      category: [...taxonomy.category]
    }
  },
  methods: {
    getCatName (cat) {
      return this.category.find((v) => v.slug === cat).text;
    }
  }
})
</script>

<style scoped>
</style>

  async asyncData ({ $content, params }) {
    const post = await $content(`post/${params.slug}`).fetch()
    return { post }
  }

//記事タイトル出力
{{ post.title }}

//記事内容出力
<nuxt-content :document="post" />

//投稿日の出力
{{ $dayjs(post.createdAt).format("YYYY/MM/DD") }}

//更新日の出力
{{ $dayjs(post.updatedAt).format("YYYY/MM/DD") }}

//カテゴリーを入れる配列
category: [...taxonomy.category]

//配列から対象のカテゴリーを取得する関数
getCatName (cat) {
　　return this.category.find((v) => v.slug === cat).text;
}

//関数の実行
{{ getCatName(post.category) }}

<template>
  <div class="post-wrap">
    <div v-for="post of posts" :key="post.slug" class="post_card">
      <nuxt-link :to="{ name: 'post-slug', params: { slug: post.slug } }">
        <p>{{ post.title }}</p>
        <p>{{ getCatName(post.category) }}</p>
        <p>{{ $dayjs(post.updatedAt).format("YYYY/MM/DD") }}</p>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import taxonomy from "@/taxonomy";
export default Vue.extend({
  props: {
    posts: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      category: [...taxonomy.category],
    }
  },
  methods: {
    getCatName (cat) {
      return this.category.find((v) => v.slug === cat).text;
    }
  }
});
</script>

<style>
.post-wrap {
  display: flex;
  flex-wrap: wrap;
}
.post_card {
  background: #dcdcdc;
  padding: 2%;
  width: 23.5%;
  margin-left: 2%;
}
.post_card:nth-child(4n + 1) {
  margin-left: 0;
}
.post_card a {
  text-decoration: none;
  color: #000;
}
.post_card a > p:first-child {
  font-weight: bold;
  font-size: 18px;
}
</style>

<template>
  <div class="container">
    <ArticleList v-if="posts != 0" :posts="posts" />
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData ({ $content }) {
    const posts = await $content("post")
      .sortBy('createdAt', 'desc')
      .limit(10)
      .fetch()
    return {
      posts
    }
  },
}
</script>

//記事を降順（新着順）で取得
.sortBy('createdAt', 'desc')

//最大10記事まで取得
.limit(10)

<template>
  <div class="container">
    <h1>{{ getCatName($route.params.slug) }}</h1>
    <section>
      <div class="row">
        <ArticleList :posts="posts" />
      </div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import taxonomy from "@/taxonomy";
export default Vue.extend({
  data () {
    return {
      category: [...taxonomy.category]
    }
  },
  async asyncData ({ store, $content, params }) {
    const posts = await $content("post")
      .sortBy('createdAt', 'desc')
      .where({ category: { $contains: params.slug } })
      .fetch()
    return {
      posts,
    }
  },
  methods: {
    getCatName (cat) {
      return this.category.find((v) => v.slug === cat).text;
    },
  }
})
</script>

.where({ category: { $contains: params.slug } })