/pages/blog/[...page].astro

---
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
import Pagination from "@components/Pagination.astro";
import { getAllBlogList } from "@libs/microcms";
type Props = InferGetStaticPropsType<typeof getStaticPaths>;

export const getStaticPaths = (async ({ paginate }) => {
  const allPosts = await getAllBlogList();  // 全記事取得
  return paginate(allPosts, { pageSize: 1 });  // pageSize=1ページあたりの件数・わかりやすくするため1件にしてます
}) satisfies GetStaticPaths;

const { page } = Astro.props;
---
～略：記事一覧
<Pagination page={page} baseUrl="/blog" />

Pagination.astro

---
const { page, baseUrl } = Astro.props;
const { lastPage, currentPage, url } = page;
const paginationOptions = {
  alwaysShowPagination: true, // ページネーションを常に表示するか
  showFirst: true,  // 「最初のページ」ボタンを表示するか
  showLast: true,  // 「最後のページ」ボタンを表示するか
  showItems: 5, // 表示するページ番号の最大数（0で全ページ表示、偶数指定時は自動で-1して奇数に調整）
  showIndicator: true,  // 現在のページを示すインジケーターを表示するか
  showDots: true, // ページ数が多い場合に「...」を表示するか
  dot: "...", // ドットの表記文字列
};
// 略
---

Pagination.astro（全コード）

---
const { page, baseUrl } = Astro.props;
const { lastPage, currentPage, url } = page;
const paginationOptions = {
  alwaysShowPagination: true,
  showFirst: true,
  showLast: true,
  showItems: 5,
  showIndicator: true,
  showDots: true,
  dot: "...",
};
let {
  alwaysShowPagination,
  showFirst,
  showLast,
  showDots,
  showItems,
  showIndicator,
  dot,
} = paginationOptions;

// showItemsが偶数なら-1して奇数にする
if (showItems % 2 === 0 && showItems !== 0) {
  showItems -= 1;
}

const totalPages = lastPage;

// 表示するページ番号を計算
let startPage, endPage;
if (showItems === 0 || totalPages <= showItems) {
  startPage = 1;
  endPage = totalPages;
} else if (currentPage <= Math.floor(showItems / 2) + 1) {
  startPage = 1;
  endPage = showItems;
} else if (currentPage > totalPages - Math.floor(showItems / 2)) {
  startPage = totalPages - showItems + 1;
  endPage = totalPages;
} else {
  startPage = currentPage - Math.floor(showItems / 2);
  endPage = currentPage + Math.floor(showItems / 2);
}

let pageNumbers = [...Array(endPage - startPage + 1)].map(
  (_, i) => startPage + i
);

// dot機能の適用
if (showDots && totalPages >= showItems + 1 && showItems > 3) {
  if (startPage > 1) pageNumbers[1] = 0;
  if (endPage <= totalPages - 1) pageNumbers[pageNumbers.length - 2] = 0;

  // 1番目を1、items番目を最後のページにする
  pageNumbers[0] = 1;
  pageNumbers[pageNumbers.length - 1] = totalPages;
}

const getAriaLabel = (pageNum: number) =>
  pageNum !== currentPage
    ? `ページ ${pageNum}`
    : `現在のページ（ページ ${pageNum}）`;
---

{
  alwaysShowPagination || totalPages > 1 ? (
    <nav aria-label="ページネーション" class="pagination">
      {showIndicator && (
        <p class="indicator" aria-live="polite">
          {currentPage} / {totalPages}
        </p>
      )}
      <ul class="list">
        {showFirst && url.first && (
          <li class="item first">
            <a
              href={url.first}
              class="link"
              aria-label={`最初のページ（ページ 1）`}
            >
              &#171;
            </a>
          </li>
        )}
        {url.prev && (
          <li class="item prev">
            <a
              href={url.prev}
              class="link"
              aria-label={`前のページ（ページ ${currentPage - 1})`}
            >
              &#139;
            </a>
          </li>
        )}
        {pageNumbers.map((pageNum) => (
          <li class="item">
            {pageNum === 0 ? (
              <span class="dot" aria-hidden="true">
                {dot}
              </span>
            ) : (
              <a
                href={`${baseUrl}${pageNum > 1 ? `/${pageNum}` : ""}`}
                class:list={["link", pageNum === currentPage ? "current" : ""]}
                aria-current={pageNum === currentPage ? "page" : undefined}
                aria-label={getAriaLabel(pageNum)}
              >
                {pageNum}
              </a>
            )}
          </li>
        ))}
        {url.next && (
          <li class="item next">
            <a
              href={url.next}
              class="link"
              aria-label={`次のページ（ページ ${currentPage + 1})`}
            >
              &#155;
            </a>
          </li>
        )}
        {showLast && url.last && (
          <li class="item last">
            <a
              href={url.last}
              class="link"
              aria-label={`最後のページ（ページ ${totalPages}）`}
            >
              &#187;
            </a>
          </li>
        )}
      </ul>
    </nav>
  ) : null
}