【Nuxt.js】ブログにカテゴリ検索機能を追加しよう
はじめに
Nuxt.jsを使ってブログを作成し、デザインやレイアウトを整えることで、より魅力的なブログに仕上げることができます。この記事では、VuetifyのGrid systemを使用して、カテゴリやコンポーネントの配置を整える方法を紹介しています。これらの手法を利用することで、効果的なブログデザインを実現できます。
近況
今日オープンした町田商店でラーメン大とライス大を頼みました。 家が近所だからってのをいいことに、半袖で散歩がてらでかけ、寒いな？ってなりながら温かいもの食ったらいけるだろｗｗｗｗｗｗｗって…
夜のいい時間に家系ラーメン大盛り、ライス大って学生かよって話ですよｗｗｗｗｗ ふぅ。
思いの外ライス大がでかくて、アルバイトの子はどんぶりに漫画のように山盛りのご飯を食べる30歳がいると思っているんでしょうか。 食べれましたね。良かった。
帰り道、行きつけのセブンイレブンで「今日はスーツじゃないんですね。というか半袖って寒くないですか？ｗｗｗ」と言われ「めっちゃ寒いのでおでんください」という小粋なやり取りもやりつつ今日は良い一日だったなと。
ブログにカテゴリ検索機能を追加しよう
カテゴリ機能ぐらいないとやってらんないじゃないですか。 サクサクっと作っていきましょう。
いつもどおりgithubに置いとくので自由に使ってください。 github:kokodev
フォルダ構成
contentとpages直下にProgrammingというフォルダを作りましょう。
pages/Programmingとcontent/Programming
_slug.vueとindex.vueを作ります。 ファイルの中身は次の章移行で書いていきます。
記事を追加する
pages/Programmingの下に記事を追加します。 何も記事の中身は思いつかなかったので、こうありたいって願望を書いてます。
プログラミングめっちゃ詳しい
カテゴリ一覧をのページを作る
テンプレート部分をこのように書きました。 :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とかいじってください。
まとめ
Nuxt.jsとVuetifyのGrid systemを使用することで、簡単にブログのレイアウトを整えることができます。今回の記事では、カテゴリやコンポーネントの配置を調整し、ブログの見た目を大幅に改善しました。これらの方法を活用することで、魅力的なブログデザインを実現できます。
少しずつブログとして必要な要素が盛り込まれてきたんじゃないでしょうか。 この調子で進めていきましょう！！！ あと全く関係ないですが、ラーメンが美味しい季節になってきましたね。 コロナで潰れてしまった店も多くあるのですが、今ある店を守るように皆さん通いましょう。 推しの店を守りましょう。そして美味しい店があったら教えて下さい。
amazon.co.jp
