我们很高兴地宣布 AstroPaper v3 的发布，它包含新功能、增强功能和错误修复，旨在提升您的 Web 开发体验。让我们深入了解此版本的亮点：
目录
功能与变更
Astro v3 集成
AstroPaper 现在完全支持 [Astro v3](https://astro.build/blog/astro-3/)，提供改进的性能和渲染速度。此外，我们添加了对 Astro [ViewTransitions API](https://docs.astro.build/en/guides/view-transitions/) 的支持，允许您在视图之间创建引人入胜且动态的过渡效果。
在“近期文章版块”中，将仅显示非精选文章，以避免重复并更好地支持 ViewTransitions API。
### 更新 OG 图像生成逻辑
我们更新了自动 OG 图像生成的逻辑，使其更加可靠和高效。此外，它现在支持文章标题中的特殊字符，确保生成准确、灵活且引人注目的社交媒体预览图。
`SITE.ogImage` 现在是可选的。如果未指定，AstroPaper 将使用 `SITE.title`、`SITE.desc` 和 `SITE.website` 自动生成 OG 图像。
### 主题 meta 标签
添加了 theme-color meta 标签以动态适应主题切换，确保无缝的用户体验。
> 注意顶部的差异
**_AstroPaper v2 主题切换_**
**_AstroPaper v3 主题切换_**
## 其他变更
### Astro Prettier 插件
开箱即用地安装了 Astro Prettier 插件，以保持项目整洁有序。
### 次要样式变更
解决了单行代码块换行问题，使您的代码片段看起来更加整洁。
更新了导航样式 CSS，以便向导航栏添加更多导航链接。
## 升级到 AstroPaper v3
> 本节仅适用于想从旧版本升级到 AstroPaper v3 的用户。本节将帮助您从 AstroPaper v2 迁移到 AstroPaper v3。在阅读本节其余部分之前，您可能还需要查看[这篇文章](https://astro-paper.pages.dev/posts/how-to-update-dependencies/)以了解如何更新依赖和 AstroPaper。
## 选项 1：全新开始（推荐）
在此版本中，进行了大量更改——用新的 Astro API 替换旧 API、错误修复、新功能等。因此，如果您没有进行太多自定义，您应该遵循此方法。
**_步骤 1：保留所有已更新的文件_**
保留所有已经更新过的文件非常重要。这些文件包括
- `/src/config.ts`（在 v3 中未触及）
- `/src/styles/base.css`（在 v3 中有微小更改；下文提到）
- `/src/assets/`（在 v3 中未触及）
- `/public/assets/`（在 v3 中未触及）
- `/content/blog/`（这是您的博客内容目录 🤷🏻♂️）
- 您所做的任何其他自定义。
```css
/* file: /src/styles/base.css */
@layer base {
/* 其他代码 */
::-webkit-scrollbar-thumb:hover {
@apply bg-skin-card-muted;
}
/* 旧代码
code {
white-space: pre;
overflow: scroll;
}
*/
/* 新代码 */
code,
blockquote {
word-wrap: break-word;
}
pre > code {
white-space: pre;
}
}
@layer components {
/* 其他代码 */
}
```
**_步骤 2：用 AstroPaper v3 替换其他所有内容_**
在此步骤中，除上述文件/目录（加上您自定义的文件/目录）外，将其他所有内容替换为 AstroPaper v3。
**_步骤 3：Schema 更新_**
请记住，`/src/content/_schemas.ts` 已被替换为 `/src/content/config.ts`。此外，不再从 `/src/content/config.ts` 导出 `BlogFrontmatter` 类型。因此，文件内的所有 `BlogFrontmatter` 类型都需要更新为 `CollectionEntry<"blog">["data"]`。
例如：
`src/components/Card.tsx`
```ts
// AstroPaper v2
import type { BlogFrontmatter } from "@content/_schemas";
export interface Props {
href?: string;
frontmatter: BlogFrontmatter;
secHeading?: boolean;
}
```
```ts
// AstroPaper v3
import type { CollectionEntry } from "astro:content";
export interface Props {
href?: string;
frontmatter: CollectionEntry<"blog">["data"];
secHeading?: boolean;
}
```
## 选项 2：使用 Git 升级
大多数用户不推荐此方法。如果可以，您应该执行“选项 1”。只有在您知道如何解决合并冲突并且清楚自己在做什么的情况下才这样做。
实际上，我已经为此情况写了一篇博文，您可以在这里查看[这里](https://astro-paper.pages.dev/posts/how-to-update-dependencies/#updating-astropaper-using-git)。
## 结语
准备好探索 AstroPaper v3 令人兴奋的新功能和改进了吗？立即开始[使用 AstroPaper](https://github.com/satnaing/astro-paper)。
有关其他错误修复和集成更新，请查看[发布说明](https://github.com/satnaing/astro-paper/releases/tag/v3.0.0)以了解更多信息。
如果您在升级过程中遇到任何错误或困难，请随时在 [GitHub](https://github.com/satnaing/astro-paper) 上提交 issue 或发起讨论。