在折腾中生活，在探索中成长https://blog.daimona.cn/zh_CNhttps://blog.daimona.cn/posts/hello-world/https://blog.daimona.cn/posts/hello-world/用 Astro + Fuwari 搭建个人博客的第一篇记录，聊聊为什么开始折腾。Thu, 28 May 2026 00:00:00 GMT<h2>为什么开始写博客</h2> <p>折腾这件事，本身就是答案。</p> <p>把日常踩过的坑、用过的工具、想过的事情写下来，未来某天回头看，会发现那些当时觉得很难的事情，原来也不过如此。</p> <h2>技术栈</h2> <ul> <li><strong>框架</strong>：Astro 5.x</li> <li><strong>主题</strong>：Fuwari（二次开发）</li> <li><strong>托管</strong>：Cloudflare Pages</li> <li><strong>评论</strong>：Giscus</li> </ul> <h2>接下来想做的</h2> <ul> <li>[x] 接入音乐播放器</li> <li>[x] 首页动态背景</li> <li>[x] Emo 打字机文案</li> <li>[ ] Ctrl+K 全文搜索弹窗</li> <li>[ ] 暗色模式微调</li> </ul> <blockquote> <p>能 self-host 的，绝不交给别人。</p> </blockquote> https://blog.daimona.cn/posts/fuwari-customization/https://blog.daimona.cn/posts/fuwari-customization/记录把 Fuwari 改造成 macOS Dock 风顶栏 + 动态 Hero 的过程与踩坑。Wed, 27 May 2026 00:00:00 GMT<h2>起点</h2> <p>Fuwari 原生覆盖了我想要功能的 60%：</p> <table> <thead> <tr> <th>项</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>侧边栏 Profile / 分类 / 标签</td> <td>✅ 原生</td> </tr> <tr> <td>文章页 TOC</td> <td>✅ 原生</td> </tr> <tr> <td>暗色模式</td> <td>✅ 原生</td> </tr> <tr> <td>RSS</td> <td>✅ 原生</td> </tr> </tbody> </table> <p>需要自己补的：</p> <ul> <li>Dock 风顶栏视觉</li> <li>Ctrl+K 搜索</li> <li>动态背景 + Emo 文字</li> <li>音乐播放器</li> </ul> <h2>Hero 区设计</h2> <pre><code>&lt;section class="hero-section"&gt; &lt;h1 class="hero-title"&gt;{siteConfig.title}&lt;/h1&gt; &lt;p class="hero-subtitle"&gt;{siteConfig.subtitle}&lt;/p&gt; &lt;HeroText client:load /&gt; &lt;/section&gt; </code></pre> <p>关键是<strong>背景透明</strong> — 让全站的 <code>AnimatedBackground</code> 透过来，省得每个组件单独画一遍。</p> <h2>字体选择</h2> <p>中文衬线体优先级：</p> <ol> <li><code>LXGW WenKai</code>（霞鹜文楷）— Emo 风首选</li> <li><code>Source Han Serif SC</code>（思源宋体）— 系统兜底</li> <li><code>Noto Serif SC</code> — 跨平台兜底</li> </ol> <p>不引 npm 字体包，纯靠系统字体链，省 200KB+ 包体积。</p> <h2>踩坑记录</h2> <blockquote> <p>⚠️ <code>&lt;meting-js&gt;</code> 公共 API 国内有时不稳定，建议自部署。</p> </blockquote> <blockquote> <p>💡 Astro 的 <code>client:load</code> 用在 Svelte 组件上，要确保 <code>vitePreprocess()</code> 正确配置。</p> </blockquote>