AstroPaper 5.0（译）

原文：AstroPaper 5.0

终于，备受期待的 AstroPaper v5 正式发布了。AstroPaper v5 依旧保持极简、清爽的视觉风格，但在底层实现上带来了大量重要更新。

AstroPaper v5

Open Table of contents

重大变更
其他值得关注的变更
结语

重大变更

升级至 Astro v5 #455

AstroPaper 现已升级至 Astro v5，全面支持其带来的新特性与性能改进。

升级至 Tailwind v4

AstroPaper 已升级到 Tailwind v4，此版本在底层样式机制上有诸多变化。

tailwind.config.js 文件已移除。
所有 Tailwind 配置现在统一放在 src/styles/global.css 中。
与排版（Typography）相关的样式被提取至 src/styles/typography.css。

由于 TailwindCSS v4 的新行为，组件中 <style> 块内的样式已被移除，并改为使用内联 Tailwind 类。

此外，整个 UI 的配色方案也进行了调整。新的调色板仅保留五种核心颜色：

:root,
html[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --muted: #e6e6e6;
  --border: #ece9e9;
}

html[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --muted: #343f60bf;
  --border: #ab4b08;
}

移除 React + Fuse.js，改用 Pagefind 搜索

在旧版本中，搜索功能与 OG 图片生成依赖 React.js 和 Fuse.js。

在 AstroPaper v5 中，已移除 React.js，改为使用 Pagefind —— 一款专为静态站点设计的搜索工具。

搜索体验与之前版本几乎一致，但现在不仅标题和描述可以被搜索，所有正文内容也会被索引并可搜索，这得益于 Pagefind 的强大能力。

在开发模式下使用 Pagefind 的思路，来源于一篇相关博客文章的启发。

更新 import 别名

import 别名由 @directory 更新为 @/directory，现在需要这样导入：

---
import { slugifyStr } from "@/utils/slugify";
import IconHash from "@/assets/icons/IconHash.svg";
---

切换至 `pnpm`

AstroPaper 已从 npm 切换至 pnpm，以获得更快、更高效的包管理体验。

使用 Astro SVG 组件替代内联 SVG

AstroPaper v5 使用 Astro 的实验性 SVG Component 替代了内联 SVG。这一更新减少了 socialIcons 对象中预定义 SVG 代码的需求，使代码结构更加整洁、易于维护。

分离 Constants 与 Config

项目结构进行了重组：

src/config.ts 现在只包含 SITE 对象（项目核心配置），所有常量（如 LOCALE、SOCIALS、SHARE_LINKS）已迁移至 src/constants.ts。

其他值得关注的变更

博客文章目录从 src/content/blog/ 更新为 src/data/blog/
集合定义文件从 src/content/config.ts 改为 src/content.config.ts
多个依赖已升级，以提升性能与安全性
移除 IBM Plex Mono 字体，改为使用系统默认等宽字体
更新了 Go back 按钮逻辑：
- 旧版本使用浏览器 history API
- v5 改为使用浏览器 session 临时存储返回地址
- 如果 session 中不存在返回地址，则跳转至首页
同时还包含若干细微样式与布局优化