Nuxt Contentでブログ作ってみた。（その2）

4/12/2021

# Vue # Nuxt # Vuetify

前回プロジェクト作成、起動確認まで行いましたので、
今回はmarkdownファイルを作り、画面表示してみるところまでをご紹介します！
前回の記事はこちら👉

@nuxt/contentの公式ドキュメントも日々アップデートされており、
徐々に内容が充実してきているので、要チェックです:thumbsup:

markdownファイルを作る

プロジェクト直下にcontentというフォルダが存在するので、
さらにブログ記事格納用としてarticlesというフォルダを作成します。（フォルダ名は自由につけてOKです）

articlesフォルダ直下に、sample.mdを作成して以下のような内容を記載してみましょう。

sample.md

---
title: テスト記事
description: テスト記事です。
---

こんにちは。
## 見出し1
---
見出し1の内容

上記を画面表示してみます！

表示用のページを作る

前回作成したデフォルトページのInspireメニューをブログ表示用ページに書き換えて表示してみましょう👍

layouts/default.vueのサイドバーメニューを書き換えます。

default.vue

<script>
export default {
  data() {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'mdi-apps',
          title: 'Welcome',
          to: '/',
        },
        {
          icon: 'mdi-chart-bubble',
          title: 'Test Blog Page',  // 書き換え
          to: '/test-blog'  // 書き換え
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Vuetify.js',
    }
  },
}
</script>

pages/inspire.vueもpages/test-blog.vueにリネームしちゃいます。
その上で、<template>に記事表示要素、<script>に記事取得処理を書いていきます。

test-blog.vue

<template>
  <v-row>
    <v-col>
      <v-card
        color="grey lighten-3"
        flat
      >
        <v-container>
        <!-- マークダウンファイル表示部分 -->
          <article>
            <h1>{{ article.title }}</h1>
            <nuxt-content :document="article" />
          </article>
        </v-container>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  // contentファイル取得部分
  async asyncData ({ $content }) {
    const article = await $content('articles', 'sample').fetch()
    return { article }
  }
}
</script>

表示確認

先ほどリンクを修正したTest Blog Pageへアクセスすると、
sample.mdのbody部分の内容がマークダウンで表示されていることが確認できます👍
※見づらいのでダークモードをOFFにしました
→nuxt.config.jsのvuetify.theme.darkをfalseにするとlightモードで動作します。

次回

今回はここまでにします！
今回はとりあえず、サンプルのマークダウンファイルの表示をさせるというところがテーマでしたが、
実際には各記事ごとにページが用意されている必要があります。
なので、次回は記事一覧のページ作成と、記事ごとの動的なページ遷移処理の作成を紹介していきます🙋‍♂️