【Nuxt.js】ブログにカテゴリ検索機能を追加しよう

2021-10-26

はじめに

今日オープンした町田商店でラーメン大とライス大を頼みました。 家が近所だからってのをいいことに、半袖で散歩がてらでかけ、寒いな?ってなりながら 温かいもの食ったらいけるだろwwwwwwwって…

夜のいい時間に家系ラーメン大盛り、ライス大って学生かよって話ですよwwwww ふぅ。

思いの外ライス大がでかくて、アルバイトの子は どんぶりに漫画のように山盛りのご飯を食べる30歳がいると思っているんでしょうか。 食べれましたね。良かった。

帰り道、行きつけのセブンイレブンで「今日はスーツじゃないんですね。というか半袖って寒くないですか?www」 と言われ「めっちゃ寒いのでおでんください」という小粋なやり取りもやりつつ今日は良い一日だったなと。

ブログにカテゴリ検索機能を追加しよう

カテゴリ機能ぐらいないとやってらんないじゃないですか。 サクサクっと作っていきましょう。

いつもどおりgithubに置いとくので自由に使ってください。 github:kokodev

フォルダ構成

contentとpages直下にProgrammingというフォルダを作りましょう。

pages/Programmingとcontent/Programming

_slug.vueとindex.vueを作ります。 ファイルの中身は次の章移行で書いていきます。

記事を追加する

pages/Programmingの下に記事を追加します。 何も記事の中身は思いつかなかったので、こうありたいって願望を書いてます。

---
title: '4'
date: '2021-10-02 02:19'
description: 'Empower your NuxtJS application with @nuxt/content module write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
category: 'Vue'
---

プログラミングめっちゃ詳しい

カテゴリ一覧をのページを作る

テンプレート部分をこのように書きました。 :to=b.pathとして、記事フォルダに飛べるようにしています。 script部でこのpathにデータを詰め込む所を作ります。

<template>
 <v-container mt-50 pt-50>
    <v-row class="white" style="height: auto;">
    <v-col v-for="b in articles" :key="b.slug" cols=auto>

      <v-card
      max-height="400"
      max-width="400"
      min-height="400"
      min-width="400"
      elevation="3"
      class="mx-auto"
      outlined
      :to=b.path
      >

      <v-img
        class="white--text align-end"
        height="200px"
        src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
      >
        <v-card-title>{{b.title}}</v-card-title>
      </v-img>

      <v-card-subtitle class="pb-0">
        {{b.date}}
      </v-card-subtitle>

      <v-card-text class="text--primary">
        <div>{{b.description}}</div>
      </v-card-text>
      </v-card>
      </v-col>
    </v-row>
 </v-container>  
</template>
<script>
export default {
  data(){
    return {
      path : this.$route.path ,
    }
  },
 async asyncData ({ $content }) {
   let query = $content('Programming')
   .sortBy('date', 'desc')
   const articles = await query.fetch()
   return {
      articles
   }
  }
}
</script>
data(){
  return {
    path : this.$route.path ,
  }
},

path変数を作って詰め込みました。 $contentの中身はProgrammingというカテゴリ名を取得するようにしています。 Programmingフォルダ内の記事だけが検索されるように作っています。

記事データ取得部分を作る

pages/Programming/_slug.vueを作りこのように記載します。 特筆する部分はないかと思います。

<template>
  <article>
    <nuxt-content :document="article" />
  </article>
</template>

<script>
  export default {
    async asyncData({ $content, params }) {
      const article = await $content('Programming', params.slug).fetch()
      return { article }
    }
  }
</script>

各カテゴリのページにアクセスするやつを作ろう

componentsフォルダにCategory.vueを作ります。

Categoryっていうバカでかい文字と、 カテゴリへのリンクボタンを作ります。 ボタンが押されたときのリンク先には、カテゴリとしてフォルダを用意した名前で記載するといいでしょう。

<template>
  <header>
    <v-card color="basil">
      <v-card-title class="text-center justify-center py-6">
        <h3 class="font-weight-bold text-h2 basil--text">
          Category
        </h3>

        <v-btn value="scrap" to="/Programming">
          <span>scrap</span>
          <v-icon>mdi-account</v-icon>
        </v-btn>

      </v-card-title>

    </v-card>
  </header>
</template>

Categoryを全ページに跨るようにおきましょう。

layouts/defaultsを編集する こんな感じです。

<template>
  <v-app dark>
    <v-main>
      <v-container>
        <Header />
        <Breadcrumbs />
        <Category />
        <Nuxt />
      </v-container>
     </v-main>

    <v-footer
      :absolute="!fixed"
      app
    >
      <span>© {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

結果

カテゴリの横にあるScrapというボタンを押した画面です。

Programmingフォッルダに作った記事だけが表示されているはずです。 カテゴリの枠がクソでかいけど、まぁCSSとかいじってください。

まとめ

少しずつブログとして必要な要素が盛り込まれてきたんじゃないでしょうか。 この調子で進めていきましょう!!! あと全く関係ないですが、ラーメンが美味しい季節になってきましたね。 コロナで潰れてしまった店も多くあるのですが、今ある店を守るように皆さん通いましょう。 推しの店を守りましょう。そして美味しい店があったら教えて下さい。