806 字 3 分钟

Aria-7th Lab 建站记录:从首页氛围到可长期使用的博客

从 Astro 重搭骨架到一点点添上交互、音乐和国际象棋,这个站点是怎么长成现在这样的。

新版博客的名字改成了 Aria-7th Lab。旧版叫 Firefly,虽然也挺好,但总觉得不够像”自己的地方”。Lab 这个词轻一点,不像 Portfolio 那么正式,也不像 Diary 那么私密——刚好是我想保持的中间状态。

这次没有用主题

不是对主题有什么意见。只是搭了这么多次博客,每次换个主题就觉得哪里不对,改来改去最后发现不如从头写。这次用 Astro,主要因为它对静态内容天然友好,而且不会往浏览器塞一坨 JS。

页面交互全是用原生 JS 和 CSS 写的。倒不是刻意追求什么纯洁性,只是不喜欢为了一个 hover 效果引入一个库。

首页想做一个”小房间”

首页不是文章列表。它是一张桌面,背景是动态的,上面铺着一些能碰的小东西:

  • 左上角的胶囊导航,鼠标划过会轻轻弹一下。
  • 右侧的 Aria Dock,收着音乐播放器和运行时间。
  • 中间的终端卡片,点一下会展开一个假终端,头像还会掉出随机纸条。

这些东西没什么实际功能,但每次打开页面看到它们在,会觉得这个角落是活的。

终端里循环打字的内容也是一堆没什么意义的英文句子,会自己缩回去换新的。对,就是故意没意义的。

音乐

旧版博客的音乐播放器选了 Meting + 网易云歌单,但那套方案依赖外部服务,有时候封面加载不出来,有时候接口挂了。

新版做了一个本地模式的播放器,唱片样式,封面会跟着转。目前只有一首 Shelter,Porter Robinson 的,从网易云扒了 128kbps 的版本放在 public/audio/ 里。不占多少空间,而且 <audio> 标签设了 preload="none",不点击就不会加载,不影响页面速度。

歌词是手写的 LRC 时间轴,不太准但够用。

文章迁移

旧版 Firefly 里能看的文章搬过来了:

  • 从零搭建 AI 绘图平台的复盘
  • Arch Linux 安装记录
  • MiniMind-O 本地推理配置
  • B 站音乐播放器的折腾过程
  • 自定义光标效果

每篇都保留了原始的 frontmatter 结构,标签和分类也同步了。博客页面加了标签筛选、文章目录、阅读进度条和 Giscus 评论区。

还有一篇示例 welcome 文章正在改(就是你现在看的这篇)。

国际象棋

加了一个象棋小房间,用 chess.js 处理规则。不是为了写什么酷炫 AI,只是想博客里有个能停下来玩几分钟的东西。

棋盘配色是粉蓝调,走子有过渡动画,被吃掉的棋子会飞出去。右侧有个书签,鼠标移上去会弹出设置面板——难度、执黑白、认输都在里面。

Works

作品页不再写假内容了。卡片直接拉 GitHub 上 pinned 的公开仓库,点进去跳到对应项目页面。

后面

搜索和 RSS 还没做,归档页也还是空的。不过暂时不影响使用,有空慢慢补。

COMMENTS 留下想法