Astro.js中内容拆分与分页实现方案咨询

你的现有[...slug].astro是用来渲染单个页面详情的，分页功能需要单独做一个列表页来展示分页后的页面集合，同时保留原文件处理单个页面的逻辑。以下是具体实现步骤和代码：

1. 保留原单个页面文件（[...slug].astro） #

原文件无需修改，继续负责根据slug渲染单个页面内容。

2. 创建分页列表页面（比如src/pages/pages/[page].astro） #

这个文件将处理分页逻辑，生成所有分页路径，并渲染每页的页面列表：

---
export const prerender = true;
import { type CollectionEntry, getCollection } from 'astro:content';
// 可自定义列表项组件，也可直接在页面内渲染
import PageListItem from '../../components/PageListItem.astro';

// 每页展示的页面数量，可按需调整
const PER_PAGE = 5;

export async function getStaticPaths() {
  // 获取pages集合下的所有内容
  const allPages = await getCollection('pages');
  // 计算总页数
  const totalPages = Math.ceil(allPages.length / PER_PAGE);

  // 生成每个分页的静态路径
  return Array.from({ length: totalPages }, (_, i) => {
    const pageNumber = i + 1;
    // 截取当前页对应的页面数据
    const paginatedPages = allPages.slice(
      (pageNumber - 1) * PER_PAGE,
      pageNumber * PER_PAGE
    );

    return {
      params: { page: pageNumber.toString() },
      props: {
        pages: paginatedPages,
        currentPage: pageNumber,
        totalPages,
        perPage: PER_PAGE,
      },
    };
  });
}

// 定义props类型
type Props = {
  pages: CollectionEntry<'pages'>[];
  currentPage: number;
  totalPages: number;
  perPage: number;
};

const { pages, currentPage, totalPages } = Astro.props;
---

<!-- 页面列表区域 -->
<div class="page-list">
  <h1>页面列表</h1>
  {pages.map(page => (
    <PageListItem key={page.slug} page={page} />
  ))}
</div>

<!-- 分页导航区域 -->
<div class="pagination">
  <!-- 上一页按钮 -->
  {currentPage > 1 && (
    <a href={`/pages/${currentPage - 1}`}>上一页</a>
  )}

  <!-- 页码按钮组 -->
  {Array.from({ length: totalPages }, (_, i) => {
    const pageNum = i + 1;
    return (
      <a 
        href={`/pages/${pageNum}`}
        class={pageNum === currentPage ? 'active' : ''}
        key={pageNum}
      >
        {pageNum}
      </a>
    );
  })}

  <!-- 下一页按钮 -->
  {currentPage < totalPages && (
    <a href={`/pages/${currentPage + 1}`}>下一页</a>
  )}
</div>

3. 可选：创建列表项组件（src/components/PageListItem.astro） #

用来复用列表项的渲染逻辑，提升代码可维护性：

---
import { type CollectionEntry } from 'astro:content';

type Props = {
  page: CollectionEntry<'pages'>;
};

const { page } = Astro.props;
---

<article class="page-item">
  <h2><a href={`/${page.slug}`}>{page.data.title}</a></h2>
  <p>{page.data.description}</p>
  <time>{page.data.date}</time>
</article>

关键逻辑说明 #

• 分页数据截取：通过slice方法从全量页面数据中提取当前页的内容，结合总数据量和每页数量计算总页数。
• 静态路径生成：在getStaticPaths中循环生成每个分页的路径，确保预渲染所有分页页面，符合静态站点的特性。
• 分页导航控制：根据当前页和总页数判断上/下一页是否可用，渲染页码按钮并标记当前激活页。

内容的提问来源于stack exchange，提问作者smoothcode onyx