第21回 記事一覧を10件表示に変更―投稿順ソートとページネーションを追加

第20回では、プライバシーポリシー、お問い合わせ先、記事の更新日表示、H1、faviconを変更した。

同じ作業の中で、記事を探すための一覧ページも変更している。

ゆまラボの記事数は30件まで増えた。カテゴリではWEB制作が24件、最初の連載「Astro＋Cloudflareでサイトを作る」も20件になっている。

これまでの記事一覧は全件を1ページに並べるだけだったため、記事が増えるほどページが長くなる。今回はTOPのセクション順も含めて、一覧側の表示方法を変更する。

TOPで「連載から読む」をカテゴリより上へ移動する#

修正前のTOPページは、ヒーローのあとにカテゴリ、その下に「連載から読む」が表示されていた。

連載記事が増えた現在は、単独の記事をカテゴリから探すだけでなく、第1回から順番に読む入口も必要になる。

そこでセクションの順番を変更した。

ヒーロー
↓
連載から読む
↓
カテゴリ

ヒーロー自体は変更していない。「連載から読む」をページ最上部へ移したわけでもなく、ヒーロー直後へ移動しただけになる。カテゴリも削除せず、その下に残している。

記事一覧は10件ずつ表示する#

修正前の/blog/は、30件の記事を同じページへそのまま並べていた。

ページ下部まで移動しても、ページを分けるUIはない。

今回は記事一覧を1ページ10件へ変更した。現在30記事あるので、/blog/は3ページになる。

一覧用の共通処理としてPaginatedArticleList.astroを追加し、1ページ10件、新しい順 / 古い順、最初 / 前へ / 次へ / 最後、現在ページ / 総ページ数を扱うようにしている。

総記事数の表示は30件のまま。1ページ目に10件しか見えていなくても、「10件の記事」へ変えることはしていない。

新しい順と古い順を切り替えられるようにする#

記事一覧の上部には並び順の選択を追加した。

/blog/とカテゴリ・サブカテゴリではpubDateを基準にしている。

新しい順
→ pubDate 降順

古い順
→ pubDate 昇順

更新日として追加したupdatedAtは、この並び替えには使っていない。

記事をあとから修正しただけで一覧の位置まで変わると投稿順として扱いにくいため、一覧の順序は公開日のままにしている。

古い順へ変更すると古い記事が先頭側へ移動する。

最初・前へ・次へ・最後を追加する#

1ページ10件にしたため、記事一覧の下部にはページ移動も追加した。

現在30記事なので、1ページ目では次のように表示される。

最初　前へ　1 / 3　次へ　最後

状態はURLのqueryへ保存する。

?page=2
?sort=oldest
?sort=oldest&page=2

このため、ページを移動した状態や古い順へ変更した状態をURLから復元できる。ブラウザの戻る・進むも確認している。

ソートを変更した場合は1ページ目へ戻す。不正なページ番号が指定された場合は有効な範囲へ補正するようにしている。

JavaScriptが無効な場合は静的に生成された1ページ目を表示する。クエリを使ったページ移動とソート状態の復元はJavaScript有効時に行う。

WEB制作カテゴリにも同じ一覧機能を入れる#

今回の変更は/blog/だけではない。

WEB制作カテゴリには24記事あるため、ここも全件表示するとかなり長くなる。

修正前は、カテゴリ説明、サブカテゴリ一覧、その下に記事が続く構成だった。

カテゴリ説明とサブカテゴリ一覧はそのまま残し、記事一覧部分だけに並び替えと10件表示を追加した。

WEB制作は24記事なので3ページになる。初期構築、デプロイ・インフラ、デザイン・UI、運用・改善といったサブカテゴリ一覧そのものはページネーションしない。その下の記事だけを10件ずつ表示する。サブカテゴリ詳細ページにも同じ処理を適用している。

連載はseriesOrderで並べる#

連載詳細も今回の対象にした。

修正前の「Astro＋Cloudflareでサイトを作る」は20記事あり、1ページですべて表示していた。

ここにも10件表示と並び替えを追加している。

ただし、連載は通常の記事一覧と条件が違う。/blog/やカテゴリでは公開日順でよいが、連載にはseriesOrderがある。途中には番外編も入っているため、既存のseriesOrderを連載内の順序として使う。

最初の表示確認では、古い順にしても第1回が一覧の先頭に来なかった。同じ公開日の記事が複数あり、pubDateだけでは連載順を表せないため、連載詳細だけ追加で修正した。

古い順
→ seriesOrder 昇順

新しい順
→ seriesOrder 降順

修正後の古い順では、第1回が先頭に表示される。

新しい順では現在の最後の連載記事から表示される。

seriesOrderの値そのものは変更していない。番外編を含む既存の内部順序、前後記事リンク、連載一覧の並びも維持している。

現在20記事なので、この連載は2ページになる。新しく始めた「サイトを作ったら ― 運用・SEO・SNS」はまだ1記事なので、ページネーションは表示されない。

一覧処理を共通化する#

一覧表示に関係する主な変更ファイルは以下。

src/components/PaginatedArticleList.astro
src/layouts/ArchiveLayout.astro
src/pages/blog/index.astro
src/pages/category/[...path].astro
src/pages/series/[key].astro
src/components/TaxonomyBrowse.astro
src/utils/posts.ts

10件表示や並び替えをページごとに別実装するのではなく、共通の一覧コンポーネントを使う形にしている。

ただし、すべての一覧を同じ条件にしたわけではない。

記事一覧
→ pubDate

カテゴリ・サブカテゴリ
→ pubDate

連載
→ seriesOrder

タグ詳細ページについては今回の対象外なので、既存の表示を変更していない。

ビルドとレスポンシブ表示を確認する#

一覧機能を追加したあと、次を実行した。

npx astro sync --force
npm run build
node scripts/verify.mjs
git diff --check

Astro buildは成功し、109ページを生成した。Pagefindは30記事、2,933語をインデックス化している。

/tags/のnoindexとサイトマップ除外、RSS、sitemap、パンくず、BreadcrumbList、前後記事リンクも既存の状態を維持した。

320px、360px、390px、768px、1280pxでは、TOPのセクション順、ソートUI、ページ移動UI、カテゴリページ、連載ページ、長い記事タイトル、ヘッダーナビを確認し、横方向のオーバーフローは発生していない。

クエリによるページング、ソート、ブラウザの戻る・進むも確認した。

記事一覧とTOPの変更点#

TOPでは「連載から読む」をカテゴリより上へ移動した。

記事一覧、カテゴリ・サブカテゴリ、連載詳細には10件表示と並び替え、ページ移動を追加した。

通常の記事一覧とカテゴリはpubDateを基準にし、連載だけはseriesOrderを使う。これで「古い順」を選んだときは第1回から、「新しい順」では現在の最後の連載記事から読める。

記事数が増えてきたことで、一覧を1ページへ全部並べるだけでは扱いにくくなってきた。今回は記事そのものではなく、増えた記事へ移動するための一覧側を変更した。