File size: 2,321 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | ---
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>
|