更新了博客页面

更新了博客页面

2757字13分钟

在 gpt-5.6 的帮助下，对博客的前端页面进行了更新。

之前搭建这个博客的时候，vibe还没有那么流行，大部分页面都是手搓的。现在有了agent的辅助，可以更加专注于页面的设计而不需要花精力在代码实现上了。

尽管如此，我对ai的代码能力还是感到堪忧：

尽管如此，也实在比我自己敲css调样式要好得多。

设计思路

最早接触astro还是社团提到要使用它来重构社团的前端页面。作为“(业余)前端人士”被拉近运维群的我了解了这个框架后，被它的Zero JS的理念所吸引，这和我之前常用的React有很大的区别。我之前也用过Svelte框架，语法上和astro很像，它的运行时开销也很小，但显然astro更进一步。说实话，我其实很享受写现代原生js，没有各种框架带来的限制或性能焦虑，在博客上这种自由显然是被允许的。另外，将框架里的各种设计思路带到原生js也是很享受的事情。

对于一个博客，特别是对我这种实际没有什么技术水平，做不到持续的文章产出的人来说，我认为最关键的只有文章页面。大部分访客都应该是从搜索引擎直接跳转到我的文章页面，对吧？他们可能只是想要找到某个问题的答案，所以在文章页面，我尽可能保持了克制，不加入多余的装饰。

大部分情况下，我并不对产蛋的鸡感兴趣，也不对蛋上的二次元美图、风景图、大头照和live2d感兴趣。

我也不认为别人会对我感兴趣。但如果……

如果一个人从文章页面点进了主页，可能说明他对这篇文章相关内容（或者……对我？）感兴趣。对这种主动式的访问，我愿意给出一点……不一样的东西，更加个性化的东西。

重构

第一版博客

个人博客的影响力可能真的没有在知乎上发文章要大，但作为一个高度定制的个性化的展台，更多的是对个人形象的展示。这也是我为什么不喜欢那些默认模板的原因之一。

另一方面，默认模板确实对不上我的审美。我想要一些特别的东西。

我最早的博客其实是在高中搭建的，但太过远古，也很笨重（我甚至搭了个完整的前后端monorepo来管理访问量、评论等），懒得维护了，遂抛弃。

之前接触了astro后，我确实又萌生了重构我的博客的想法。当时我对某创新立体节奏音游很喜欢，它的UI设计也是音游中数一数二的。并且音游的曲包、选取，天然就和博客的分类和文章对应上了，这就是我设计思路的来源。另一方面，个人比较喜欢极简一点的风格，于是在Arcaea的设计上做减法后，得到了第一版博客：

页面设计

XiC's Blog

熙晨的博客

Projects
Blog
About

玩过啊卡伊的朋友们应当看出端倪来了（

首页没有完全复刻啊卡伊，一是不太方便（当时还都是手敲，有点懒），二是太游戏风格也不合适，毕竟是博客嘛。不过还是保留了菱形的设计。

blog

而文章列表页面就几乎是完全复刻了选曲界面。

顺带一提，带交互的文章真的很酷，所以我在文章里用了mdx，上面都是让gpt一比一复刻出来的，可以互动。也算是给老博客一个纪念了。

字体

Arcaea 的title来自于这个字体：

TYPE SPECIMEN / 01LATIN DISPLAY · LOCAL TTF

FAMILY / King's Gambit

King's Gambit

TYPE TESTER / CLICK TEXT TO EDIT

ABCDEFGHIJKLMNOPQRSTUVWXYZ!',-.:;?

WEIGHT / REGULAR

STYLE / DISPLAY

FORMAT / TRUETYPE

18King's Gambit
28King's Gambit
44King's Gambit

王翼弃兵。很极简、好看的艺术字。不过这个字体支持的只有26字母和常见符号。

为了找到相匹配的中文字体花了我很大功夫，还是回忆起了当时在B站看过的一个视频：

VIDEO ARCHIVE / BILIBILI02:19
不再遗忘，汉仪阿尔茨海默病字体OPEN BILIBILI
TYPE SPECIMEN / 02CJK DISPLAY · LOCAL TTF

FAMILY / 汉仪阿兹海默

汉仪阿兹海默

TYPE TESTER / CLICK TEXT TO EDIT

熙晨的博客 · 汉仪阿兹海默 · HYAlzheimer

WEIGHT / REGULAR

STYLE / DISPLAY

FORMAT / TRUETYPE

18汉仪阿兹海默
28汉仪阿兹海默
44汉仪阿兹海默

相似的风格，而且很有味道。

问题

但总体来说，这个博客并没有用心维护。不是说内容上，而是这个网站对移动端支持为0，而且文章列表页面确实也很难快速地查阅文章。

第二版博客

第二版博客的契机是社团的前端重构（没错，还是之前那次，只不过鸽到了现在）。这版博客的大部分代码是ai写的，我提供了设计的指导。以下内容也是ai写的，但大体上是我的思路吧。

故事绕了一圈，又回到了社团的前端重构。没错，还是前面提到的那一次，只不过一路鸽到了现在。几年过去，AI写前端的能力确实强了不少；再回头看自己的旧页面，那些曾经很满意的斜边和动画，也开始显得有些用力过猛。

于是我把旧站交给了它。原本只是想看看能得到什么草图，没想到OMP还主动调用了我OpenRouter上的Nano Banana生成预览图。第一次看到那张图时，我没有立刻想“照着做”，反而先确认了一件事：旧版里真正舍不得删掉的，其实只有字体、菱形、切角和那一点音游式的秩序感。

剩下的要求就变得很清楚了。它仍然可以有个性，但首先要像一个博客；它可以让人联想到游戏界面，但不能要求读者先学会操作一套游戏菜单。

从三颗菱形开始

我最先重新审视的是首页。旧版的三颗菱形很有辨识度，可一旦把浏览器缩窄，它们就像被硬塞进手机屏幕的桌面摆件：还能看，却已经不好用了。

新版没有把它们简单地缩小，而是把“菱形”拆成了更基础的东西——切角、色块、细线和轻微错位的阴影。三个入口铺在页面右侧，标题留在左侧。鼠标经过时，色板和阴影会短暂错开，像光线穿过不同介质后偏折了一点，于是这个组件有了RefractionLink这个名字。

第二版博客首页

第二版首页。第一版的字体和几何语言还在，但三个入口已经变成了真正适合导航的组件。

首页仍然没有塞进最新文章、热门标签和一长段自我介绍。一个人如果已经从文章点到了这里，他大概只需要知道下一步能去哪里：读文章、看关于页面，或者打开GitHub。再多的内容反而会让这三个选择变得模糊。

到了移动端，构图也不再被强行保留。标题缩小，入口纵向排开，切角根据固定尺寸重新计算。桌面和手机看起来不完全相同，但它们终于都像是为自己的屏幕设计的。

再打开一次文章列表

首页解决以后，真正麻烦的还是文章列表。第一版几乎照搬了选曲界面，这在截图里很有趣，实际找文章时却不太友好。系列、文章和预览都挤在同一个舞台上，读者得先理解我的设计，才能找到自己想看的内容。

我不想完全丢掉“选曲”的感觉，所以第二版换了一个顺序：先把它当作目录，再考虑它像不像游戏。桌面端左侧保留当前文章的标题、简介、日期和封面，右侧则是一条可以直接扫读的文章轨道。系列成为SET，文章成为具体的曲目；熟悉音游的人能看出这个隐喻，不熟悉的人也不会因此迷路。

第二版博客文章列表

第二版文章列表。预览负责营造氛围，右侧轨道才是主要的导航。

手机上则更干脆：预览区直接消失，只留下完整列表。少了一张漂亮的封面，却换来了更快的查找，这笔交换很值得。

页面背后的内容结构没有跟着视觉一起重写。系列层级、草稿过滤、日期和预览图仍然来自Astro的Content Collection。以后增加一篇文章，只要写好元数据，它就会出现在正确的位置，不需要再去维护另一份写死的导航。

最克制的地方

轮到文章页面时，我反而没有太多想改的。大部分访客从搜索引擎进来，只是为了读正文；在这里展示设计欲，往往意味着让内容为装饰让路。

所以文章页继续使用普通的单栏排版。改动藏在不太显眼的地方：移动端间距更合理，长标题可以正常换行，代码和宽内容不会把整页撑开，顶部导航也更容易使用。评论、目录、数学公式和原来的Markdown扩展则全部留下。

做到这里，我才慢慢确定了第二版的原则：个性化应该出现在访客主动探索的地方，而不是挡在内容前面。

留下来的东西

现在回头看，第一版当然不是一无是处。它很直接地保存了我当时喜欢的东西，也正因为这样，几年后再看仍然能认出那是我的页面。问题只是，它更像一张为了截图而完成的界面，而不是一个准备长期放文章的网站。

第二版没有把过去全部擦掉，只是把那些元素收了回来。King's Gambit、汉仪阿兹海默、切角、细线、菱形和音游式的层级都还在，只是阅读和导航终于排在了它们前面。

至于这套设计能维持多久——希望不要等到社团的下一次前端重构。

最后

我的博客的重构次数和我的文章数目不相上下。希望未来能多写一点东西吧。That’s all.

哦，评论区其实也很意义不明，但还是留一些会有人在意的念想吧。↓