ブログ構築 6. カテゴリーページの構築 #02
2019年10月19日に更新

【Nuxt.js × Contentful】ブログ記事に関連付くカテゴリーを表示する

今回達成すること

今回は記事に関連付くカテゴリーを表示していきます。

トップページ には

  1. 各記事に関連付くカテゴリーを表示し、
  2. カテゴリーごとにチップの色を変更する

2019-10-11 14-05-12

記事ページには

  1. パンくずリストにカテゴリーのリンクを表示します

2019-10-11 14-06-54

Contentfulの関連付けの方法は前回の記事を参考にしてください。

【Contentful】カテゴリーモデルとブログ記事モデルの関連付け

記事に関連づいたカテゴリーはどこに存在するのか

まず先にContentfulから返されるJSONデータを確認しましょう。

この画像は、console.log で記事のオブジェクトを表示したものです。

2019-10-11 12-26-25

カテゴリーが存在する場所

post.fieldsに新たにcategoryと言うオブジェクトが作られていますね。

その中にカテゴリーの情報が入っています。

category.sysには、idフィールドが存在します。

このidフィールドは一意性(重複しない値)なので、カテゴリー検索に利用できます。

カテゴリーを表示する

結果、カテゴリーを表示するには以下のようになります。

post.fields.category.fields.name       // カテゴリー名
post.fields.category.fields.slug       // Path
post.fields.category.fields.sort       // 並び順
post.fields.category.fields.definition // カテゴリーの詳細

index.vueにカテゴリーを表示する

それではカテゴリーを表示しましょう。

まず、pages/index.vueの記事一覧にカテゴリー名を表示します。

pages/index.vue
<template>
	...
  <v-img
    :src="setEyeCatch(post).url"
    :alt="setEyeCatch(post).title"
    :aspect-ratio="16/9"
    max-height="200"
    class="white--text"
  >
    
   	<!-- 追記 -->
    <v-card-text>
      <v-chip
        small
        dark
        :color="categoryColor(post.fields.category)"
        to="#"
        class="font-weight-bold"
      >
        {{ post.fields.category.fields.name }}
      </v-chip>
    </v-card-text>
    <!-- 追記終了 -->
    
  </v-img>

  <!-- 追記 -->
  <v-card-title>
    <nuxt-link
      :to="linkTo('posts', post)"
    >
      {{ post.fields.title }}
    </nuxt-link>
  </v-card-title>
  <!-- 追記終了 -->

 ...
</template>

<script>
export default {

  computed: {
    
		// 追記
    categoryColor() {
      return (category) => {
        switch (category.fields.name) {
          case 'RubyOnRails': return '#C73A31'
          case 'Nuxt.js': return '#236244'
          case 'コラム': return 'primary'
          default: return 'grey darken-3'
        }
      }
    }
    // 追記終了
  }
}
</script>

  • :color="categoryColor(post.fields.category)"

    Vuetifyのchipコンポーネントに渡す色に算出プロパティを渡しています。

    このcategoryColorは引数の カテゴリー名によって、返す色が変化します。

  • 記事のタイトル

    記事タイトルは、画像の下に表示するようにしました。

    同時にnuxt-linkタグで囲み、記事ページに飛べるのリンクをつけました。

  • categoryColor()

    返す色は、Vuetifyのカラー名、もしくはcssのカラーコードを設定することが出来ます。

    お好きな色を設定してください。

    Vuetify Color

index.vueを確認してみる

Nuxt.jsを起動して"http://localhost:3000/"にアクセスしてみてください。

このように表示されれば成功です。

2019-10-11 14-05-12

posts/_slug.vueにカテゴリーを表示する

続いて、記事ページも表示しましょう。

今回は、Vuetifyのv-breadcrumbsコンポーネントを使って、パンくずリスト風に表示します。

pages/posts/_slug.vue
<template>
  <v-container fluid>
    <template v-if="currentPost">
      
      <!-- 追記 -->
      <v-breadcrumbs :items="breadcrumbs">
        <template #divider>
          <v-icon>mdi-chevron-right</v-icon>
        </template>
      </v-breadcrumbs>
      <!-- 追記終了 -->
      
</template>

<script>

export default {

  computed: {
		
    // 追記
    breadcrumbs() {
      const category = this.currentPost.fields.category
      return [
        { text: 'ホーム', to: '/' },
        { text: category.fields.name, to: '#' }
      ]
    }
    // 追記終了
  }
}
</script>

  • パンくずリストの区切り文字

    今回はicon mdi-chevron-right を渡していますが、これは自由に変更することが出来ます。

    例えば「/」にする場合は、dividerに文字列を渡します。

パンくずリストの区切り文字を「/」にする場合
<v-breadcrumbs :items="items" divider="/"></v-breadcrumbs>
  • breadcrumbs()

    各ナビのオブジェクトが格納された配列を返します。

    このオブジェクトには、他のプロパティも渡せます。↓

    Breadcrumbs - Vuetify

記事ページの確認

タイトル上にこのように表示されたら成功です。

2019-10-11 14-06-54

まだリンクは機能していませんが、次回、カテゴリーページを作成した後に飛べるように設定します。

変更をコミットしとく

ここまでの変更をコミットして、本番環境でも確認しましょう。

$ git commit -am "show_category_name"
$ git push

まとめ

今回は、記事に関連付くカテゴリーを表示していきました。

無事表示できましたか?

エラーが発生して身動きが取れないようであればTwitterからご連絡ください。

これでやっとブログサイトっぽくなってきましたね。

次回は?

さて次回は、 カテゴリーページを作成して、そのカテゴリーの記事一覧を表示します。

そして、今回表示したカテゴリー名にもリンクをつけていきましょう。

それではまた。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告