我把博客改造成了怪盗的基地我把博客改造成了怪盗的基地

01起因：一个太安静的主题

原来那套默认主题没有任何错，只是它不会让人想回来。我给自己定了个标准：打开首页的三秒内，必须有一次「被砸到」的感觉。

Persona 5 的菜单早就给出了答案——不靠花哨的 3D，靠三件事：

• 极端的对比：纯黑 + 正红 + 米白，没有中间色
• 破碎的排版：撕纸字、歪斜卡片、被裁掉的圆角
• 有重量的动效：转场只有 0.45 秒，但每一帧都在推进信息

摩尔加纳摩尔加纳

喂，你这不叫改造，这叫偷。直接把 P5 的界面搬过来了吧？

我我

我只是把它翻译成 CSS。

02这次重写做了什么

整套东西是零框架、零构建的静态站：三个 HTML 文件（首页 / 文章 / 关于），一个 CSS，四个 JS 模块，丢进任何静态托管都能跑。

/* 全站的核心元件只有一个：斜切 */
.p5-btn {
  transform: skewX(-10deg);
  border: 2px solid #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}

配色也没有自由发挥的余地，全部收在四个变量里：

03关于素材

本站的图像素材来自 Atlus 官方配布的 P5R 虚拟背景、Steam 商店图与 P5X 官方 Fan Kit（官方明确写明可用于个人网站与博客），字体来自社区同人作品。

版权归 ©ATLUS ©SEGA 所有，非商业个人使用，页脚已标注。

04两个不太明显但很值的设计

• 数据与视图分离：文章是数据，页面是渲染结果。改一篇文章只动 posts.js，不碰任何模板。
• 语义结构优先：正文、导航、卡片都用标准标签（article / nav / time），JS 只负责填内容。以后想迁移到 Hugo 或 Astro，几乎可以原样搬走。

05接下来要做的三件事

1. 给文章加「按年份归档」的独立页
2. 封面图换成 srcset，移动端少下一半流量
3. 页头菜单改成真正的键盘主菜单：↑↓ 选择、Enter 确认

摩尔加纳摩尔加纳

你不是说要减肥吗？

我我

我说的是减 JS。