原文：AstroPaper 5.0

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

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 中不存在返回地址，则跳转至首页
• 同时还包含若干细微样式与布局优化

结语

AstroPaper v5 带来了大量底层变更，但核心体验依旧未变。你将获得更流畅、更高效的博客平台，同时继续享受 AstroPaper 一贯的极简设计风格。

欢迎体验这些更新并分享你的想法。一直以来感谢大家的支持！

如果你喜欢这个主题，欢迎为仓库点个 Star。你也可以通过 GitHub Sponsors 支持我，或者请我喝杯咖啡。当然，这些完全是自愿行为。

祝使用愉快！

Sat Naing

（完）

如果这篇文章刚好帮到了你，欢迎请我喝杯咖啡！