Astro中如何用getCollection()获取多分类内容并实现分页？

核心思路 #

把原来硬编码的engineer集合名改成动态获取的分类参数，同时增加分类合法性校验，确保只处理你定义的三个分类，最终实现多分类帖子的详情渲染。

步骤1：调整路由结构（可选，按需选择） #

如果当前帖子详情页是/pages/[...slug].astro，建议改成/pages/[category]/[...slug].astro——这种结构能让路由参数明确区分category（分类）和帖子slug，逻辑更清晰。如果不想改动现有路由，就从slug数组里拆分分类和帖子名即可。

步骤2：修改详情页代码 #

以下分两种路由场景给出具体实现：

场景1：路由为/pages/[category]/[...slug].astro

---
import { getCollection } from 'astro:content';
import { AstroError, AstroErrorData } from 'astro';

// 预先生成所有分类下帖子的静态路径
export async function getStaticPaths() {
  const allowedCollections = ['engineer', 'eto', 'officer'];
  let allPaths = [];

  for (const collection of allowedCollections) {
    const posts = await getCollection(collection);
    const paths = posts.map(post => ({
      params: { category: collection, slug: post.slug },
    }));
    allPaths = [...allPaths, ...paths];
  }

  return allPaths;
}

// 获取当前路由参数
const { category, slug } = Astro.params;
const postSlug = Array.isArray(slug) ? slug[0] : slug;

// 校验分类合法性，非法分类直接返回404
const allowedCollections = ['engineer', 'eto', 'officer'];
if (!allowedCollections.includes(category)) {
  throw new AstroError(AstroErrorData.NotFound);
}

// 动态获取对应分类下的目标帖子
const post = await getCollection(category, ({ slug: itemSlug }) => {
  return itemSlug === postSlug;
});

// 帖子不存在时返回404
if (!post.length) {
  throw new AstroError(AstroErrorData.NotFound);
}

const { data } = post[0];
---

<!-- 帖子详情渲染区域 -->
<h1>{data.title}</h1>
<div class="post-content">{data.content}</div>
<!-- 其他需要展示的帖子字段，比如发布时间、标签等 -->

场景2：路由为/pages/[...slug].astro（slug数组格式为[category, postSlug]）

---
import { getCollection } from 'astro:content';
import { AstroError, AstroErrorData } from 'astro';

export async function getStaticPaths() {
  const allowedCollections = ['engineer', 'eto', 'officer'];
  let allPaths = [];

  for (const collection of allowedCollections) {
    const posts = await getCollection(collection);
    const paths = posts.map(post => ({
      params: { slug: [collection, post.slug] },
    }));
    allPaths = [...allPaths, ...paths];
  }

  return allPaths;
}

// 从slug数组拆分分类和帖子名
const { slug } = Astro.params;
const [category, postSlug] = slug;

const allowedCollections = ['engineer', 'eto', 'officer'];
if (!allowedCollections.includes(category)) {
  throw new AstroError(AstroErrorData.NotFound);
}

const post = await getCollection(category, ({ slug: itemSlug }) => {
  return itemSlug === postSlug;
});

if (!post.length) {
  throw new AstroError(AstroErrorData.NotFound);
}

const { data } = post[0];
---

<!-- 帖子详情渲染区域 -->
<h1>{data.title}</h1>
<div class="post-content">{data.content}</div>

关键修改点 #

• 将固定的getCollection('engineer')改为动态传入category参数，实现多分类数据获取
• 通过getStaticPaths遍历所有分类，预先生成所有帖子的静态路径，保证静态构建时能生成全部详情页
• 增加分类和帖子的合法性校验，避免非法访问返回错误页面

导航栏与帖子链接调整 #

• 导航栏的分类入口直接指向对应分页页，比如/engineer、/eto、/officer
• 分页页中的帖子详情链接要包含分类信息，格式为/${category}/${post.slug}（两种路由场景的链接格式一致）

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