Skip to content
Donghai's Blog
Go back

AstroPaper 3.0(译)

原文:AstroPaper 3.0

我们很高兴地宣布 AstroPaper v3 正式发布!本次更新带来了诸多新特性、功能增强以及问题修复,全面提升你的 Web 开发体验。下面一起来看看本次版本的亮点内容:

AstroPaper v3

Table of contents

Open Table of contents

功能与变更

集成 Astro v3

AstroPaper 现已全面支持 Astro v3,带来更优的性能与更快的渲染速度。

此外,我们还新增了对 Astro ViewTransitions API 的支持,使你能够在不同页面视图之间创建更加流畅、富有吸引力的动态过渡效果。

在“Recent Section”(最近文章区域)中,现在只会显示非 featured 的文章,以避免重复展示,同时也更好地配合 ViewTransitions API 的使用。

更新 OG 图片自动生成逻辑

Example OG Image

我们改进了自动生成 OG 图片(Open Graph Image)的逻辑,使其更加稳定与高效。

同时,现在支持文章标题中的特殊字符,确保在社交媒体分享时能够生成更准确、更灵活、更吸引眼球的预览图。

SITE.ogImage 现在变为可选项。如果未指定,AstroPaper 会基于 SITE.titleSITE.descSITE.website 自动生成 OG 图片。

新增 theme-color meta 标签

新增了 theme-color meta 标签,可根据主题切换动态调整浏览器顶部颜色,提供更加无缝的用户体验。

注意顶部颜色的变化差异

其他变更

内置 Astro Prettier 插件

Astro Prettier 插件现已开箱即用,帮助你保持项目代码整洁、有序。

样式细节优化

升级到 AstroPaper v3

本节仅适用于希望从旧版本升级到 AstroPaper v3 的用户。

本节将帮助你从 AstroPaper v2 迁移至 v3。

在继续阅读之前,你也可以参考那篇关于升级依赖和 AstroPaper 的文章

方式一:全新替换(推荐)

在本次发布中,我们进行了大量改动:使用新 API 替换旧的 Astro API、修复问题、新增功能等。

因此,如果你没有做太多自定义修改,推荐采用此方式。

步骤 1:保留你已修改的文件

请确保保留你已经修改过的文件,包括:

/* file: /src/styles/base.css */
@layer base {
  /* Other Codes */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-skin-card-muted;
  }

  /* Old code
  code {
    white-space: pre;
    overflow: scroll;
  } 
  */

  /* New code */
  code,
  blockquote {
    word-wrap: break-word;
  }
  pre > code {
    white-space: pre;
  }
}

@layer components {
  /* other codes */
}

步骤 2:用 AstroPaper v3 替换其他内容

除上述文件/目录(以及你的自定义内容)外,将项目其余部分替换为 AstroPaper v3 版本。

步骤 3:模式更新

请注意,/src/content/_schemas.ts 已被替换为 /src/content/config.ts

此外,/src/content/config.ts 不再导出 BlogFrontmatter 类型。

因此,所有文件中的 BlogFrontmatter 类型均需更新为 CollectionEntry<“blog”>[“data”]

例如:src/components/Card.tsx

// AstroPaper v2
import type { BlogFrontmatter } from "@content/_schemas";

export interface Props {
  href?: string;
  frontmatter: BlogFrontmatter;
  secHeading?: boolean;
}
// AstroPaper v3
import type { CollectionEntry } from "astro:content";

export interface Props {
  href?: string;
  frontmatter: CollectionEntry<"blog">["data"];
  secHeading?: boolean;
}

方式二:使用 Git 升级

不推荐大多数用户使用此方法。如果可以,请优先选择“方式一”。

只有在你熟悉 Git 合并冲突处理,并清楚自己在做什么的情况下,才建议使用此方式。

关于此方式,我已经写过一篇专门的文章,你可以自行查阅。

结语

准备好探索 AstroPaper v3 带来的全新特性与优化了吗?现在就开始使用 AstroPaper 吧。

更多问题修复与集成更新内容,请查看 Release Notes 了解详情。

如果在升级过程中遇到 Bug 或困难,欢迎在 GitHub 提交 Issue 或发起讨论。


Share this post on:

Previous Post
如何使用Git Hooks设置创建和修改日期(译)
Next Post
如何更新AstroPaper的依赖项(译)
BlogsClub Meo Forever Blog