Contentfulで作成したブログの記事をカテゴリ別のページで表示したいです.
ブログ記事のコンテンツモデルにはreferenceでカテゴリータグを参照しており,そのカテゴリータグのコンテンツモデルに設定した文字列がURLに入るようにルーティングしています.
例)
ブログ記事1:ブログ用URL→test カテゴリ→プログラミング
カテゴリ(プログラミング):カテゴリ用URL→programming
ブログ記事1のURL: ../programming/test
//ディレクトリ構成 pages/ ├ index.vue //TOP └ _blog/ ├ index.vue //カテゴリページ └ _slug.vue //記事ページ
ここで,カテゴリのページにアクセスした際(../programming)にそのカテゴリの記事一覧のページにするようにしたいのですが,良い方法がわかりません.
js
1//_blog/index.vue 2 3<template> 4 <div> 5 <h2>{{ posts[0].fields.tag.fields.tag }}</h2> 6 <section class="p-posts"> 7 <Card 8 v-for="post in posts" 9 :key="post.fields.slug" 10 :title="post.fields.title" 11 :slug="post.fields.slug" 12 :header-image="post.fields.headerImage" 13 :published-at="post.fields.publishedAt" 14 :tag="post.fields.tag.fields.tag" 15 :tag-slug="post.fields.tag.fields.tagSlug" 16 /> 17 </section> 18 </div> 19</template> 20 21<script> 22import Card from "~/components/Card.vue"; 23import { createClient } from "~/plugins/contentful.js"; 24 25const client = createClient(); 26 27export default { 28 components: { 29 Card 30 }, 31 async asyncData({ env, params }) { 32 return await client 33 .getEntries({ 34 content_type: env.CTF_BLOG_POST_TYPE_ID, 35 order: "-fields.publishedAt", 36 "fields.tag.sys.id": "29aaVZBrUu3EjY9sRbX7ud" 37 }) 38 .then(entries => { 39 return { 40 posts: entries.items, 41 }; 42 }) 43 .catch(console.error); 44 } 45 46}; 47</script> 48
現状は,記事データ取得の際に,"fields.tag.sys.id"がカテゴリのコンテンツモデルと一致しているものに絞り込むことで,特定のカテゴリを表示することはできます.
カテゴリごとに動的に絞り込むにはここを変更する必要があると思いますが,良い方法がわかりません.
あなたの回答
tips
プレビュー