685 字2 分钟

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

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

新版博客的名字改成了Aria-7th Lab。旧版叫Firefly,是模板自带的命名[摊牌了(~ ̄▽ ̄)~]

这次没有用主题

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

页面交互全是用原生JS和CSS写的

首页想做一个”小房间”

这次的首页不是文章列表了。它是一张桌面,背景是动态的(老版本,以后都使用静态的背景),上面铺着一些能碰的小东西,因为物理效果导致性能很低,未来可能深度优化一下,实在不行就不使用物理效果了:

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

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

终端里循环打字的内容也是一堆没什么意义的句子,灵感来源于BiliBili偶然看到的个人博客,出于向往便自己写了一个

音乐

旧版博客的音乐播放器选了Meting + 网易云歌单,这个新博客继承了

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

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

文章迁移

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

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

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

国际象棋

加了一个象棋页面,用 chess.js 处理规则。想博客里有个能停下来玩几分钟的东西(其实是不知道添加什么了,不过我也是用了很多心思的,可以体验一下)

Works

卡片直接拉 GitHub 上 pinned 的公开仓库,点进去跳到对应项目页面;现在的项目会成为我未来的黑历史吧

后面

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

同系列

相关阅读

COMMENTS留下想法