質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Q&A

0回答

920閲覧

Nuxt.jsとContentfulで構築したブログでカテゴリ別のページを作成したい

asasaas

総合スコア26

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

0グッド

0クリップ

投稿2020/11/30 08:13

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"がカテゴリのコンテンツモデルと一致しているものに絞り込むことで,特定のカテゴリを表示することはできます.
カテゴリごとに動的に絞り込むにはここを変更する必要があると思いますが,良い方法がわかりません.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問