microCMS+Nuxt.jsのブログ個別ページでの前後記事へのリンク設定

「_id.vue」 の <script>タグ全体は、下のような感じです。

<script>
import axios from 'axios'
export default {
 async asyncData({ $config, params, error }) {
   try {
     const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`, {
       headers: { 'X-API-KEY': $config.apiKey },
     })
     const links = await axios.get(
       `${$config.apiUrl}/blog/?limit=100
     &fields=id,title,`,
       {
         headers: { 'X-API-KEY': $config.apiKey },
       }
     )
     const index = links.data.contents.findIndex((content) => content.id === params.id)
     const prevLink = links.data.contents[index - 1];
     const nextLink = links.data.contents[index + 1];
     return {
       item: data,
       prev: prevLink,
       next: nextLink,
     }
   } catch (err) {
     error({
       errorCode: 404,
     })
   }
 },
 ・・・省略
 </script>


ちなみに、下では、個別記事(「_id.vue」 )自体の内容を取得しています。

const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`,


肝心なのは、下の箇所からです。

const links = await axios.get(
`${$config.apiUrl}/blog/?limit=100
&fields=id,title,`,

最大100件の記事(limit=100)の
各記事のidとtitleだけ(fields=id,title,)を取得し、定数 linksに代入。
※ 「 fields=id,title, 」 最後の「 ,(カンマ)」がないとtitleまで取得できなかったので、追加しています。


そして、

const index = links.data.contents.findIndex((content) => content.id === params.id)

定数 links の中から、現在のブログ個別ページのid名(params.id)と同じ idの配列インデックス番号を取り出して、定数 index に代入します。


そして、

const prevLink = links.data.contents[index - 1];
const nextLink = links.data.contents[index + 1];

定数 prevLink には、個別記事の前の記事のリンクとタイトル
定数 nextLink には、個別記事の次の記事のリンクとタイトルが入ってます。


「_id.vue」 <template>タグでは、

<template>
・・・省略・・・
<li v-if="prev">
<a :href="prev.id" rel="prev">{{ prev.title }}</a>
</li>
<li v-if="next">
<a :href="next.id" rel="next">{{ next.title }}</a>
</li>​
・・・省略・・・
</template>

上のようにしてます。

v-if="prev"、v-if="next"を設定してやることで、
最初のページの前の記事、最後のページの次の記事の
リンクがないことに対応させています。


この記事が気に入ったらサポートをしてみませんか?