Skip to content
Table of contents

astro-theme-ink：把博客写成一页纸

4 min read ··· views #astro / #博客主题

项目仓库：github.com/willimt/astro-theme-ink（当前版本 v0.2.0） 在线演示：ink.willimt.com

项目简介

做这个主题时，我想要的不是一个堆满组件的展示页，而是一块安静、适合长期写字的地方。astro-theme-ink 基于 Astro 5 和 UnoCSS：正文仍然是 Markdown，构建结果则是纯静态文件。它没有运行中的服务和数据库，写完、构建、部署，就够了。

视觉上也尽量收着来。纸面由灰阶和留白撑开，页面只留一个强调色；标题用衬线字体，正文保持清楚。默认有暖调的 ink 与偏冷的 fresh 两套配色，明暗模式可以独立切换。

首页：ink 配色

首页：fresh 配色

文章页

博客列表与归档入口

写作时能用到的

  • 文章按标签、年份和分页整理；RSS 输出全文，sitemap 随构建生成。
  • 搜索索引在构建时写成 JSON，浏览器本地检索，不需要接入第三方服务。
  • 目录在桌面端随页面吸顶，手机上收在可折叠区域；阅读进度、阅读时长和相邻文章导航都在文章页。
  • 本地封面图由 Astro 生成响应式尺寸；正文图片自动懒加载，点击后可放大查看。
  • Markdown 除了常规排版，还支持 KaTeX 公式、Mermaid 图表，以及带标题、复制按钮、行高亮、diff 标记和长代码折叠的 Shiki 代码块。
  • 主题会在首帧前读取本地偏好，避免闪一下再变色；内链预取让站内跳转更干脆。
  • SEO 该有的基础都在：canonical、Open Graph / Twitter 卡片和 JSON-LD BlogPosting。

评论和计数是可选项

评论和阅读量都接 Waline，但它们是两组独立配置。把地址填入 comment.server 可以启用文章末尾的评论区；填入 pageview.server 则会显示文章阅读量，也可以再开启页脚的全站计数。评论组件只有滚动到附近时才加载，没配置 Waline 的站点仍然是完整的纯静态博客。

主题把点赞收成了一个心形按钮，足够表达“这篇有用”，又不会把文章页变成社交动态。

跑起来并不复杂

项目使用 pnpm。装好一个支持 Astro 5 的 Node.js 版本后：

pnpm install
pnpm dev          # http://localhost:4321
pnpm build        # astro check + 静态构建到 dist/
pnpm preview      # 本地预览构建产物
bash

发布时把 astro.config.ts 中示例的 site 改成真实域名；canonical、RSS、sitemap 和分享链接都会用到它。dist/ 是普通静态目录，放到 GitHub Pages、Vercel、Netlify 或 Cloudflare Pages 都可以。

从配置开始改

日常配置都集中在 src/site-config.ts：站点信息、导航、页脚、首页 Hero、最近文章数量、教育经历、技能、友链、默认主题和配色都在这里。首页的分区由配置决定，填入内容就显示，清空后自然收起。

文章放在 src/content/blog/。frontmatter 支持标题、摘要、发布日期、更新日期、语言、标签、草稿、评论开关和本地封面图：

---
title: '文章标题'
description: '一句话摘要'
publishDate: 2026-08-17
updatedDate: 2026-08-18 # 可选
language: '中文' # 可选
heroImage: # 可选；相对当前文章的本地图片
  src: ../../assets/cover.png
  alt: '封面描述'
tags: [标签]
draft: false # true 时不进列表和搜索，但仍可通过 URL 访问
comment: true # 单篇评论开关
---

正文。
markdown

像 notes/index.md 这样的文件夹式文章会对应 /blog/notes。如果想动版式，可以从 src/assets/styles/tokens.css 的颜色和字体、uno.config.ts 的排版规则，再到 src/assets/styles/global.css 的细节一路往下改；结构没有藏起来。

留下一点小彩蛋

打开浏览器开发者工具，控制台会看到一段 ASCII 字和站点运行天数；页脚的英文名言则每次随机换一句。它们不影响阅读，只是给偶然路过这里的人留一点回应。

源码、完整配置说明和更新记录都在 GitHub 仓库。如果你也想从零搭一个自己的站，可以从这里开始。