ToC

前言

大家好，好久不见，我是某昨。

今天（2024-10-13）久违地对博客做了一下升级。主要的工作是把 Astro Paper 的上游更新合入了进来，并且尝试性地升级到了 Astro v5。在这个过程中，多多少少也撞到了一些坑。在这片文章中，我会详细描述我这一天遇到的问题与对应的解决方案。具体是否需要尝试更新，就交给各位读者判断了（笑）。

Content Layer API

在 9 月 17 日，Astro 的官方博客发布了一篇博客，文中简要地列举了 Astro v5 的一些特点。这其中对静态博客站最关键的就是 Content Layer API 了。

Content Layer API 将 Astro 对资源的获取进行了抽象，使得第三方 CMS 的接入变得更加方便。对目前只使用了本地来源的本博客来说，只需要做简单的迁移就可以了。

改动主要有两项：

  1. 将 type 从 content 修改成 content_layer
  2. 增加 loader。需要注意的是，这里需要用到 generateId 这个方法。由于 5.0.0-beta.4 的 Bug 影响，我们无法在 Astro 框架处理后获得博客中定义的 slug 字段。因此需要在这里直接对源数据进行处理，并对 id 字段进行覆盖。

可以看下源码：

const blog = defineCollection({
  type: "content_layer",
  loader: glob({
    pattern: "**/*.md",
    base: "./src/content/blog",
    generateId: options => {
      return options.data.slug as string;
    },
  }),
  schema: ({ image }) =>
20 collapsed lines
    z.object({
      author: z.string().default(SITE.author),
      published_at: z.date(),
      modified_at: z.date().optional().nullable(),
      title: z.string(),
      featured: z.boolean().optional(),
      draft: z.boolean().optional(),
      tags: z.array(z.string()).default(["others"]),
      seoTags: z.array(z.string()).optional(),
      ogImage: image()
        .refine(img => img.width >= 1200 && img.height >= 630, {
          message: "OpenGraph image must be at least 1200 X 630 pixels!",
        })
        .or(z.string())
        .optional(),
      description: z.string().optional(),
      canonicalURL: z.string().optional(),
      password: z.string().optional(),
      category: z.string().optional().default("post"),
    }),
});
export const collections = { blog };

与之对应的，我们的 [slug]/index.astro 也需要修改。下面高亮行中原本是 post.slug，我们需要修改成 post.id：

export const getStaticPaths = async () => {
  const posts = await getPosts("all");
  const postResult = posts.map(post => ({
    params: { slug: post.id, category: post.data.category },
    props: { post },
  }));
  return postResult;
};

其他一些原本用到 slug 的地方也要做对应的变更，比如 Search：

里面的 category 之后可能会讲讲，也可能会回馈给上游）

      <ul>
        {searchResults?.map(({ item, refIndex }) => (
          <Card
            key={`${refIndex}-${item.id}`}
            frontmatter={item.data}
            href={`/${item.data.category}/${item.id}/`}
          />
        ))}
      </ul>

其他 Breaking Change

对于如何迁移到 Astro v5，Astro 官方给出了一个非常详细的文档。基本就是照着做就行。我这里简单列举下 Astro Paper 需要进行的一些改动。

React 调用 Astro 组件

在重构的过程中，也算是踩了个 Astro 的坑。简单来说是这样的，我把一个图标从 .tsx 单独移到了 .astro，但却遇到了奇怪的错误：

Invalid component arguments.

官网的 FAQ 说是调用方法不对，但我确实是按照组件的方式调用的。在经过了一番调查之后，发现想要在 TSX 里调用 Astro 组件只能通过 slot 的方式传进去。这篇博客 简单描述了实现方式，但改起来看起来就很麻烦，于是就对直接把 astro 组件换成 tsx 了（

Follow.is 认证

最后对最近的网红 App 做一下兼容（x）。我采用的是 RSS 认证，实现方式可以参考官网对 @astrojs/rss 的介绍，设置一下 customData 就行了。

直接传 xml 是我没想到的

export async function GET() {
  const sortedPosts = await getSortedPosts("post");
  return rss({
9 collapsed lines
    title: SITE.title,
    description: SITE.desc,
    site: SITE.website,
    items: sortedPosts.map(({ data: post, id }) => ({
      link: `post/${id}/`,
      title: post.title,
      description: post.description,
      pubDate: new Date(post.modified_at ?? post.published_at),
    })),
    customData: `
<follow_challenge>
    <feedId>60246744900313088</feedId>
    <userId>60243781455642624</userId>
</follow_challenge>`,
  });
}