本站是基于 Astro 7 从零自建主题的个人博客,构建产物为纯静态页面,不依赖任何评论/数据库等动态服务。你正在浏览的每一个页面都是它自己。
全宽落地首页
首页采用单屏落地式布局,自上而下依次是:
- Hero:打字机轮播标语、社交链接与打赏入口
- 项目展示:项目卡片带 3D 倾斜与鼠标跟随辉光,可开二次元卡牌风的全息闪卡光效
- 最新文章 与 友链 板块
主题与外观
- 明暗双主题:一键切换,配色跟随系统;代码高亮用 Shiki 双主题(GitHub Light / Dark)以 CSS 变量输出,暗色模式零额外请求
- 可选星轨背景:绕天极旋转的彩色星轨 + 闪烁星野 + 偶发流星,暗色模式下最绚丽
- 全站随机背景图:每次访问从
background/目录随机取一张铺满全屏
内容集合
文章、页面、项目、友链全部由 Astro 内容集合(Content Collections)管理,Zod schema 校验 frontmatter——字段写错会在构建期直接报错,而不是渲染出一个残缺页面。文章支持分类、标签、置顶、草稿、分页(每页 10 篇)与完整的归档 / 分类 / 标签页。
阅读体验
- 自动生成文章目录(TOC),支持自动编号与层级深度控制
- 字数统计与阅读时长;距最后更新超过 3 年的老文章顶部自动显示时效提示
- 文末 CC 版权声明(by-nc-sa)、上一篇 / 下一篇导航、置顶标识
- 阅读进度条 + 显示滚动百分比的返回顶部
- 顶部导航悬停/可见即预取内部链接,配合 ClientRouter 软导航实现页面秒开
搜索与订阅
- 本地搜索:基于 Orama 的全文搜索,索引随站点一起静态构建,无需第三方服务;支持按文章截取 TopN 相关段落
- RSS 订阅与 sitemap 自动生成
构建与性能
- 自研构建插件:图片自动压缩转 WebP(本站实测 24 MB → 3.7 MB)、图片懒加载注入、git submodule 产物清理
- 社交分享卡片(og:image)、移动端地址栏主题色跟随明暗模式
- 工程化:
astro check类型检查、oxlint / oxfmt、Vitest 单元测试
一份配置定制全站
所有站点信息、菜单、外观开关、文章组件(目录 / 字数 / 版权声明 / 打赏 / 返回顶部……)集中在一个 config.ts 里,改配置即可定制站点,无需触碰任何组件代码。