Nuxt3とmicroCMSで作るブログシリーズの６番目の記事です。
今回はタグでの絞り込みを実装していきます。
ルートの追加
まずは、タグで絞り込まれた場合のルートを追加します。
階層が深いですが、pagesディレクトリにtags→[tagId]→page→[id].vueと作成します。
<!-- src/pages/tags/[tagId]/page/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const page = Number(route.params.id || 1)
const tagId = String(route.params.tagId || '')
</script>
<template>
<Home :page="page" :tagId="tagId" />
</template>
こうしておくことで、例えば/tag/my-pretty-tag/page/1にアクセスされた際に、route.params.tagIdとすればmy-pretty-tagというタグIDが取り出せるようになります。
タグ一覧取得API
server/api配下に作成していきます。
// src/server/api/tagList.ts
import client from './client'
import { Tag } from '../../types/blog'
export default defineEventHandler(async (event) => {
// これ以上は増えない、という値
const queries = {
limit: 100,
}
const data = await client.getList<Tag>({
endpoint: 'tag',
queries: queries
})
return data
})
記事一覧と違ってタグは基本的にすべて表示させます。
なので、limitはこれより増えることはないだろう、という値を設定しています。
タグ一覧コンポーネンツ
次にTags.vueコンポーネンツを作成していきます。
<!-- src/components/Tags.vue -->
<script setup lang="ts">
import { Tag } from '../types/blog';
type Props = {
tags: Tag[];
selectedTagId: string | undefined;
}
const { tags, selectedTagId } = defineProps<Props>();
function getClass(tagId: string) {
if (tagId == selectedTagId) return 'active'
return 'link'
}
</script>
<template>
<div class="wrapper">
<h1 class="pageTitle">タグ</h1>
<ul>
<li v-for="tag in tags" :key="tag.id" class="list">
<NuxtLink :to="`/tags/${tag.id}/page/1`" :class="getClass(tag.id)">
{{ tag.name }}
</NuxtLink>
</li>
</ul>
</div>
</template>
<style scoped>
.wrapper {
padding: 20px 0;
}
.pageTitle {
font-size: 2rem;
font-weight: bold;
color: #5ba9f7;
background-color: #c8e4ff;
padding: 6px 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.list {
border-bottom: 1px solid #eee;
list-style-type: none;
}
.link,
.active {
display: block;
padding: 10px;
color: #888;
font-size: 1.6rem;
}
.active {
color: #5ba9f7;
}
</style>
タグ一覧と選択中のタグIDを親から受け取り、リンクを表示させるだけのシンプルな作りです。
選択中のタグとそうでない場合でクラスを変えて、どのタグを選択しているか色で表示するようにしています。
function getClass(tagId: string) {
if (tagId == selectedTagId) return 'active'
return 'link'
}
Home.vueの更新
次にHome.vueを更新していきます。
追加でやりたいことは以下の２点です。
- tagありのルーティングから呼ばれたときは記事一覧を絞り込む
- tag一覧を取得してTagsに渡す
<!-- src/components.Home.vue -->
<script setup lang="ts">
import { MicroCMSQueries } from 'microcms-js-sdk';
import { BLOG_PER_PAGE } from '../settings/siteSettings';
type Props = {
page: number,
// オプショナルで追加
tagId?: string
}
const { page, tagId } = defineProps<Props>()
const limit = BLOG_PER_PAGE
const queries: MicroCMSQueries = {
limit: limit,
offset: (page - 1) * limit,
}
//tagIdを渡されているときはqueriesに加える
if (tagId) {
queries.filters = `tag[contains]${tagId}`
}
const { data: posts } = await useFetch('/api/postList', { params: queries })
// 追加 タグ一覧の取得
const { data: tags } = await useFetch('/api/tagList')
const numPages = Math.ceil(posts.value.totalCount / limit)
</script>
<template>
<div>
<div class="divider">
<section class="container">
<PostList :posts="posts.contents" />
</section>
<aside class="aside">
<SearchForm />
<!-- 追加 -->
<Tags :tags="tags.contents" :selectedTagId="tagId" />
</aside>
</div>
<Pagination :numPages="numPages" :current="page" />
</div>
</template>
先ほど作成したタグ一覧コンポーネントを配置しつつ、URLからタグIDを取得してparamに加えるようにしています。
タグIDが存在しないこともあるのでif分でparamに追加するようにしました。
//tagIdを渡されているときはqueriesに加える
if (tagId) {
queries.filters = `tag[contains]${tagId}`
}
次に記事一覧APIでもタグIDをキャッチできるようにしていきます。
この段階でタグでの絞り込みが行えるようになります。
タグmicroCMSを選択した状態
タグありのページネーション
だいたいできてきましたが、タグありのページネーションも追加する必要があります。
いまのままですと、タグを絞り込んだ状態で２ページ目に遷移した際に、絞り込みが解除されてしまいます。
これは簡単で現在のページネーションのコンポーネントを少し編集するだけです。
<!-- src/components/Pagination.vue -->
<script setup lang="ts">
type Props = {
numPages: number;
current: number;
// タグIDを受け取るようにする
selectedTagId?: string | undefined;
keyword?: string;
}
const { numPages, current, selectedTagId, keyword } = defineProps<Props>();
function getPath(p: number) {
// 追加 タグありのリンク
if (selectedTagId) return `tag/${selectedTagId}/page/${p}`
if (keyword) return `/search?q=${keyword}&page=${p}`
return `/page/${p}`
}
function getClass(page: number, current: number) {
if (page == current) return 'current'
return 'link'
}
</script>
あとは親からPaginationに対してタグIDを渡すだけです。
<!-- src/components/Home.vue -->
<template>
<div>
<div class="divider">
...
</div>
<Pagination :numPages="numPages" :current="page" :selectedTagId="selectedTagId" />
</div>
</template>
おわりに
こちらでこのシリーズを一旦終了とします。
Share