src/pages/[...page].astro

---
import type { GetStaticPaths } from "astro";
import Pagination from "@/components/common/Pagination.astro";
import PostPage from "@/components/layout/PostPage.astro";
import { siteConfig } from "@/config";
import MainGridLayout from "@/layouts/MainGridLayout.astro";
import { getSortedPosts } from "@/utils/content-utils";
export const getStaticPaths = (async ({ paginate }) => {
	const allBlogPosts = await getSortedPosts();
	// 使用配置中的文章数量
	const pageSize = siteConfig.pagination.postsPerPage;
	return paginate(allBlogPosts, { pageSize });
}) satisfies GetStaticPaths;
// https://github.com/withastro/astro/issues/6507#issuecomment-1489916992

const { page } = Astro.props;

const len = page.data.length;
---

<MainGridLayout>
  <PostPage page={page} />
  {
    page.total > page.size && (
      <Pagination
        class="mx-auto onload-animation"
        page={page}
        style={`animation-delay: calc(var(--content-delay) + ${len * 50}ms)`}
      />
    )
  }
</MainGridLayout>

<script>
  // 响应式分页处理脚本
  document.addEventListener("DOMContentLoaded", function () {
    // 如果启用了响应式分页，添加相应的CSS类
    const responsiveEnabled = true; // ${siteConfig.pagination.responsive}
    if (responsiveEnabled) {
      const deviceType = getDeviceType();
      document.body.classList.add(`device-${deviceType}`);

      // 监听窗口大小变化
      let resizeTimeout: any;
      window.addEventListener("resize", function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
          const newDeviceType = getDeviceType();
          const currentDeviceType = document.body.className.match(
            /device-(mobile|tablet|desktop)/
          )?.[1];

          if (currentDeviceType !== newDeviceType) {
            document.body.classList.remove(`device-${currentDeviceType}`);
            document.body.classList.add(`device-${newDeviceType}`);
          }
        }, 250);
      });
    }
  });

  function getDeviceType() {
    if (typeof window === "undefined") return "desktop";

    const width = window.innerWidth;
    if (width < 768) return "mobile";
    if (width < 1024) return "tablet";
    return "desktop";
  }
</script>