How to Limit Homepage Posts to 5 with Astro Pagination?

[NING3739]

Hello Astro Community,

Firstly, I'd like to express my gratitude to the developers for creating such a useful tool like Astro. I've been building my personal website using Astro and have encountered a challenge with pagination. I tried to implement pagination as suggested in the Astro official documentation, but my original blog posts disappeared. Here is my code snippet for index.astro, here is my respo:

import BaseLayout from "../layouts/BaseLayout.astro";
import BlogPost from "../components/BlogPost.astro";
import Pagination from "../components/Pagination.astro";

const allPosts = await Astro.glob("../pages/posts/*.md");
const sortedPosts = allPosts.sort(
  (a, b) =>
    new Date(b.frontmatter.pubDate).getTime() -
    new Date(a.frontmatter.pubDate).getTime()
);

export async function getStaticPaths({ paginate }) {
  return paginate(sortedPosts, {
    pageSize: 5, 
  });
}

const { page } = Astro.props;
const title = "織夢者筆記";

<BaseLayout title="織夢者筆記">
  {
    page && (
      <ul class="blogpost">
        {page.data.map((post) => (
          <BlogPost
            key={post.url}
            url={post.url}
            title={post.frontmatter.title}
            description={post.frontatter.description}
            image={post.frontmatter.image}
            pubDate={post.frontmatter.pubDate.slice(0, 10)}
          />
        ))}
      </ul>
    )
  }
  {page && <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />}
</BaseLayout>

<style>
  .blogpost {
    margin: 35px 0;
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin: 35px 0;
  }

  .pagination a {
    margin: 0 10px;
    text-decoration: none;
  }

  .pagination a.active {
    text-decoration: underline;
  }
</style>

Could someone please advise me on what might be going wrong and how to correctly limit the number of posts on the homepage to 5 using Astro's pagination feature?

Thanks in advance for your help!