第一篇文章写的是服务器上线。那时候博客还更像“能跑起来的网站”：Azure、Ubuntu、Nginx、Hexo，所有东西都各司其职，但页面本身还没有太多自己的味道。

这一次，我想让它更像“我的博客”。

最开始想改的是几个很直观的东西：顶部导航里的太极图标、偏红的主题色、默认感比较强的界面。后来方向慢慢变清楚了：整体颜色改成更亮的蓝、黄、白，图标换成更轻的太阳波纹，背景和过场图则使用《我推的孩子》相关的官方视觉，尤其是黑川赤音。

真正花时间的是页面切换动画。

我原本只是想要一个“好看一点的切换效果”，后来找到了 Codrops 的 Page Reveal Effects。它的重点不是把旧页面和新页面像轮播图一样左右推来推去，而是让几层全屏幕布从一侧扫过：旧页面被遮住，内容在幕布下切换，然后幕布继续离开，新页面被揭示出来。

这个思路很适合做成博客的主导航过场。我把原本的纯色色块换成随机三张图片，让它们像三层画面一样横向划过。现在点击顶部的：首页、归档、关于、友链，会触发这套图片幕布动画；文章、标签、分类等普通链接则保留主题原本的加载动画，只是颜色调成了更淡的蓝黄白。

实现过程中也踩了不少坑。

一开始动画看起来不像参考效果，有时甚至像“卡一下就跳走”。后来排查发现，图片本身并不是主要问题，真正容易造成顿感的是 PJAX 替换页面内容和重新初始化脚本。于是我把页面切换提前到幕布完整遮住屏幕的时候，并把一些后续脚本延后到转场结束后再执行。

另一个问题是停顿。Codrops 原版的 Triple Swoosh 会让前两层色块在屏幕中央停留一段时间，这对纯色块很好看，但换成图片以后就像画面突然停住。最后我把图片面板加宽，让图片在遮住屏幕期间仍然继续移动，视觉上更像连续扫过去。

目前过场图片池里有 16 张图，放在：

1
/images/oshinoko-transition/

每次切换会随机选出 3 张。它们有些来自 47 都道府县企划，有些来自 Valentine、Halloween、White Day 和赤音相关视觉。图片不只是装饰，它们让这次切换动画有了明确的个人偏好。

最后还补了手机端。桌面顶部导航是 #main-nav，但手机菜单其实是另一套 #mobile-nav，所以最开始手机上看不到这套动画。修完以后，手机菜单里的四个主导航也能触发同样的图片幕布转场。

到现在，这个博客不只是“部署在服务器上的 Hexo 页面”了。它有了自己的颜色、自己的图标、自己的过场动画，也有了一个很小但确实存在的审美偏向。

下一步也许会继续整理文章内容，把服务器、课程项目、深度学习实验都慢慢写进去。网站本身先有一点性格，写东西时也会更愿意回来。