重做个人主页：先回答放什么

从哪说起

老版个人主页（moehome）陪伴了我很久。它本身没什么问题——会动、好看、该有的都有。但时间久了，我意识到一个问题：它只是在构建后安静地躺在那里。打开它，就是纯导航加动态，没有沉淀、没有内容、也没有让人回来的理由。

moehome（旧版主页）

2026 年年初，初代版本完成。到 8 月，在一个契机下，我又想把它重新启动，让这个已经落地的主页焕发生气。这里的“重做”不是把开发周期拉长到一年，而是对一个完成后的版本重新发问。

所以重新动手前，我先逼自己回答了一个问题：一个个人主页，在 2026 年，到底该为什么而存在？

这次重新审视，最后落到一种思维方式的转变：初代是个人向的实现，满足我自己就行；新版是个人向 + 产品思维。所谓产品思维，不是把个人主页做成面向大众的产品，而是先假定这个作品会被其他人使用，再基于这个假定做设计和实现。配置化、消费层开关、文档、兜底清空，都是这个假定带来的要求。从个人向到个人向 + 产品思维，是这次重新启动最重要的一次实践。

先想清楚：这个页面放什么内容

这是我的第一个设计决策，也是最重要的一次提问。因为设计这个项目时，我面对一个尴尬：我已经有博客了，它容纳的是碎片——教程、踩坑、工具实践，开放、轻量、面向搜索。那这个个人主页放什么？

纯个人的碎碎念文章？我很快否掉了：一个没人看的页面，放再多个人文章也是自我感动，这种内容放在本地笔记里完成就够了，不需要一个网站来承载。

那我积累的摄影作品和回忆呢？它们散落在硬盘里，只有偶尔翻相册时才会被想起。它们需要一个被认真对待的地方——首先是给自己一个重新翻阅的窗口，如果有人恰好看到，那是附加的。于是影辑这个板块有了第一个明确的理由。

但只有影辑还不够。我需要一个能让人持续回来的东西。这里的“人”不是大众——个人主页的读者，从来都是气味相投的少数。我要的是：对技术、工具、学习这些话题同样好奇的人，路过一次，会想再来。不是自嗨，而是有阅读价值、有信息密度的内容。于是我给了自己一个定位：周刊。它信息密度可以做得非常高，这取决于你怎么定义它——我定义为高信息密度的杂志：技术、工具、学习、阅读四栏目。它不追求日更，但每一期都值得读。

到这一步，这个项目的内容版图才清晰了：

• 动态（Memos）——碎片，日常，让人看到活着的状态。
• 影辑——影像与回忆，需要一个更好的窗口，于是有了它。
• 周刊——高信息密度的周期内容，给人回来的理由。

两个内容板块的定位，不是拍脑袋定的，是被问题逼出来的：已经有博客了，还放什么？——答案是，放博客放不下的东西：影像，和高信息密度的周期内容。

所以新版不是推翻重来，是沿着老版的内容结构继续走——但技术栈换了一批（后面专门讲）。我重做的，是底下那套地基——以及想清楚它到底该装什么。

这篇文章不讲配置教程，讲设计决策——为什么这么做，踩了什么坑，以及哪些地方我觉得比老版强。

一、设计语言：从「网站」到「档案卷宗」

老版是我花过心思打磨的版本，有明确的设计理念——零运行时依赖、配置驱动、性能优先，终端风格，还通过 Memos 动态追求「活人感」，留言板做成了终端弹幕交互。我至今喜欢那些想法。但用久了，我发现它更像一张数字名片：聚合社交资产、展示品牌，而内容被放在了博客。重做时的核心问题因此变成：个人主页能不能不只是名片，而是内容本身的发生地？

新版我定了一个隐喻：整个站点是一份档案卷宗。

MoeWah 的新版主页

为什么是档案？我把个人主页理解为“关于这个人的一份档案”——出生年份、编号、登记、索引、附录。这个隐喻一旦立住，所有设计决策都变得有依据：

• 颜色只有 8 个 token，全是纸面质感：底色、纸面、墨色、次要文字、弱化文字、一个强调色、实线、发丝线。
• 板块像档案器件：SPEC 摘要卡、RECORD 登记卡、CATALOG 索引卡、LEDGER 总账、DIRECTORY 号码目录、STAMP 戳记。
• 编号不是一套扁平序号，而是分层的：主页与独立页面使用稳定的页面档案号——主页 MW-2018-NNN、周刊 MW-WKL-NNN、影辑 MW-ALB-NNN、动态 MW-MMT-NNN；周刊内容保留期号 YY-NNN，影辑目录条目使用 MW-CAT-NNN，项目使用 MW-PRJ-NNN，留言作为通信附录使用 CORR。首页板块仍使用 SEC.NN。页面档案号由配置手工维护，显示时补足三位，不因开关、分页或排序重排。编号不是装饰，是设计语言的一部分。
• 禁止圆角卡片（登记卡打孔和 tag 胶囊是仅有的例外）、禁止阴影、禁止渐变、禁止第二种强调色。这些禁令让视觉高度统一——新页面加入时，“它在档案里是什么”必须先回答。

这个隐喻最大的好处是可维护：以后加任何板块，不用重新设计，只需要回答“它在档案里是什么”。

二、性能：三板斧

个人主页的性能决定的是第一印象。图片是页面最大的体积来源，但优化不只是在图片上做文章：静态优先、构建期高亮、按展示尺寸处理图片，共同决定内容能不能顺利到达读者。

1. 构建期压缩：本地图在构建时按配置压缩，格式、质量和开关集中维护。
2. 按实际渲染尺寸裁剪：列表图片按容器尺寸输出，不让首屏加载一张用不上的原图。
3. 占位与懒加载：非首屏图片使用浏览器原生 loading="lazy"，加载失败保留明确占位，首屏内容按优先级处理。

占位层用纯 CSS mask 实现，不增加请求，颜色直接使用设计 token。性能在这里不是技术展示，而是让内容少等一会儿。

三、SEO：不是玄学，是工程

老版有 SEO 基础，新版只是把“让别人读懂”这件事继续往机器一侧推进：

• 页面按类型输出 JSON-LD，列表页和详情页各自承担清楚的语义。
• 分页页使用 noindex, follow 和 canonical，sitemap 只保留真正的索引入口。
• 图片按展示尺寸输出，内部链接从配置生成，页面保持清楚的 H1 层级。
• 普通外链、赞助链接和 UGC 评论分别输出对应的 rel 属性。

做完这些，可以说技术 SEO 这块在当前项目已提前预备好。它不是 SEO 清单，而是访问者通过搜索结果进入站点之后，仍然能找到正确内容的基础。

llms.txt 则是给另一种访问者准备的站点说明书：站点是什么、有哪些栏目、站长是谁、联系方式、内容政策、AI 使用说明，全部结构化，构建时动态生成。GEO 实践里我有一条判断：AI 时代，可见性有一半取决于大模型怎么理解你，与其等平台收录，不如主动给机器一个读懂你的入口——何况是做个人品牌呢：当别人问 AI 关于你时，它引用的应该是你的话，而不是别人的转述。

四、内容：三种节奏，各自独立

定位定了，接下来是实现。三个内容类型对应三种更新频率，各自是独立的体系：

动态（Memos）——碎片，日常。展示带白名单 tag 的公开 memo，只拉 PUBLIC，私密内容永不出现；它有增量刷新（第七节细讲），是唯一能实时更新的板块。

影辑——影像，一批一批。content collection + 灯箱，照片级标注（时间、地点、注释），首页有高光定格。

影辑在我这里的定位，不是“照片展示”，是一册卷宗——这正好和全站的档案隐喻是同一套语言：专辑就是卷宗里的一册，有封面（专辑卡）、有正文（图文叙事）、有记录（照片级标注）。所以影辑详情做文本铺排，不是功能增强，是让隐喻闭环：卷宗里的一册，就该是可翻阅的，而不是摊开在桌上的散页。道理也简单：你也不会买一本毫无文本描述的相册刊物——买它，买的是被讲述的那段旅程，不是印在纸上的照片。

用照片定格，用文本展开

周刊——周期发布。四栏目：技术 / 工具 / 学习 / 阅读。详情页有分级目录轨道、历史期刊索引、上下期导航，阅读版心 680px。

每个板块有独立的开关——关掉任何一个，导航、首页板块、SEC 编号、sitemap 全部自动联动回收，不留死链。配置一个开关，所有关联点跟着走，这是我坚持的「单一事实源」在开关体系上的体现。

把影辑和周刊两个开关都关掉，站点会立刻退回到 MoeHome 纯主页的形态：只剩动态、留言和主页骨架。新版不是推翻旧版，而是在同一套主页地基上做了可选扩建——影辑和周刊是两个可以独立拆除的翼楼。打开它们，站点才是旧版主页的丰富与延伸；关掉它们，它又回到最初那个简洁的入口。

五、影辑的高光与背景：给页面一点「生气」

影辑的定位确定后，我盯着各个核心页面看，陷入白茫茫的思考——结构是完整的，但它好像缺一点「生气」。

思来想去，我想到一个照片标记：highlight。影辑里的每张照片可以被打上这个标记，它不是用来排封面的——封面是另一套机制——它是用来「精选」的：被标记的照片，会成为这个页面的灵魂。

具体地，高光照片做了两件事：

1. 首页高光定格：精选照片在首页以影像的方式定格展示。
2. 背景池联动：被高光标记的照片，会进入背景播放的照片池——整个站点的背景不再是一张静态图，而是一个会呼吸的轮播：默认图与高光影像交替，默认图兼兑底。光是背景就做了两层结构。

这个联动的意义在于：影辑不再是一个孤立的内容板块，它的精选照片渗透到全站的气质里。你在浏览任何一个页面，背景可能正在播放你亲手标记的那张照片——这就是「生气」的来源。

页面间的联动

而带宽和展示的取舍，我选择交给大家：背景的总开关、高光开关，全部配置化。想省带宽就关掉轮播只留默认图，想有氛围就打开——这背后有一把统一的尺子：凡是依赖使用者环境与带宽的决策——交给他自己；凡是依赖专业判断的体验决策——设计者定死。联动也是自动的：关闭影辑时，背景池自动退化为默认图，不留死链。

六、周刊详情页：为了沉静阅读，重构

周刊的详情页是我花了最多心思的一个页面，初版却不是现在这样。

初版是左右布局：左侧历史期刊列表，右侧正文，桌面端吸顶。整套设计做完了，功能齐全——历史导航、上下期切换、所有交互都有。但当我盯着眼前的示例文章时，发现自己一直很难专注地看完。问题不在内容，在侧边——那个历史期刊列表的视觉存在，一直在拉扯我的注意力。

我果断重构了。重构的目标只有一件事：它必须是能让我沉静下来阅读的，不被打断，排版布局不会造成阅读压力。

于是有了现在的样子：

• 正文进入独立的阅读版心（680px），窄到刚好舒适、宽到不像信息流。
• 历史期刊列表从侧边移到了正文之后——需要时自然到达，不需要时绝不出现。
• 右侧只保留一个极轻的目录进度轨道：Scrollspy 跟踪你读到哪，悬停才展开细节，标题只展开当前条目，移动端直接隐藏。
• 评论区和赞助降级为阅读附录（CORR / APPX），在正文结束后才出现。

这个页面的设计哲学很简单：阅读体验优先于信息堆砌。侧边栏功能再有用，如果它干扰阅读，就该被移走或降级。判断标准也很朴素——我自己能不能安静地读完一篇文章。能，才算过关。

阅读体验优先

沉静阅读这个方向再延伸一步，就是后来的阅读增强：进入周刊详情页（以及影辑详情页），背景回归原始态（无默认图、无高光轮播，只剩纸面底色）。这个功能背后有一个设计判断：开关是把决策成本转嫁给用户，所以它只给使用者一个开关——至于背景怎么处理才不打扰，那是设计者该倾泻的事。用户只需要回答“要不要”，不需要回答“怎么要”。

七、动态增量刷新：一个“可选功能”的完整设计

这是新版最“重”的一项：动态页能不能不重新构建就更新？难点只有三件事：token 不能泄漏，增量内容要和静态内容长得一样，部署还要保持简单。

最终保留的是 Astro 的“静态优先 + 单端点” Hybrid Rendering（混合渲染）：全站仍是静态产物，只有 /api/memos/sync 按需运行；构建时把当前展示集合的快照（{uid: 更新时间}）嵌入页面，点击刷新后由服务端拉取、过滤并 diff，返回新增、修改、删除，列表统一按时间重排。

这里的关键不是接口，而是边界：token 只在服务端，增量内容仍走 Markdown + Shiki；静态渲染和增量渲染共用 MomentCard，不维护两份 HTML。Memos 的删除是软删，API 不会告诉你删了什么，所以快照对比负责识别变化。

我确实踩过一个坑：删除一条动态后，后面的内容补进前 30 条，被错误地当成新增插到顶部。最后的修复不是补判断，而是给卡片保留创建时间，同步结束后统一排序。这个细节说明，产品思维要覆盖“内容发生变化之后会怎样”，不只是“第一次打开能不能显示”。

八、抗破坏性变更：接口版本锚点

这是从老版踩坑总结出的纪律。Memos、Artalk 这类外部服务会改参数、换字段，适配不能只靠记忆。

所以每个接口在 config 里锚定版本号：

// memosConfig.ts
version: '0.30.0', // 与 Memos 实例版本绑定

// artalkConfig.ts
version: '2.10.0', // 与 Artalk 实例版本绑定

版本号不是备注，而是在约束部署方式：使用者部署 Memos、Artalk 时，不追着后端最新版本走，先固定项目验证过的版本。项目升级时，再把后端、适配代码和 config 一起升级、一起验证，而不是让后端单独滚动，等页面坏了才补救。服务未配置时，界面会显示对应的版本要求；升级后端，版本号必须一起校正。这样项目始终知道自己要适配哪一版接口，也能减少破坏性变更带来的错配。

九、技术栈：收敛，和走向主流

和初代相比，技术选型往两个方向走：收敛，和走向主流。

收敛是控制复杂度。Astro、marked、Shiki、hast-util-to-html 和 Markdown 构建处理器解决了主要问题，页面不引入 React / Vue，主题、灯箱和增量刷新使用原生脚本。个人站点不需要养一套多年以后自己都不认识的依赖。

主流是降低风险。Astro、Tailwind、TypeScript 和静态优先并不因为“主流”本身值得追逐，而是因为问题出现时有文档、有社区、有现成的解法。

收敛让它现在好维护，主流让它将来有办法维护。技术没有自己的叙事，它只负责让前面那套内容和设计继续成立。

最后

从年初完成初代，到 8 月重新把它启动起来，这次重做改变的不是技术栈，而是负责的对象：它仍然按我的内容和判断来做，但从一开始就假定会被其他人使用。每个选择前，我都会问一句：这是我喜欢，还是它真的能被使用？

前一个问题决定它有没有性格，后一个问题决定它能不能留下读者。它是按我的方式做的，内容是我的。从个人向的实现，到个人向 + 产品思维，这次重新启动走完了这一步。

如果你也在做个人站点，先别急着选框架。先回答：这个页面放什么，给谁看，为什么值得再次打开。答案清楚以后，剩下的工作才有方向。

具体怎么落成代码，我记在另外三篇里：《重做个人主页：建站的技术决策》 讲架构、性能、正文与复用的取舍；《重做个人主页：静态站的 SEO 基建》 把 SEO 工程面单列成文；《重做个人主页：把规则写给 AI 看》 收尾，讲这些经验怎么跨会话传下去。四篇走完，这次重做的全过程才算讲完。

我是 MoeWah，AI 时代，我想做点自己喜欢的。