全新个人网站 Gamer 即将上线

前言

观察页脚不难发现，本站已经坚持了四年多了。四年间博客系统一直是Wordpress，部署在阿里云香港服务器，主题是从一款免费主题魔改折腾出的。

WordPress的这一套lamp技术有优点也有缺点，当初上手时相当容易，图形化界面就能搭建起网站，后期功能全靠插件，经典的编程语言和框架也能很快在网上找到案例分析。但想完全自定义别人的主题，折腾那套古老的PHP系统，实在有些乏力了。况且玩博客这么久，看到各路大佬们优雅的页面，难免心生羡慕，因此决定用现代的前端轮子自己造个博客。

因为博主是个无可救药的玩家，新网站被命名为Gamer，主题自然也是游戏。简单来说就是博主喜欢什么游戏元素，就缝合进去，四年里看到其他博客有什么功能/创意，也缝进去，真是“赛博弗兰肯斯坦”了。

你可以访问https://blog.hiripple.com 来新网站逛逛。

Gamer中除了搜索组件kBar，其他组件皆为自行实现，因此可能有不少BUG，目前仍处于开发中，欢迎反馈。

框架

Gamer的前端/全栈框架是Nextjs，后端为Supabase，部署在Vercel，对象存储为阿里云OSS。

博主并没有正经地学过前端技术，研究生期间的课题也是加密算法，因此一套流程走下来，才知道现代的框架居然已经这么方便了。例如，开发过程可以热模块替换 ，代码修改后，页面会自动更新，无需手动刷新。第一次写TypeScript，确实感受到了更好的类型安全和代码提示，也难怪自己乱写一通后，Build的报错可以修一天。

用过Supabase才感受到，原来现在搭建一个后端服务可以这么轻松，不需要配置服务器、数据库、编写后端编程语言代码、构建 API 接口、实现认证系统、设置文件存储服务，处理部署、扩容和维护等一系列操作，官方服务只需要注册个账号，自部署也可以Docker完成，动动手指一个后端即服务系统就完成了，里面的数据库、Auth、边缘函数、实时订阅等都被用在了新网站上。

部署的平台是Vercel，不愧是Nextjs的亲爹，项目一旦Push到GitHub以后立马自动部署，CDN、图片优化都是一条龙服务，方便到极致，serverless的魅力。反之在阿里云的Wordpress，连迁移都有些无从下手。

主题

或许是工地设计语言，但应该还算……个性吧。

样式

主题是游戏，那博主就希望实现一个较强的“交互”，进入首页就可以看到一把大师剑缓缓浮现，它甚至会跟着你移动，是不是给用户一种即将踏上冒险、成为钦定勇者的感觉？（这样的首页虽然信息密度很低，但难道不酷吗？）

进入首页，你可以用键盘/手柄选择菜单、进入博客（还在开发中），可以用cmd + k快速搜索，还有博主从某个游戏的源文件里提取的点击音效。

Gamer也有许多参考游戏设计的隐藏（指导：宫崎老贼），同时也包含了一个小游戏，找出网站全部的游戏彩蛋，老玩家可以试试？

友链改名为“社群”，这个卡片样式有没有让你想起某款游戏？ Gamer的大部分设计就是这么抄的。这个Rank等级可以根据互动的评论数量进行评定，一起逛逛对方的网站吧～

闪念页面的创意直接就是窃取的@skywt，其实本站很多的设计思路都受skywt佬的影响……

其他的各种自定义样式，都是后话了。 标题、应用、图片、代码等正文样式都会改为自己设计的复古像素风，保持主题样式的一致性。

目标

开发尾声往回看，才发现自己是一个只会“加法”，不懂“减法”的人。喜欢的东西太多，需要的功能太多，全部缝合进去，难免让整体看起来有点乱。矛盾似乎无处不在，既想要现代化的设计、动画，又想要复古的像素游戏风UI，弄成了颇具“冲击力”的组合。其次是颜色，喜欢的各种游戏主题色可能天差地别，放在一起则是灾难般的表现。

在开发中期才定了几个目标：

• 一致的设计风格
• 载入速度
• 可读性

之后所有的设计思路都必须满足三个目标，特别是可读性。一个博客最重要的还是内容，因此不能让花里胡哨的样式影响到阅读。

为了保持设计风格的一致，字体还是默认选择了像素字体：缝合像素字体。但考虑到可读性，就在博客加入字体切换功能了，阅读时可以自行切换到楷宋，并且浏览器可以记住你的选择。

最初只是觉得，一把缓缓浮现的大师剑很酷，但没考虑可读性的问题。请问一把莫名其妙放在左边的剑，到底是想干什么？

那么要做的就是赋予它在阅读上的功能，同样是参考了某款独立游戏，加上了“黑潮”，使其成为目录。

速度的优化也费了不少功夫，例如动态载入、服务端组件和客户端组件分离、各种压缩等，最后把gtmetrix成功刷到了100%，谷歌page speed也有97左右，速度应该还不错。

其他的一些细节包括非首页自动展开、记住用户选择等，后面等边看边修吧。

颜色

统一的主题色可以让网站看起来更和谐，早期的Gamer为了缝合更多的游戏，页面五花八门。最后的阶段开始做“减法”，将主题色定为 Oneshot 紫 + Zelda 绿，还有常规的黑白。没错，博主不懂设计，这些色调都是用取色器从游戏中偷的😊。

日/夜间模式

日夜间模式切换一直是我期望实现的目标，引用Skywt的一段话：

让网站支持 darkmode 是我的一个执念。因为：1）所有浏览器、操作系统都有了 darkmode 的功能，如果不去兼容这个功能，会感觉自己的网站是「功能残缺」的；2）我既想要纯白的简洁设计，又想要在被窝里看着不伤眼睛的暗色设计。同时做两套主题能够满足我这样的要求。

然而 darkmode 设计和实现起来并不容易。为了保证颜色的协调，往往需要对两套主题单独调整颜色，并不是简单的「反色」。

Gamer的思路也类似，为两个主题设计了两套颜色（日间模式是KOJIMA灰哦）。至于切换主题的方式，因为找不到合适的位置，于是就做成了可拖拽的工具栏……

i18n

此前Wordpress博客的另一大痛点就是国际化，想在原主题上加i18n，那会是非常大的工程。好在Nextjs的路由系统可以很方便地加入国际化，配合自带的无刷新载入，可以实现在路由层面快速切换语言，满足高性能和SEO的需求。

正好目前在学习日语，博客因此准备了中日语三语切换，目前还是机翻，后续会人工翻译/核对，但也不能保证全部博文的国际化。

小结

Gamer其实还有很多没有提到的功能，例如realtime、实时状态、新评论区等，细心的话用谷歌浏览器的话，还可以发现本站的UI是支持HDR的。HDR一直是博主非常喜欢的一个特性，毕竟光线是视觉上最重要的要素，高亮度和对比度让数字世界更接近真实世界。但新网站还没有全面拥抱HDR，因为万恶之源Safari（HDR组件在不支持的浏览器上效果太差了）。

最后，hiRipple的Wordpress博客将会逐步导出博文、评论，搬迁到新地址。新网站逐步完善后也会在GitHub开源。