Astroにページネーションをつけてみる

Astroで作成中のサイトの一覧ページに表示するページネーションのコンポーネントを作ってみました。

現在表示中のページの前後にページ番号を表示するよくあるタイプのものです（ページの一番最後の方にイメージがあります）。

これからAstroを触ってみようかと思っている方の参考になれば幸いです。

ソースコード

PageNav.astro

---
interface Props {
    max_page: string;   // 最大ページ数
    cur_page: string;   // 現在表示中のページ（1～）
    base_url: string;   // リンク先のベースURL（末尾の'/'は不要）
    nav_size?: string;  //  カレントの前後に何ブロック表示するか（デフォルト'2'）
}
const { cur_page, max_page, base_url, nav_size = "2" } = Astro.props;

let page_list: string[] = [];

for (let i = parseInt(nav_size); i > 0; i--) {
    let pno = parseInt(cur_page) - i;
    if (pno > 0) {
        page_list.push(pno.toString());
    }
}
page_list.push(cur_page);
for (let i = 1; i <= parseInt(nav_size); i++) {
    let pno = parseInt(cur_page) + i;
    if (pno <= parseInt(max_page)) {
        page_list.push(pno.toString());
    }
}
---

<ul class="page-navi">
    {
        page_list.map((pno: string) => (
   pno == cur_page ? (
   <li class="cur-page">{pno}</li>
   ) : (
   <li><a href=`${base_url}/${pno}/`>{pno}</a></li>
   )
        ))
    }
</ul>


<style lang="scss">
  ul.page-navi {
  display: flex;
  justify-content: center;
  margin: 3em 0 0 0;
  padding: 0 0;

  li {
   display: block;
   text-align: center;
   list-style-type: none;
   border: #cfcfcf 1px solid;
   border-radius: 4px;
   width: 3em;
   margin-right: 2px;

   font-size: 0.9em;
   &.cur-page {
    background-color: #3d4d8d;
    color: #cfcfcf;
    font-weight: 700;
   }

   a {
    display: block;
    text-decoration: none;
    color: #3d4d8d;

    &:hover {
     font-weight: 700;
     color: #fffffe;
     background-color: #bd5d6d;
    }
   }
  }
 }
</style>

サンプル

こんな感じで使います。

<PageNavi cur_page="3" max_page="5" base_url="/blog" />

表示イメージはこちら。