Astro博客首页复用分页首页内容：如何获取分页数据？

方案1：提取公共逻辑+复用UI组件（推荐） #

这种方法能保证首页与分页第一页的数据逻辑、UI完全一致，同时避免代码重复。

步骤1：创建工具函数统一处理博客数据 #

在项目中新增src/utils/blog.js，抽离获取博客、计算分页的通用逻辑：

export const itemsPerPage = 12;

// 获取所有博客文章
export async function getAllBlogPosts() {
  return await Astro.glob('../pages/blog/*.md');
}

// 计算指定页码的分页数据
export function calculatePaginatedData(blogs, pageNum = 1) {
  const total = blogs.length;
  const start = (pageNum - 1) * itemsPerPage;
  const end = Math.min(start + itemsPerPage, total);
  const data = blogs.slice(start, end);
  return {
    start,
    end,
    total,
    data,
    currentPage: pageNum,
    lastPage: Math.ceil(total / itemsPerPage)
  };
}

步骤2：改造分页页面[page].astro #

引入工具函数简化原有逻辑，同时复用UI组件：

---
import { itemsPerPage, getAllBlogPosts } from '../../utils/blog.js';
import BlogList from '../../components/BlogList.astro';

export async function getStaticPaths({ paginate }) {
  const allBlogs = await getAllBlogPosts();
  return paginate(allBlogs, { pageSize: itemsPerPage });
}

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

<BlogList page={page} />

步骤3：实现首页index.astro #

调用工具函数获取第一页数据，复用同一个UI组件：

---
import { getAllBlogPosts, calculatePaginatedData } from '../utils/blog.js';
import BlogList from '../components/BlogList.astro';

const allBlogs = await getAllBlogPosts();
const page = calculatePaginatedData(allBlogs, 1);
---

<BlogList page={page} />

步骤4：创建通用UI组件BlogList.astro #

把博客列表、分页导航抽成独立组件，确保首页和分页页的UI完全一致：

---
export interface Props {
  page: {
    start: number;
    end: number;
    total: number;
    data: Array<{
      url: string;
      frontmatter: { title: string; date: string };
      excerpt: string;
    }>;
    currentPage: number;
    lastPage: number;
  };
}

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

<div class="blog-container">
  <!-- 博客列表 -->
  <div class="blog-list">
    {page.data.map(post => (
      <article key={post.url} class="blog-post">
        <h2><a href={post.url}>{post.frontmatter.title}</a></h2>
        <time>{post.frontmatter.date}</time>
        <p>{post.excerpt}</p>
      </article>
    ))}
  </div>

  <!-- 分页导航 -->
  <div class="pagination">
    <p>共 {page.total} 篇文章，当前显示第 {page.start + 1}-{page.end} 篇</p>
    <nav>
      {page.currentPage > 1 && <a href={`/blog/${page.currentPage - 1}`}>上一页</a>}
      {Array.from({ length: page.lastPage }, (_, i) => i + 1).map(num => (
        <a 
          key={num} 
          href={num === 1 ? '/blog' : `/blog/${num}`}
          class={num === page.currentPage ? 'active' : ''}
        >
          {num}
        </a>
      ))}
      {page.currentPage < page.lastPage && <a href={`/blog/${page.currentPage + 1}`}>下一页</a>}
    </nav>
  </div>
</div>

方案2：静态重定向（适合仅跳转场景） #

如果不需要/blog展示独立内容，仅需引导用户跳转到/blog/1，可以在index.astro中添加meta重定向：

---
---
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="0; URL='/blog/1'" />
</head>
<body>
  <p>正在跳转到博客首页... <a href="/blog/1">点击这里直接访问</a></p>
</body>
</html>

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