AstroPaper 5.0

终于，期待已久的 AstroPaper v5 来了。AstroPaper v5 保持了同样的极简与清爽外观，但在底层进行了重大更新。

重大变更

升级至 Astro v5 #455

AstroPaper 现在搭载了 Astro v5，带来了随之而来的所有新功能和改进。

Tailwind v4

AstroPaper 已升级至 Tailwind v4，其中包含许多底层的样式变更。tailwind.config.js 文件已被移除，现在所有配置都位于 src/styles/global.css 文件中。排版相关的样式已被提取并移动到 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 搜索

在以前的版本中，React.js 和 Fuse.js 用于搜索功能和 OG 图像生成。在 AstroPaper v5 中，React.js 已被移除，取而代之的是 Pagefind，这是一个静态站点搜索工具。搜索体验几乎与以前的版本相同，但得益于 Pagefind，现在所有内容（不仅仅是标题和描述）都被索引且可搜索。在开发模式下使用 Pagefind 的想法灵感来源于这篇博客文章。

更新导入别名

导入别名已从 @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 组件替换了内联 SVG。此次更新减少了在 socialIcons 对象中预定义 SVG 代码的需求，使代码库更整洁且更易于维护。

分离常量和配置

项目结构已重组。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 字体，改用默认的系统等宽字体。
返回 按钮逻辑已更新。现在，AstroPaper v5 不再触发浏览器的历史记录 API，而是使用浏览器会话临时存储返回 URL。如果会话中不存在返回 URL，它将重定向到主页。
还有一些次要的样式和布局更改。

结语

AstroPaper v5 带来了许多变化，但核心体验保持不变。在保持 AstroPaper 著名的清爽极简设计的同时，享受更流畅、更高效的博客平台！随意探索这些变化并分享您的想法。一如既往，感谢您的支持！如果您喜欢这个主题，请考虑给仓库点 Star。您也可以通过 GitHub Sponsors 支持我，或者如果您愿意，可以请我喝杯咖啡。当然，这些行为完全是自愿的，非必须。祝使用愉快！ Sat Naing

目录