Vicverse 更新日志 #4：评论系统、青橙视觉与极简入场

这次更新让 Vicverse 变得更像一个真正可以被访问、回应和停留的网站。

它不只是视觉改动，也不只是新增一个功能。

这次同时完成了几条线：

• 评论系统上线
• 首页和文章页视觉继续优化
• 专题图换成统一漫画风
• 浏览器标签页图标换成 Vicverse 标识
• 首页加入极简黑底入场动画

关键词可以写成：

Leave space. Let the site breathe.

评论系统上线

Vicverse 现在有自己的评论系统。

评论被放在每篇文章底部，不需要登录。

访客可以选择：

• 匿名评论
• 填写昵称评论

评论会立即显示。

如果需要维护，我可以在评论区点击“管理”，输入管理密码后删除评论。

这套系统没有使用 GitHub Discussions，也没有使用 Disqus。

原因很直接：

我不希望读者为了留言必须登录 GitHub，也不希望网站评论体验被第三方平台完全接管。

当前实现使用 Supabase 存储评论，通过本站服务端 API 读写数据。

浏览器不会拿到 Supabase 的高权限密钥。

相关接口：

app/api/comments/route.ts

前端组件：

components/Comments.tsx

青橙视觉

上一版 v5 主要建立了橙色视觉。

这次在保留橙色主色的基础上，加入了更明确的青色辅助色。

青色没有替代橙色，而是用来补充“水下、科技、冷光”的感觉。

它主要出现在：

• 首页首屏辅助标识
• 当前主线信息块
• 四条主线卡片 hover 状态
• 部分动态扫描光效

这让 Vicverse 不再只是黑色和橙色的强对比。

它开始有一点更接近水下环境和机械冷光的层次。

不过青色也不是哪里都适合。

在后续的入场动画里，我删掉了三角形外围的青色呼吸边框，只保留橙色主体。

有些地方需要复杂，有些地方需要留白。

导航与联系区细节

电脑端导航栏之前只覆盖内容宽度，看起来像一段短条。

这次把导航背景改成横向铺满整个窗口。

导航内容仍然和页面主体对齐，但背景不再显得短。

Contact 区域里，Gmail 地址也做了换行处理。

这样 Gmail 和左侧学校邮箱在视觉上更对称。

这些不是大功能，但会影响网站的稳定感。

细节如果不稳，整体就会显得像模板。

专题封面替换

专题页原来使用的是旧照片、头像和 logo。

它们能用，但不够统一，也没有真正表达每个专题的气质。

这次四个专题都换成漫画风封面，并统一转成 WebP，减少加载体积。

四张封面的方向分别是：

• 水下机器人：深海、机器人、蓝色极简科幻
• 游戏思考：高速竞技、战术移动、Apex 气质
• 音乐分析：学院、采样器、灵魂乐与辍学三部曲氛围
• 换血记录：代码控制室、版本时间线、Vicverse 重构

这些图不是直接复制某个已有作品，而是提取气质后重新生成。

它们让 Projects 页面更像 Vicverse 自己的专题地图，而不是模板留下来的图片陈列。

资源位置：

public/static/images/projects

浏览器标签页图标

这次也修复了浏览器窗口栏里的网站图标。

原来显示的不是我想要的 Vicverse 标识。

现在 favicon、Apple touch icon、Android icon 都从当前 logo.png 重新生成。

相关文件：

public/static/favicons/favicon.ico
public/static/favicons/favicon-16x16.png
public/static/favicons/favicon-32x32.png
public/static/favicons/apple-touch-icon.png
public/static/favicons/android-chrome-96x96.png

浏览器 favicon 有缓存，所以旧图标可能不会立刻消失。

但线上资源已经换成 Vicverse 自己的图标。

黑底极简入场

这次最有性格的改动，是首页入场。

网站内部内容已经越来越丰富，也越来越复杂。

所以首页真正出现之前，需要一个更安静的入口。

现在第一次进入首页时，会先看到黑色背景。

中间只有一个橙色三角形。

没有说明文字。

没有按钮文案。

用户触碰三角形后，开场动画开始。

最初版本里三角形外围有青色呼吸边框，但效果太强，也不够干净。

最后改成只保留橙色三角形。

它是一个顶角下榻的钝角等腰三角形，看起来更稳，也更有留白感。

V 形船迹

开场动画最初尝试画一艘船。

但具象船体效果不好。

最终改成一个更抽象的橙色 V 字。

它像船，也像箭头，也像 Vicverse 的 V。

V 的尖端朝右，从屏幕中间缓慢穿过。

船尾的浪花没有画成泡沫，而是用很细的橙色 V 形动态网格表现。

浪花和 V 字开口之间保留了一段距离。

这样画面更干净，也更接近这个网站现在需要的气质。

动画结束后，主页内容出现。

当前入场只在同一个浏览器会话里出现一次，避免反复打断阅读。

部署结果

本次更新已构建并部署到 Vercel Production。

正式域名：

https://www.vicverse.me

本次验证过：

• 评论发布、读取、删除可用
• 专题图资源可访问
• favicon 资源可访问
• 首页构建通过
• Production 部署状态为 READY

后续方向

下一步不一定是继续增加功能。

Vicverse 现在更需要的是节奏。

评论系统让文章可以被回应。

专题封面让内容入口更像一个世界。

入场动画让网站在进入前多了一段停顿。

后面要继续做的，是让这些东西变得更克制、更耐看。

内容可以复杂。

入口要留白。

From chaos to structure.