Colophon
Colophon 一词来自出版传统，原指书中记录出版与制作信息的一段文字，例如字体、纸张、印刷方式、装订厂、版次等。挪到 Web 上，它演变成了 colophon slash page，记录「网站是怎么做出来的」，IndieWeb 圈子里常见的一种自我介绍。
我第一次注意到这种页面是在 Obsidian[1] CEO Steph Ango 的个人站上；近日在 slash pages 又见到一次。
之前为图方便，这些内容统统堆在 ABOUT 页面里；后来发现它们已经不只是个人介绍的补充，而更像是这个站点的制作说明，于是单独整理成这一页。
写作
设备
文字最终总要从某台机器上敲出来，所以硬件也算这份 colophon 的一部分。
目前主要在 Macbook Air 上敲键盘，偶尔在手机上用 Obsidian 做些小修小补。现阶段不具备独居条件，语音输入暂时还没派上用场；等毕业租房之后，应该会穿插用一用语音输入法。
工具
本站文章、个人 wiki、草稿和网摘都放在同一个 Obsidian Vault 里。Obsidian 的 wiki link[2] 适合在笔记之间建立连接，Bases[3] 则适合按 frontmatter[4]字段整理文章和资料。
偶尔也会切到 VSCode 或 Neovim，主要是为了处理自定义组件。两个编辑器里都配了 snippet，可以迅速输出 <image-carousel>、<text-image-section> 等组件的 HTML 模板；之后调整内容时，vim 的 text object[5] 也很顺手，例如输入 dit（delete inside tag）就能清空标签内的内容。
格式
文章统一用 Markdown 写，元信息（标题、日期、标签、摘要等）放在 frontmatter里。
Markdown 原生语法不够用的地方，用自定义 Web 组件补足，例如图片轮播 <image-carousel>、文字配图 <text-image-section> 等。
图片
- 图片格式与分发：统一使用 webp / avif 编码，存储在 Bitiful S3，由 EdgeOne CDN 分发；响应式加载、ThumbHash[6] 占位等性能细节见 blog_performance_optimization。
- 图片来源：包括网络、个人拍摄、截图与绘制；不少网络素材没标明出处，后续会逐步补上。
- 图标：自定义 SVG，以及通过 iconify-icon 引入的 lucide、mingcute 图标包。
阅读体验
设计原则
页面遵循三条原则：
- 简洁：不加多余的噪声。首页只展示标题、摘要、日期、阅读时长和 tags 几项。
- 响应式：手机端按移动设备的使用习惯重新排布，导航换成 burger menu，TOC 放在手指容易触及的底部。
- 键盘友好：常用操作都给了快捷键，⌘ + T 切 TOC、⌘ + P 切主题、⌘ + K 全站搜索、ESC 关弹层。
字体
页面内置四类字体族，可以在文章 meta bar 中切换字体类型，也能自由调整字重、行高、字号，甚至引入 Web Font。
- Serif
- Sans Serif
- Monospace
- Handwriting
配色
站内内置了多套主题：Catppuccin、Nord、Tokyo Night、Rosé Pine，以及我自行设计的 Song Ci。按 ⌘ + P 切换，或用下面这个 picker。
实现细节（CSS 变量 + :where 解耦、Shiki 主题切换、FOUC[7] 处理）见 web_theme。
构建与发布
- CMS: Hexo
- Markdown Renderer: Markdown-Exit with the following plugins:
- Syntax Highlighting: Shiki
- Comment: Twikoo
- Build Tool: ESBuild · Minify-HTML
- CI/CD: Cloudflare · EdgeOne
- Page Hosting: GitHub (23.7) · Cloudflare Pages (24.9-now) · EdgeOne Pages (25.9-now)
- OSS: Bitiful · Cloudflare R2
- CDN: Bitiful · EdgeOne
- DNS: DNSPod
- Domain Name: Namesilo · Tencent Cloud
- Analytics: Google Analytics · Microsoft Clarity
- Search Engine: Google Search Console · Bing Webmaster
一款免费且灵活的私人笔记应用，Obsidian - 磨砺你的思维。 ↩︎
Obsidian 的双链语法
[[页面标题]]，在笔记之间建立可双向跳转的引用，是 personal wiki 的基础写法。 ↩︎Obsidian 的 Bases 功能，可以按 frontmatter 字段把符合条件的笔记聚合成可筛选、排序、分组的数据库视图，类似 Notion Database。 ↩︎
Frontmatter 一词来自出版业，原指正文之前的标题页、版权页、目录、前言等“正文前材料”。Markdown 借用这个说法，用来指文章开头的元数据区；在 Hexo 中通常使用 YAML 书写。 ↩︎
vim 描述文本结构的一类语法，如
iw（inner word）、it（inner tag）、i"（inner string），配合d/c/y等操作符可以以语义为单位编辑文本。 ↩︎一种紧凑的图像占位算法，把图片压缩成几十字节的字符串，作为加载完成前的模糊预览，避免布局抖动；详见 thumbhash.com。 ↩︎
Flash of Unstyled Content，浏览器在 CSS 完全应用之前先按默认样式渲染页面、然后又切换到正确样式造成的视觉闪烁。 ↩︎
评论