Contentful + nuxt のこのブログを、nuxt 2.9にしてTypeScriptにしてページネーションも追加した。

2019/10/03 12:24

結構前にnuxtが2.9がリリースされてTypeScript周りが色々変わってたので、このブログのnuxtのバージョンアップもかねてTypeScriptで書くようにしました。
その際にBlogページにページネーションを追加しました。
nuxt2.9のTypeScriptにするための諸々の設定などはすでにQiitaにいっぱいあるので省略します。
nuxt TypeScriptでContentfulを使っている場合についてかければと思います。

Contentfulのページングについて

公式のドキュメントのここ
に書いてあることが全てです。
skipに飛ばしたい数、limitに1ページ毎に表示したい数です。
こんな感じです。

実際のコード

まず、テンプレート部分。pugで記述しています。

ul.row.paging
  li(v-for='n in paging')
    a(:href='`?page=${n}`' :class='n == currentPage?`current`:``') {{n}}

次に、APIから記事を取得する部分です。

asyncData(context: Context) {
  const { query } = context
  const page = query.page
  const limit = 9
  let skip = 0
  if (Number(page) === 1 || page === void 0) {
    skip = 0
  } else {
    skip = (Number(page) - 1) * 2
  }
  return Promise.all([
    client.getEntries({
      content_type: '***',
      order: '-fields.publishDate',
      limit,
      skip
    })
  ])
    .then(([blogPosts]) => {
      return {
        blogs: blogPosts.items,
        paging: Math.ceil(blogPosts.total / limit),
        currentPage: page
      }
    })
    .catch(console.error)
}

と、してやればページングができます。
本当はaタグではなくてnuxt-link をつかった方がいいんだと思うんですが、そうするとasyncDataがページ移動時に動かないので、暫定的にこうしています。
何かいい方法がないか調査中です。

TypeScriptで記述していますが、僕自身詳しいわけではないのでもっといい書き方とかないかな、と勉強中です。
それでは。

人気記事