接着上一篇说
上一篇的结尾是「站搭好了，后面就慢慢写吧」。
事实是：站是搭好了，但它只有原作者的样子——头像是别人的，背景是别人的图，音乐走的是外部接口。能用，但不像自己的。
这一篇记录从那之后做的事，以及新踩的坑。
一、先立个规矩：能自己托管的，别依赖别人
改造的第一步不是改样式，是把外部依赖全部砍掉。
原来的音乐播放器是填网易云歌单 ID，让前端去请求第三方接口拿播放地址。这个设计有个致命问题：接口随时会变，歌随时会挂。
现在的做法很简单：
- mp3 文件放进
public/music/ - 歌词
.lrc也放进去 - 配置里只写本地路径
代价是仓库大了 25MB，换来的是：只要站还在，歌就不会挂。图片同理——头像、背景、照片墙，全部收进项目里。
二、买了个域名
上线一段时间后发现一个烦人的事：xxx.vercel.app 这个域名在国内时通时断。今天能开，明天可能就打不开，而且我自己都打不开的时候，根本没法排查问题。
于是买了个 .xyz 域名，一年几十块。
配域名这件事本身不复杂，但要理解它在做什么：
访客输入域名 → DNS 问「这域名指向哪」→ 域名后台返回记录值 → 找到 Vercel → 返回网站
所以要在两个地方各登记一次：
| 在哪 | 登记什么 | 不登记的后果 |
|---|---|---|
| Vercel | 「这个域名是我的项目」 | Vercel 收到请求直接 404 |
| 域名后台 | 「这个域名指向 Vercel」 | 全世界不知道去哪找 |
DNS 记录用两条：
A记录给根域名（@），直接写 IP——因为 DNS 规定根域名不能用 CNAMECNAME给www，写个别名让它自动跟随 Vercel 的 IP 变动
顺便说一下备案：站跑在 Vercel（海外服务器），所以不需要 ICP 备案。只有服务器在国内才需要走那套流程。
三、首页重排：从「一堆卡片」到「三栏」
原来的首页是横向铺开的：名片和播放器并排，下面文章轮播和照片墙左右分。
问题在于信息没有主次。播放器占了一大块，但那不是这个站的重点。
改成了三栏：
┌────────┬──────────────────┬────────┐
│ 个人名片 │ │ 📅日历 │
│ 音乐播放器│ 内容主区 │ 明暗切换 │
│ 歌词面板 │ │ │
└────────┴──────────────────┴────────┘
220px 自适应 220px
思路是：左右是固定信息（认识我、我在听什么、今天几号），中间是流动内容。
日历是自己写的组件（模板里没有）。做了两件事：今天用粉色高亮，有文章的日期自动打标记点——日期直接从文章的 frontmatter 读，以后写新文章日历上会自动出现。
四、音乐系统：从「能播」到「能跟着唱」
音乐这块踩了两个坑，都不是我写的代码，是模板自带的。
坑一：本地音乐的歌词被写死成空
配置里加了歌词，页面上就是不显示。翻代码发现，处理本地音乐时作者把 lyrics 字段硬编码成了空数组——外部接口的歌走一套逻辑，本地音乐走另一套，而本地那套根本没处理歌词。
坑二：点歌单切不了歌
selectSong 这个函数在音乐页被调用，但播放器的上下文里根本没这个函数。所以点击歌名什么都不会发生——代码里有个 typeof selectSong === 'function' 的判断，静默跳过了错误，连报错都没有。
这类 bug 最难查：不报错，只是不工作。
修完之后，歌词面板做成了多行滚动、当前行高亮，放在播放器正下方。
五、全屏 Hero 和动态海浪
最后是门面：进站第一屏。
结构是：整屏背景图（100dvh）+ 居中标题 + 底部两层动态海浪 + 下箭头。点箭头平滑滚到内容区，下滑时图片放大淡出——像被海浪推走。
这部分踩了三个坑，都挺典型：
坑一：全屏出血算错了
想让图片突破容器、铺满整个屏幕，一开始用了：
width: 100vw;
left: 50%;
margin-left: -50vw;
结果图片整体偏左，右边露出一条白。原因是 left: 50% 的百分比是按父容器宽度算的，不是按屏幕宽度。父容器只有 1680px，而屏幕 1920px，差出来的部分就错位了。
正确写法：
width: 100vw;
margin-left: calc(50% - 50vw);
这个公式的好处是：不管父容器多宽、有多少内边距，数学上都会抵消成 0。
坑二：滚动定位留了一条缝
点箭头下滑后，第一屏图片还在上面露着一条。
原因是我给滚动目标加了 scroll-mt-24（留 96px 避开固定导航栏），副作用是滚动提前 96px 停下——那 96px 的位置正好还显示着图片。
改法是把「避让导航栏」从外边距换成内边距：视觉上内容顶头，但不会被遮挡，滚动也停得准。
坑三：构建依赖了 Google 字体
本地构建一直失败，报字体拉不下来。原因是模板用了 next/font/google，这个方案会在构建时去 Google 下载字体文件。我的网络连不上，构建就挂。
改成运行时加载——构建不再依赖网络，连不上就自动回退系统字体。这不只是我本地的问题，线上构建也有同样风险：Google 抽一次风，整站部署就失败。
这次的心得
1. 第三方接口是别人的，随时会变
网易云歌单 ID、外部图床、Google 字体——这三样我都遇到过失效或连接问题。判断标准很简单：如果它挂了，我的站会不会跟着挂？ 会的话，就值得自己托管。
2. 域名是长期资产，几十块买个省心
不只是「好记」「像样」的问题。vercel.app 被墙的时候，我自己都进不去站，等于失去了排查问题的能力。自定义域名走不同的解析路径，稳定性完全不同。
3. 最难查的 bug 是「不报错」
切歌不工作是这次最耗时的 bug：没有报错、没有日志，只是点了没反应。原因是代码里有个判断把错误吞掉了。
所以我对「静默失败」的写法一直很警惕——宁可报错，也不要静悄悄不工作。
4. 布局问题先算数学，再调样式
全屏出血那个坑，本质是我没算清楚 left: 50% 到底按谁的宽度算。想明白之后发现正确的公式很优雅。
现在的做法是：改样式之前先在纸上把数值算出来，比如「容器 96px + main 24px = 120px」，那负边距就该是 120px。凭感觉调 -mt-24 会差一截。
5. 平台自己的限制会拦住正常的构建
构建时清理缓存目录，被沙箱的删除保护拦下来了。不是代码问题，但一样卡住流程。
遇到这种情况，与其硬刚，不如换个路径：既然不让删，那就先重命名掉。绕过去比撞过去快。
最后
现在这个站，从外到内都算是自己的了：域名自己的、图自己的、歌自己的、布局自己定的。
上一篇说「搭站只是开始，写才是目的」。这一篇算是把「开始」真正做完了——剩下的就只有写了。