这个网站是我在网页设计领域无尽实验的结晶。我很自豪地承认，这个网站的构建以视觉愉悦为主要考虑，在某种程度上将实用性和性能放在次要位置。

出版原则

版本说明（colophon）是设计师向世界展示他们如何制作网站的地方。这一传统，也称为牌记，可以追溯到古代，包括美索不达米亚的泥板、唐朝出版的《金刚经》和中世纪伊斯兰手稿。一些版本说明中还包含典籍诅咒，不过据我所知，这份说明里并没有。

版本说明记录了书籍的出版、印刷等相关信息，对于了解古籍的历史背景、版本源流等具有重要意义。印刷出版延续了这一传统，一般安排在书籍的正扉页反面或封底，便于读者查阅。通常包含出版年代、印刷者姓名、印刷地点及图案设计者等相关信息。

最终这种做法也延伸到了数字和网络出版领域。如果你和我一样有着检查每个精美网站底层代码的癖好，这份说明是为你而写的。发现网站有提供版本说明时的那种喜悦，我懂的。让我们开始吧。

技术工具

本站使用 Astro 框架构建，采用了 Vanilla JS 和 Tailwind CSS。它以静态站点的形式部署，仅使用最少的客户端 JavaScript 渲染。我尽可能使用纯 CSS 来实现动效和交互设计。

服务器端渲染、图片优化和路由都在构建过程中完成，将我的笔记转化为静态网页。我写作都是用 Markdown，所以选择不在原文里加入任何组件元素。我曾考虑使用 MDX 来加速设计过程，但我更不希望破坏我的原稿，更何况这些只会让笔记变得更撩乱，面对存文字让我更容易进入并且沉浸在写作的状态。

我负责网站设计的创意方向、信息架构和功能设置。编码工作在 Cursor（一个 AI 代码编辑器）中完成，使用了更新的 Claude 3.5 Sonnet 模型。我对 HTML 和 CSS 再熟悉不过了，但 JavaScript 一直是我的软肋。Cursor 帮助我克服了程序错误，改进了代码，并为繁琐重复的任务提供了支持。

内容创作

我的笔记始于以要点形式记录的想法，用于快速捕捉思路。Bear 是我首选的个人知识管理系统。这些想法随后被充实为完整的文章以供发布。作为一个完美主义者，我常常让这些文章在笔记中沉淀数月甚至数年才见天日。

虽然我仍然相信给写作留出成长的时间很重要，比如通过相关或完全不相关的主题获得灵感，但我现在也认识到在它们完全成熟之前就让它们展翅可以帮助它们获得更多成长。

当笔记准备就绪时，我会将它们导出成 Markdown 文件，提交到我的个人 GitHub 代码仓库。这些文件随后会被推送到托管本站的 Cloudflare Pages。我知道使用 Obsidian 或 Logseq 这样的工具直接写作 Markdown 文件会更容易，因为它们是直接把比较保存为 Markdown 格式，但我对精美的软件设计情有独钟，而在 Bear 中写作是如此愉悦的过程，我觉得它帮助我更好地思考和写作。

字体设计

本站使用 Mostardesign Studio 设计的 Sofia Pro 作为英文标题和正文字体，Adobe Originals 的 思源黑体 用于简体中文，Dharma Type 的 Calling Code 用于等宽文本。所有网页字体均由 Adobe Fonts 提供。

虽然我更喜欢用衬线字体阅读长文，但我一直觉得几何无衬线字体更符合我的个性。

封面图中的标语使用了 URW Type Foundry 的 Corporate S，这是徕卡的品牌字体。这是对我钟爱徕卡相机的致敬——你可能应该在看到这个网站的红点标志就已经猜到了。

字体采用预加载而非懒加载，以确保我的独特排版能快速加载。我使用现代流体排版技术，结合数学计算和 CSS clamp 实现字体大小基于屏幕尺寸的平滑缩放。

编辑风格

我在大学时修过新媒体设计课程，发现了风格指南的重要性，也对此产生了痴迷。我倾向于使用英式英语写作，以哈特规则（也称为牛津风格手册）作为个人风格指南。

多年来，我根据每个网站的需求和信息呈现方式，在哈特规则的基础上发展出了自己的风格指南。它们通常包括牛津逗号、用于范围的 短破折号，以及用于插入语的长破折号。

我的排版选择不仅限于字体选择，还延伸到细节，如使用正确的引号（“卷曲引号”）而非直引号，使用真正的长破折号 — 而非用双连字符 -- 代替，以及在标点符号周围保持一致的间距。虽然这些细微的改进可能不被大多数读者注意到，但它们为阅读体验增添了一份无形的精致感和专业性，即使是在潜意识层面。

对于中文内容，我基于多年双语写作经验形成了个人偏好。这包括中文标点符号周围的精确间距，以及中英文字符之间的适当留白。例如，我会在混合语言短语中保持仔细的间距，如”使用 Git 作版本控制”而非”使用Git作版本控制”，以提高可读性。

历史沿革

我的网络出版之旅始于 1999 年，在 Blogger 刚推出时掀起的博客热潮中也跟风开了个博客。在 2002 年，当我意识到拥有自己的网络空间的重要性后，我购买了我人生中第一个域名 iamjenxi.com，并建立了自己的个人网站。

网站最初使用了 Movable Type，这是一个将网页生成为 HTML 文件的内容管理系统（CMS）。作为完全静态的站点，它加载速度很快，但每次更改都需要重建。我尝试使用 Wordpress.com 托管站点作为 Blogger 的替代品，加上我对 Movable Type 的不满，促使我在一年内换了 WordPress。本站已经使用 WordPress 超过二十年了。

我曾尝试过 Jekyll、Gatsby 和 Hugo 等静态站点生成器，但完全静态的站点缺少一些让我无法转换的功能。当 Anysphere 推出 Cursor 这个在编程界掀起风暴的 AI 编辑器时，我在几个个人项目中测试了它，以探索我一直渴望尝试的 NuxtJS 和 NextJS 这两个网络框架。

然而，我很快意识到我没必要用这些框架构建我的个人网站，因为我不会用到它们的大多数动态和交互功能。Astro 自推出以来就给我留下了深刻印象，我一直关注着它的发展。所以当我发现自己选择用 Astro 重建博客时并不感到意外。

Claude AI 帮助我在几天内完成了这次迭代，我能够在转移域名之前在测试实例上并行运行它。感谢 Cloudways，我能够以这样的方式设置，在需要时可以轻松切换回 WordPress。

未来计划

这个网站仍然是我网络实验的活文档。作为我最新想法的试验场，这些实验难免会造成一些 bug。如果你遇到问题，欢迎通过页脚的任何社交媒体联系方式与我联系。

一些正在计划中的功能包括：

• 改进双语内容管理，最好能让文章同时提供两种语言版本，以此低调炫耀一下我的翻译能力
• 完善自定义的纯 CSS 照片库，提供更好的浏览体验
• 将 Markdown 脚注以 Tufte 风格的边注形式呈现