跳到正文
CHUN折腾
折腾笔记

Astro 5 内容集合里,slug 变成了 id

旧写法:

<a href={`/projects/${entry.slug}/`}>{entry.data.title}</a>

升级后页面上全是 /projects/undefined/。

原因:Astro 5 的 content collections 换了 glob loader, slug 不再由文件名自动推导,统一改用 id(默认就是去掉扩展名的文件名)。

改三处就行:

<!-- 1. 生成路由 -->
export async function getStaticPaths() {
  const entries = await getCollection('projects');
  return entries.map((entry) => ({
    params: { slug: entry.id },
    props: { entry },
  }));
}
<!-- 2. 链接 -->
<a href={`/projects/${entry.id}/`}>…</a>
// 3. schema 里如果原来有 slug 字段,删掉或自己填

需要自定义 id(比如文件名里有空格或中文)时,给 glob loader 传 generateId:

import { glob } from 'astro/loaders';

export const collections = {
  projects: defineCollection({
    loader: glob({
      pattern: '**/*.md',
      base: './src/content/projects',
      generateId: ({ entry }) => entry.replace(/\.md$/, ''),
    }),
    schema: projectSchema,
  }),
};

不过更推荐直接用英文文件名,id 自动就是它,省一层维护。