关于 | XiaoCai's Blog

总览

氦，我是 XiaoCai，当我在现实里专注折腾某样东西的时候，这里大概会出现一篇记录我折腾的文章，但更新时间不定，你大可以当成这是一个年更博客。

这是一个由 Astro v5 驱动的纯静态博客，几乎全部样式都是由 TailWind Css v4 实现的。项目中需要用到脚本的地方大部分由原生 JavaScript 编写，仅在少数场景中引入了 Vue 3 和 reka-ui 进行增强(偷懒)。

当前本站托管在 Cloudflare Pages，站点由 GitHub Actions 完成构建并推送至 Cloudflare。Vercel 则由于愈来愈慢的 CDN 被弃用。

评论则使用了 Waline，一款简洁、安全的评论系统，它托管在 Vercel，由 Cloudflare 提供 CDN 加速。
关于本站的 Waline 配置和自定义请移步 Astro 修改(4) — 更快、更安全的 Waline 评论。

字体

字体对于一个以文字为驱动的站点来说显得尤为重要，毕竟字体直接影响着阅读体验。本站选用的字体分为以下几类：

正文字体，无衬线
- MacOS 上，使用 SF Pro 作为英文字体，PingFang SC 作为中文字体。
- Windows 上，使用 Segoe UI 作为英文字体，Noto Sans SC 作为中文字体，微软雅黑 作为兜底。
由于 Windows 11 在 2025 年的某次更新后默认加入了 Noto Sans SC 字体，而苹果设备则有苹方字体 PingFang SC，其他安卓设备也有非常好看的默认无衬线字体，所以本站没有引入额外的网络无衬线字体。
标题字体 Noto Serif SC

同上，Windows 在引入 Noto Sans 的时候一并引入了 Noto Serif。
本来打算参考上面的做法，直接删除 Noto Serif 的网络字体，但是发现 MacOS 下没有一款中英文风格比较匹配的衬线字体，所以还是保留了 Noto Serif SC 的引入。
代码块字体 Maple Mono Normal NF CN

众所周知，代码块字体最重要的就是可读性。而选用 Maple Mono 就是因为它在可读性做的非常棒，此外，它还支持中英文 1:2 的宽度比，还拥有高度可定制化的特性。
后面的 Normal NF CN 含义请查看官方命名说明。
引用块字体 Lxgw Wenkai GB

非常漂亮的中文字体，单纯就是我个人喜欢，想塞到 Blog 里，可以理解为夹带私货。

更详细的字体配置，请直接查看代码。本站关于字体的 CSS 变量如下：

@theme {
  --font-sans: "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial,
  "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Microsoft JhengHei",
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;

  --font-serif: "Noto Serif SC", "SimSun", "ST Song", "FangSong", "HYSong", "New York", "Times New Roman", serif;

  --font-mono: "Maple Mono Normal NF CN",
  "JetBrains Mono", "Cascadia Code", Consolas,
  "Sarasa Mono SC", "Noto Sans Mono SC", monospace;

  --font-lxgw: "LXGW WenKai GB", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;

  --font-sans-no-emoji: "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial,
  "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;

  --default-font-family: var(--font-sans);
  --default-serif-font-family: var(--font-serif);
  --default-mono-font-family: var(--font-mono);
}

由于中文字符集字体文件的庞大，而本站又引入了许多中文字体，为了优化字体加载，本站使用了中文网字计划所开发的字体切割工具分片字体，在此表示感谢。

同时，在加载所有网络字体的时候均使用 font-display: swap; 策略。

font-display: swap; 当网络字体未加载时候，先使用系统字体，等网络字体加载完成后再替换成网络字体。

Logo 与图标

站点的大部分图标是从 Lucide 挑选的。Logo 则是照着我的世界中金苹果图标自己画的。

MD 渲染

MD 的解析、渲染使用了 remark 和 rehype。
代码块渲染使用了 Shiki，亮暗色的主题则是 GitHub Light 和 GitHub Dark。

关于它们的工作流程，你可以看看我的这两篇文章：

旅行页

本站的旅行页中的地图使用了 OpenLayers 作为框架，地图瓦片数据来源于 MapTiler，按钮的 UI 同样使用了 reka-ui 进行增强(偷懒)，其余的核心逻辑均由我直接构建。

关于地图的实现方式：

GPX 文件是必不可少的，只能在出去游玩的过程中自行录制。在这里推荐开源的 Open GPX Tracker 来录制。
地图上的照片点直接使用图片中的 EXIF 来判断经纬度，为防止其他 EXIF 信息被泄露（~~好像 GPS 坐标已经是最敏感的信息了，其他的泄露也没啥事~~），在生成网页的时候就直接将必要的经纬度、时间信息写入到照片所属的元素内。
在加载时，加载 GPX 文件（路径轨迹）、读取页面上的照片点、加载亮色和暗色的地图瓦片，使用 OpenLayers 将它们渲染到地图的不同层上。
在滚动时，将两个照片之间的距离和路径轨迹对应，按照滚动速度计算地图缩放和平移。

地图版权

灵感来源、致谢

站点的设计灵感很大程度上来自 Zed。感谢 Zed，非常喜欢，爱来自瓷器。

除了帮助最大的 Zed 之外，本站也从以下页面、项目中吸取了灵感:

~~吃百家饭说是~~