内容集合#

如果想要对astro项目的markdown进行管理必须通过，框架指定的defineCollection这个astro里的工具函数来定义一个内容集合。他有多种加载器glob、file当然还有指定远程api请求的方式来获得数据集合，可以使用zod对字段进行检查， fuwari的主分支用的隐式约定扫描content目录下的collections的字段对应的文件夹，并且/src/content/config.ts必须在这个目录下才能被astro扫描到。现在astro主推content.config.ts放在/src下面是和之前的作用相同的，

1
import { defineCollection } from "astro:content";
2
import { glob } from 'astro/loaders';
3

4
const postsCollection = defineCollection({
5
  loader: glob({ pattern: "**/*.md", base: "src/content/posts" }),
6
});
7

8
export const collections = {
9
  posts: postsCollection,
10

11
};

并且显式指定内容集合的目录，这个config文件不需要被你显式指定导入，astro会自动检查到，把他放到astro的里面。接下来看fuwari的src/utils/content-utils.ts,在刚刚我们怕配置了一个数据集合，被astro自动扫描到，不需要你显式指定，你直接在别的地方就可以导入，

1
import { type CollectionEntry, getCollection } from "astro:content";

和名字一样，getCollention是从内容集合里获取数据的，CollectionEntry是数据类型。这个Entry对象有3个主要的键值对：

1
{
2
  id : "", //一般是根据文件名，如果是通过api传递的需要必须要手动传
3
  data : { //这个是通过schema验证的元数据，在文章的front Matter里
4
    title : "",
5
    pulished : ""
6
  },
7
  body : "" //这个是文章的正文内容，被astro:contetnt自动从markdown放到该对象的body里，在后面可以使用render函数把entry实体渲染成markdown。
8
}

src/utils/content-utils.ts里放了挺多格式化，处理文章的函数的，但是说实话看着挺难受的2个函数：getSortedPostsList()、getSortedPosts()在处理相同的事情之后可以重构一下这里， getSortedPosts()比较好我感觉,page/[...page].astro和page/posts/[...slug].astro都用的这个，getSortedPostsList()这个只有archive.astro在用，说实话有点冗余了。 之后就可以看具体的page了。

pages#

1
export const getStaticPaths = (async ({ paginate }) => {
2
  const allBlogPosts = await getSortedPosts();
3
  return paginate(allBlogPosts, { pageSize: PAGE_SIZE });
4
}) satisfies GetStaticPaths;
5
const { page } = Astro.props;

1
[
2
  {
3
    params: undefined,
4
    props: page//带有第一页PAGE_SIZE数量的文章数量
5
  },
6
  {
7
    params: 2,
8
    props: page//带有第二页PAGE_SIZE数量的文章数量
9
  }
10
]

1
export async function getStaticPaths() {
2
  const blogEntries = await getSortedPosts();
3
  return blogEntries.map((entry) => ({
4
    params: { slug: entry.slug },
5
    props: { entry },
6
  }));
7
}
8

9
const { entry } = Astro.props;//根据路由把文章对象拿回来
10
const { Content, headings } = await entry.render();//把文章对象从markdown变成content
11

12
const { remarkPluginFrontmatter } = await entry.render();//astro内置的用来预估阅读时间的插件带的字段

文章CMS化出现的问题#

主要出在做内容集合的时候能够调用api，但是无法把把请求来的mark数据，放到数据集合里的body字段里，没法接入astro自带的markdown解析器和渲染，导致元数据可以成功渲染，但是文章正文始终无法渲染，官方推荐使用marked来第三方插件解析，官方链接,但是对各种代码高亮、latex公式的支持不是很好，所以这条路不通,之后可能会通过ci/cd来让文章和git仓库解耦，这下白折腾了哈哈哈。