Astro博客年份归档页面实现分页的方法咨询

一、是否必须用[page].astro或[...page].astro实现分页？ #

不需要。Astro的分页功能不绑定特定文件名，只要在页面组件里正确调用Astro的paginate() API，不管是[year].astro还是其他动态路由格式，都能实现分页。

二、解决[year].astro调用分页组件失败的具体步骤 #

1. 在[year].astro中完成年份筛选与分页初始化 #

先从路由参数拿到年份，筛选对应年份的文章，再传入分页API处理：

---
import { getCollection } from 'astro:content';
import Pagination from '../components/Pagination.astro';

// 获取路由中的年份参数
const { year } = Astro.params;
// 拉取所有博客文章
const allPosts = await getCollection('blog');
// 筛选当前年份的文章（假设文章frontmatter有date字段）
const yearPosts = allPosts.filter(post => {
  const postYear = new Date(post.data.date).getFullYear().toString();
  return postYear === year;
});

// 对筛选后的文章分页，每页显示10篇（可自行调整数量）
const { page, data } = await Astro.paginate(yearPosts, { pageSize: 10 });
---

<!-- 渲染当前页文章列表 -->
<h1>{year}年归档文章</h1>
<ul>
  {data.map(post => (
    <li>
      <a href={`/blog/${post.slug}`}>{post.data.title}</a>
      <time>{post.data.date}</time>
    </li>
  ))}
</ul>

<!-- 传入分页组件所需的参数 -->
<Pagination 
  currentPage={page.currentPage} 
  totalPages={page.totalPages} 
  basePath={`/blog/${year}`} 
/>

2. 调整分页组件的链接生成逻辑 #

确保分页组件能基于传入的年份路径生成分页链接，比如原本的组件可能默认用/blog/[page]，现在要改成/blog/${year}/${page}：

---
export interface Props {
  currentPage: number;
  totalPages: number;
  basePath: string;
}

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

<div class="pagination">
  {currentPage > 1 && (
    <a href={`${basePath}/${currentPage - 1}`}>上一页</a>
  )}
  
  {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
    <a 
      href={`${basePath}/${pageNum}`} 
      class={pageNum === currentPage ? 'active' : ''}
    >
      {pageNum}
    </a>
  ))}
  
  {currentPage < totalPages && (
    <a href={`${basePath}/${currentPage + 1}`}>下一页</a>
  )}
</div>

3. 确认路由优先级 #

如果博客根目录下有[page].astro，不用担心路由冲突——Astro会优先匹配更具体的路径（比如blog/2022/1比blog/1更具体），年归档的分页路径会被正确识别。

4. 测试验证 #

完成后访问/blog/2022/1、/blog/2022/2等路径，检查文章列表是否正确、分页链接是否能正常跳转。

内容的提问来源于stack exchange，提问作者Santanu Misra