主题特色与特性

astro-theme-ink 是一款基于 Astro 5 与 UnoCSS 构建的纯静态个人博客主题。本文把它的设计理念与全部特性讲清楚。

设计理念：墨落纸上

主题的英文名是 “ink on paper” —— 墨色文字落在纸上。它体现在三件事上：

• 单一强调色：全站只有 accent 一个彩色，其余全部交给灰阶分层与留白
• 衬线标题 + 无衬线正文：标题用衬线字体营造”印刷页面”的呼吸感
• 克制的动效：只在你最注意的地方出现 —— 悬停划线、入场淡入、滚动渐显

两套配色 × 明暗模式

主题内置两套配色，互相独立，又可与明暗模式任意组合（共 4 种观感）：

顶栏的调色板按钮（羽毛 / 叶子）切换配色，月亮按钮在 亮色 → 暗色 → 跟随系统 之间循环，选择都会记住。切换时有 300ms 的柔和过渡；页面顶部还有一层极淡的”天际光晕”渐变，随配色自动变化。

首页：全部配置驱动

首页的每个分区都由 src/site-config.ts 里的 home 配置块驱动，改配置即改页面，无需碰组件：

• 英雄区：tagline、位置、个人简介、按钮、社交入口
• 最近文章（数量可配）
• 教育经历时间线
• 技能分组
• 可选：标签云、友链预览

阅读体验

文章页针对长文做了很多设计：

• 目录：桌面端右侧吸顶、滚动高亮当前位置；移动端折叠在文章开头
• 阅读进度条：顶部一条细线随滚动推进
• 上一篇 / 下一篇：按发布时间自动取相邻文章
• 封面图：heroImage 字段即可
• 正文排版：悬停划入的链接下划线、自定义圆点/衬线序号列表、内嵌墨条引用块、渐变分割线、行悬停高亮的表格

代码块

代码块走的是构建期 Shiki 管线，与很多成熟主题一致：

• 粘性行号 + 左侧条带，横向滚动时行号不消失
• 支持标题（lang title="文件名"）
• 右上角语言标签，悬停切换为复制按钮（带 “Copied!” 气泡）
• 超过 15 行自动折叠，底部 “Show all” 展开
• 支持 [!code highlight] 高亮、[!code ++] / [!code --] diff 标记

搜索与评论

• 站内搜索：构建时生成 JSON 索引，前端本地过滤 + 关键词高亮，无任何外部服务
• 评论：Waline（自部署，Vercel + LeanCloud 即可），配置里填上服务器地址即启用
• 浏览量：同一 Waline 服务器提供文章页访问计数

SEO 与分享

• 每篇文章自动输出 JSON-LD BlogPosting 结构化数据
• Open Graph / Twitter Card / canonical / theme-color 齐全
• RSS + sitemap 开箱即用（构建时生成）

技术底座

• Astro 5 纯静态输出（output: 'static'），构建产物可直接托管到任意平台
• UnoCSS（presetWind3 + presetTypography + presetIcons）：按需生成，几乎不产生冗余 CSS
• 零运行时框架、无 jQuery 之类的依赖，页面体积很小

目录结构

src/
├── site-config.ts        # 所有配置（站点、首页、评论、友链…）
├── content.config.ts     # 内容集合 schema
├── assets/styles/        # 设计 token（两套配色）+ 全局样式
├── components/           # 布局组件（Header/Footer/卡片/目录/评论…）
├── layouts/              # BaseLayout / PostLayout
├── pages/                # 首页、博客、标签、归档、友链、关于、搜索、RSS…
├── plugins/              # Shiki 代码块管线（移植自 astro-theme-pure）
├── utils/                # 工具函数（日期、阅读时长、搜索索引…）
└── content/blog/         # 你的文章（Markdown）

下一步：从零开始：安装与使用 会带你把它跑起来。