和过去一样，这篇文章记录我网站建站的修改进度。之所以叫起始之地 S2，是因为之前有过 S1，灵感来自塞尔达传说-旷野之息,游戏开始的地名。
想要实现的东西
-
加一个 sunny mode 做背景！ - 建站时长，这个是我每次折腾网站必搞的装修。
- 引用样式的修改，首先我想加入引用来源，然后样式也得改一改。
- 逐步替换掉现在的随机封面图片
已经实现的功能
2026.5.8
- 移除了所有 mdx 的依赖，渲染起来太慢了。（补充一下，直接用
vercel --prod部署会调用它的缓存，然后一直部署不上去，直接去vercel上点一下Redeploy，不要勾选用缓存，这样就能通过了。 - 暂时移除了首页按最后更新日期来显示的逻辑，没有方便好用的方式。
2026.5.6
- 在版权信息部分添加了最后更新于 xxx 日，这样就能一直更新某些文章了。
- 首页按最后更新的顺序排序，并增加了“有更新”的标签（限定最多显示 3 篇）
- 重构了「在用好物」，将其改为「图鉴」，以后电视剧什么的都能往这里面塞了，而且现在每个物品都是用 md 文件来维护。
- 略微修改了底部春夏秋冬的样式。
2026.5.2
拿 deepseek 高强度装修了一下，花了 1RMB，社会主义好啊。
- 抄着别人的版权说明，写了个版权信息，依旧是“不要转载|去热爱自己的生活”
- 修改了 H 标签、hr 标签、b 标签的样式
- 增加了段落缩进
2026.4.7
-
修好了音乐不见了的 bug。这个主要是 api 提供商关店了，换了一家 api 先用着，和主题的作者说了声，作者说过几天写个自建教程。我也觉得自己迟早要买服务器……
-
喜提评论功能
心路
这个一直很纠结弄不弄，主要感觉弄起来挺麻烦的，上次去注册了 TiDB，整个页面看着都头大。所幸今天打开 wailine 的时候，评论区有个免费部署方案，点一下就全部署好了，而且还免费，目前就先用着这个吧，虽然这个跑路的风险也挺大的。我觉得我迟早得买服务器...
2026.4.6
- 把推荐随机文章改成了按最近一年春夏秋冬的形式。
2026.3.30
- 给首页的
PostItemCard上的图片加上了一个过度效果，原理是用的mask-image。
具体代码
src\components\post\PostItemCard.astro
"[mask-image:linear-gradient(to_right,black_70%,transparent_100%)]",
"[-webkit-mask-image:linear-gradient(to_right,black_70%,transparent_100%)]",2026.3.16
-
加了一个好物分享墙，后面慢慢加东西吧
-
原主题有一套非常专业的 CLI 模块化架构，支持直接用
pnpm koharu新建 md 文件（博文），但是 koharu 有点难记，我得研究下源代码，魔改成我能记住的。
心路历程
这里用 codex 直接搓出来的。老记不住koharu，让 ai 按照模板搓了个pnpm singlebee的版本，直接能生成当周周记，默认日期周五。ai 直接搓出来的肯定不如原代码优雅，不过我不是很在意，能用就行。
2026.3.14
- 图片下方文字
心路历程
这里用 cursor 直接搓出来的。理论上就是把原本 alt 里的文字显示在图片下方，很久之前在 hugo 的博客里就有类似的实现思路，把实现的原理告诉 ai 很快就搓出来了。
我觉得这个功能应该是博客必备的，只上一张图片总觉得少了点什么，很多图片还是想加点介绍（吐槽）。
2026.3.10
- banner 图替换/2026.3.10
心路历程
因为最近在推 p3r，阿特拉斯的设计审美还是太在线了，优秀的作品果断抄一下，嗯，这该死的美感。视频是直接去 p3r 的官网偷的，日本人的网站做得是真糙，连阿特拉斯这么注重设计的公司也全用图片了事。
2026.2.24
- mdx 支持/2026.2.24
心路历程
我用这个框架主要原因就是想用 mdx，不过这个主题用了 react19，这个有一个 bug，我问 ai 才知道这是 Astro 官方的 MDX 内部扫描 Bug：
AI 生成
在 Astro 官方仓库（Issue #12802）中，社区和维护者确认了：当开启 MDX 集成后，Astro 内部的“检查 (check)”函数会去尝试评估组件的渲染方式。在这个扫描过程中，它会意外地像调用普通函数一样，直接去调用底层的 React 组件。
它会导致启用 dev 开发模式之后，控制台一直蹦错误，但是实际上应该不影响渲染，总之除了心烦一点没别的事就不管了。
后续发现两个问题，一个是 mdx 虽然正常渲染出来了，但是很多面向 mdx 的语法都没启用，连基本的 import 都会以文本的形式出现，之前转 mdx 的时候就发生过这个问题。
./astro.config.mjs
mdx({
extendMarkdownConfig: false,
remarkPlugins: remarkPlugins,
rehypePlugins: rehypePlugins,
}),把这个里面的extendMarkdownConfig: true 改成false就行了。
问题二就是发现 mdx 启用后原本图片支持点开放大的灯箱模式用不了，同一个地方的代码加上remarkPlugins: remarkPlugins，就行了，这是 md 的配置和 mdx 的配置分离了。理论上还有很多它独特的语法没兼容过来，我先不管了，遇到再说吧。
- dbcard 组件自动导入/2026.2.24
心路历程
这个功能其实也是早就写了的，最开始在 hugo 上面装修就是搞的这玩意，一路改代码改到上一个博客也能用。mdx 的特性就是能在 md 文件里直接用 react 的组件，相对于 md 的这种自由度自然是会高很多。
其实这些问题在我手搓 mdx 博客的时候都遇到过了，解决的思路就是在渲染前就把这些搞好。在CustomContent.astro里导入好就行了，以后如果有其他的组件了也可以这么用。
- 竖排图片功能/2026.2.24
心路历程
这个功能其实是原主题就有的，逻辑是两个连续的 img 语法经过一系列判定宽度合适就启用竖排布局，但它是长宽比大于 1.2 才启用竖排，我觉得这个功能理论上我可以在写博客的时候就控制是否要竖排，所以我改成了长宽比大于等于 1 就直接启用。
喜欢的话，留下你的评论吧～