最开始做 Tokyo Dev Log 时，我只是想给自己的文章找一个比默认模板更有记忆点的展示方式。后来内容越来越多：日语语法、技术笔记、日本生活、中国生活、羽毛球和个人项目都挤在同一个站点里。普通博客的首页虽然能列出文章，却很难让人一眼看懂“这是谁的站点，又在记录什么”。
于是我重新定义了这个项目：它不只是一个换了配色的 WordPress 主题，而是一套面向“在日本工作的程序员”的个人内容系统。
Tokyo Dev Log 记录我在东京写代码、学日语、观察生活、打羽毛球，以及把个人想法真正做出来的过程。
这篇文章记录我怎样把内容结构、视觉语言和 WordPress 工程组合到一起，也整理了过程中真正遇到的问题。
为什么没有继续做最初的宇宙轨道方案
项目早期尝试过 Three.js、知识星球和宇宙轨道。它看起来有技术感，也适合做一次性的展示 Demo，但实际使用后暴露出几个问题：
- 动画比内容更抢注意力；
- 首页很酷，分类页和文章页却很难延续同一种体验；
- 移动端的性能和可读性成本较高；
- 它能表达“技术”，却不能同时表达日语学习、日本生活和羽毛球；
- 每增加一个栏目，都需要重新解释视觉隐喻。
最后我放弃了旧方向，把主视觉改成“日系 anime 官网 + 贴纸拼贴 + 手帐纸片”。
这个方向更接近我想表达的个人感：有东京街景、有程序员角色、有手写记录，也能让不同栏目拥有自己的颜色和吉祥物。更重要的是，它不只适合首页海报，还能自然延伸到列表、文章、搜索和 404 页面。
首页不是文章卡片墙，而是一张站点海报
首页承担的第一个任务不是展示尽可能多的文章，而是让访问者在几秒内理解整个站点。
我把第一屏设计成动漫活动官网式的海报：顶部是黑色导航和跑马灯，中间是 Tokyo Dev Log 大标题、东京街景和原创程序员角色，下面则直接进入六个栏目入口。
六个栏目像六扇门：
| 栏目 | 英文 | 主要内容 | 主题色 |
|---|---|---|---|
| 日本語文法 | Grammar | JLPT语法、接续、例句与易错点 | 粉色 |
| 技術分享 | Tech | TypeScript、WordPress、性能优化与开发经验 | 蓝色 |
| 日本生活 | Japan Life | 在日工作、日常、旅行与语言环境 | 绿色 |
| 中国生活 | China Life | 回国准备、中日生活与工具差异 | 陶土色 |
| バドミントン | Badminton | 训练、装备、双打与比赛记录 | 橙色 |
| 個人項目 | Projects | Demo、技术栈、开发过程与上线记录 | 紫色 |
这种结构比传统的“最新文章 + 侧栏分类”更直接。访问者不是先猜网站有什么，而是从第一屏就可以选择自己感兴趣的频道。
栏目入口之后才是 NEWS / 新着記事。文章按手帐列表呈现，日期、所属频道和标题保持清晰，不再为每篇文章堆一张尺寸很大的卡片。首页末尾再放入 About Me，让站点内容和作者身份连起来。
用统一变量控制漫画感，而不是到处写一次性样式
动漫和手帐风很容易变成“装饰很多，但系统很乱”。为了避免每个页面各画各的，我先固定了一组颜色、描边、阴影和内容宽度。
:root {
--anime-ink: #253044;
--anime-paper: #fffaf0;
--anime-yellow: #f3dc75;
--anime-orange: #efa75f;
--anime-pink: #ee76ad;
--anime-brand-pink: #ff4aa2;
--anime-blue: #55b4df;
--anime-cyan: #78d9d0;
--anime-green: #abd77f;
--anime-purple: #927ee0;
--anime-shadow: 5px 5px 0 rgba(37, 48, 68, 0.48);
--anime-max: 1180px;
}
页面的漫画感主要来自几种重复出现的形状语言：
- 深色粗描边；
- 有方向感的硬阴影；
- 轻微旋转的贴纸；
- 撕纸边和笔记本横线；
- 半调点纹理；
- 少量不规则气泡。
我没有把每个区块都塞进圆角卡片。首页需要鲜明和热闹，真正阅读文章时则切换到低饱和的暖纸张背景，让正文、代码和表格重新成为视觉中心。
吉祥物不是装饰，而是栏目识别系统
六个栏目分别使用小熊猫、猫、柴犬、熊猫、水獭和浣熊等原创角色。它们会同时出现在首页入口、分类页插画和缺省封面里。
这样做有两个实际作用。
第一，即使文章没有设置特色图片，也不会突然显示一块空白或通用占位图。主题会根据文章所属栏目自动选择插画。
第二，读者在进入不同页面时仍然能识别自己所在的频道。颜色、角色和文字标签一起工作，比只依赖一条面包屑更直观。
WordPress仍然负责内容，而不是被当成静态页面生成器
我没有为了前端效果放弃 WordPress 后台。这个站点仍然要长期写作，所以发布、分类、摘要、特色图片和编辑体验都必须保留。
目前内容被分成三种模型。
普通文章
Technology、日本生活、中国生活和 Badminton 继续使用 WordPress 默认文章。这样 RSS、分类、搜索和常规编辑流程都可以直接使用。
日语语法
grammar 是独立内容类型，除了标题和正文，还可以组织 JLPT 等级、中文意思、接续、例句、相似语法、易错点和练习。
语法笔记和普通随笔的阅读任务不同。把它们放进独立模型后，归档页可以按学习用途组织，详情页也可以稳定显示语法专用模块。
个人项目
project 用于保存技术栈、项目状态、GitHub、Demo、背景、问题和解决方案。它不是普通文章换一个分类，而是一份可以持续补充的项目档案。
这些内容模型放在 personal-site-core 插件中，而视觉模板放在子主题中。这样即使未来更换主题，文章和字段仍然留在 WordPress 里。
主题结构怎样分工
整个前台由 SWELL 子主题接管，但没有把所有逻辑塞进一个模板。
wp-content/
├── plugins/
│ └── personal-site-core/
└── themes/
└── swell_child/
├── front-page.php
├── header-orbit.php
├── footer-orbit.php
├── category.php
├── archive-grammar.php
├── archive-project.php
├── single.php
├── single-grammar.php
├── single-project.php
├── stories.php
├── template-parts/
│ └── archive-editorial.php
└── assets/
├── anime-redesign.css
└── dist/main.js
front-page.php 负责首页海报、六个栏目、最新文章和个人简介。
分类页复用 archive-editorial.php。模板结构保持一致，具体颜色、说明、插画和吉祥物由栏目配置决定。这样新增文章时不需要手动选择一套视觉样式。
文章页则根据内容类型使用普通文章、语法或项目模板。代码块和编辑器正文继续兼容 SWELL 的内容样式，但站点 Header、Footer 和页面框架由自己的主题控制。
前台交互统一维护在 assets/dist/main.js，包括手机菜单、返回顶部、栏目门状态、入场动画和 Stories 筛选。没有为每个页面重复注册一份脚本。
分类配置比模板复制更重要
六个栏目如果各自复制一套 PHP，很快就会出现标题结构、分页或移动端修复不同步的问题。
因此主题会先根据当前归档或文章取得一个 visual profile，其中包含：
- 栏目标识；
- 主题色与强调色；
- 标题和说明；
- 默认封面；
- 吉祥物；
- 对应入口地址。
模板只负责消费这些配置。后台填写了分类说明时，优先显示人工内容；没有填写时，再回退到代码中的默认文案。这样站长可以在 WordPress 后台修改介绍，而不是每次改 PHP。
移动端不是把桌面页面缩小
这套视觉最容易出问题的地方是手机端。粗描边、贴纸、旋转和绝对定位在大屏幕上很有张力，但在窄屏上会快速挤压正文。
实际调整中，我重点处理了三类问题：
- 首页背景装饰在小屏幕上互相堆叠，遮挡标题和角色；
- 分类页插画、GO贴纸和吉祥物伸出视口，造成横向滚动；
- Grammar 的长标题撑开 grid，让整页宽度失控。
移动端保留品牌、标题、栏目色和核心角色，但减少纯装饰元素。六个栏目入口改为可横向滑动，文章列表恢复单列，图片和贴纸都被限制在安全区域内。
这不是视觉降级，而是重新决定小屏幕上什么最重要。
做完以后，我对个人博客有了新的理解
这个项目最大的收获不是某一个 CSS 技巧，而是意识到个人博客需要同时解决三件事：
- 身份：访问者能不能快速记住作者和主题；
- 结构：不同类型的内容能不能长期增加而不变乱；
- 维护：发布新文章时是否仍然简单。
只做视觉，几个月后内容会失控；只做内容模型，网站又可能没有任何个人气质。真正有意思的部分，是让 WordPress 的稳定编辑流程和一套鲜明的个人视觉共存。
还没有完成的部分
Tokyo Dev Log 仍在持续更新。目前接下来最值得做的事情包括：
- 继续完善语法详情页的例句、相似语法和练习体验；
- 做完整的 Profile / About 页面；
- 优化手机菜单动画和键盘操作；
- 继续压缩图片并检查 WebP 尺寸；
- 补充生产环境的 SEO、缓存、备份和恢复验证；
- 随着真实文章增加，继续调整首页 NEWS 和 Stories 的信息密度。
我不希望它最后变成一张只在作品集中出现的截图。更理想的状态是：每写一篇文章、每学会一个语法、每完成一个项目，这个站点都会自然长出新的内容，同时仍然保持同一个世界观。
这也是 Tokyo Dev Log 的核心——不是展示一个已经完成的人，而是把持续学习和生活的过程，一集一集记录下来。