一个关于技术与生活的小站https://11suixing11.github.io/homepage/zh_CNhttps://11suixing11.github.io/homepage/posts/how-this-blog-is-built/https://11suixing11.github.io/homepage/posts/how-this-blog-is-built/从参考站分析到自建框架，再到换用 Fuwari 主题——本站的"建造日志"。Tue, 29 Sep 2026 00:00:00 GMT<p>一切从一个参考站开始：<a href="https://hongshi.cc.cd/">hongshi.cc.cd</a>（红石の空间站），它使用 Hexo + Solitude 主题搭建。分析之后我选了 <strong>Astro</strong> 而非同款 Hexo——纯内容站点用 Astro 默认零 JS、构建快，Markdown 体验也好。这篇日志记录本站的进化过程。</p> <h2>第一版：自建 MVP</h2> <p>先用 Astro 从零搭了一版：首页文章流、文章页（TOC + 代码高亮）、归档、标签、搜索（Pagefind）、深浅色切换、RSS，两栏卡片布局模仿 Solitude 的观感。</p> <h2>第二版：换用 Fuwari</h2> <p>自建版功能齐全，但细节打磨是场持久战。于是换成了开源的 Fuwari 主题——中文博客圈最流行的 Astro 主题之一，圆角卡片 + 渐变 + 过渡动画的气质与参考站一脉相承，而且自带：</p> <ul> <li>站内搜索（Pagefind）与 RSS、sitemap</li> <li>KaTeX 数学公式、Expressive Code 代码高亮</li> <li>GitHub 仓库卡片、提示框（Admonitions）、剧透文本</li> <li>swup 页面过渡动画、Photoswipe 灯箱</li> <li>主题色自由调节（访客可换色相）</li> </ul> <p>::github{repo="saicaca/fuwari"}</p> <h2>目录速览</h2> <pre><code>src/ ├── config.ts ★ 站点配置（站名/语言/导航/个人资料/主题色） ├── content/ │ ├── posts/ ★ 文章（Markdown） │ └── spec/ 关于页等内容 ├── assets/images/ 头像、横幅图 └── ... </code></pre> <p>带 ★ 的是日常最常改的地方。</p> <h2>一些经验</h2> <ul> <li><strong>选主题就是选生态</strong>：Fuwari 用 pnpm 管理（<code>preinstall</code> 有 only-allow 校验），务必 <code>pnpm install</code>；</li> <li><strong>中文标签路由</strong>：静态托管会把 URL 解码一次再映射文件，所以生成链接时 <code>encodeURIComponent</code>，而生成路由目录时要用原始中文；</li> <li><strong>搜索索引是构建产物</strong>：Pagefind 在 <code>astro build</code> 之后生成，开发模式下站内搜索不可用属正常现象。</li> </ul> <h2>下一步</h2> <p>评论系统、友链页、自定义头像与横幅……按需添加。底盘是成熟主题，往上加装东西都快。</p> https://11suixing11.github.io/homepage/posts/markdown-demo/https://11suixing11.github.io/homepage/posts/markdown-demo/标题、列表、引用、表格、代码高亮、数学公式、提示框——一篇文章的排版元素在这里都能找到，可当作写作模板使用。Tue, 29 Sep 2026 00:00:00 GMT<p>这篇文章演示站点支持的 Markdown 排版元素，写新文章时可以直接复制这里的语法。</p> <h2>文字排版</h2> <p><strong>加粗</strong>、<em>斜体</em>、<code>行内代码</code>、<s>删除线</s>，以及 <a href="https://astro.build">链接</a>。还可以把内容 :spoiler[隐藏起来 <strong>像这样</strong>]！</p> <blockquote> <p>引用块：这里可以放一段名人名言，或者重要提示。 引用可以有多行。</p> </blockquote> <h2>列表</h2> <p>无序列表：</p> <ul> <li>项目一</li> <li>项目二 <ul> <li>嵌套项目</li> </ul> </li> </ul> <p>有序列表：</p> <ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol> <p>任务列表（构建后会渲染成复选框样式）：</p> <ul> <li>[x] 已完成的事</li> <li>[ ] 待办的事</li> </ul> <h2>提示框（Admonitions）</h2> <p>支持五种类型：<code>note</code> <code>tip</code> <code>important</code> <code>warning</code> <code>caution</code>：</p> <p>:::note 提示信息，阅读时也不应该错过。 :::</p> <p>:::tip[自定义标题] 提示框的标题可以自定义。 :::</p> <p>:::warning 警告：这里是需要特别注意的内容。 :::</p> <p>也支持 GitHub 风格语法：</p> <blockquote> <p>[!TIP] <code>&gt; [!NOTE]</code> / <code>&gt; [!TIP]</code> 这种写法同样有效。</p> </blockquote> <h2>代码高亮</h2> <p>代码块基于 <a href="https://expressive-code.com/">Expressive Code</a>，支持文件名标题、行号和终端样式，配色跟随站点深浅色：</p> <pre><code>// TypeScript interface Post { title: string; tags: string[]; } export function sortPosts(posts: Post[]): Post[] { return [...posts].sort((a, b) =&gt; b.title.localeCompare(a.title)); } </code></pre> <pre><code>pnpm run dev # 开发 pnpm run build # 构建 + 搜索索引 pnpm run preview # 预览构建产物 </code></pre> <h2>表格</h2> <table> <thead> <tr> <th>命令</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>pnpm run dev</code></td> <td>启动开发服务器</td> </tr> <tr> <td><code>pnpm run new-post</code></td> <td>新建文章脚手架</td> </tr> <tr> <td><code>pnpm run build</code></td> <td>构建 + 生成搜索索引</td> </tr> </tbody> </table> <h2>数学公式</h2> <p>数学公式由 KaTeX 渲染：</p> <p>行内公式：质能方程 $E = mc^2$。</p> <p>块级公式：</p> <p>$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$</p> <h2>GitHub 仓库卡片</h2> <p>正文里可以嵌入 GitHub 仓库卡片（加载时从 GitHub API 拉取信息）：</p> <p>::github{repo="saicaca/fuwari"}</p> <h2>分隔线</h2> <hr /> <p>以上就是全部常用元素，写文章时直接对照抄语法即可。</p> https://11suixing11.github.io/homepage/posts/hello-world/https://11suixing11.github.io/homepage/posts/hello-world/博客的第一篇文章——说说这个站点是怎么来的，以及怎么写一篇新文章。Tue, 29 Sep 2026 00:00:00 GMT<p>欢迎来到我的博客！👋</p> <p>这是本站的第一篇文章。站点由 <a href="https://astro.build">Astro</a> 驱动，主题使用开源的 <a href="https://github.com/saicaca/fuwari">Fuwari</a>。如果你也想要一个这样的博客，可以照着折腾。</p> <h2>为什么要有这个博客</h2> <p>写博客最直接的好处是<strong>倒逼输出</strong>：学了新东西，只有能把它讲明白，才算真的学会了。其次，把自己的折腾过程记录下来，日后翻起来会特别省事——很多坑没必要踩第二遍。</p> <h2>怎么写一篇新文章</h2> <p>最方便的方式是用模板自带的脚手架：</p> <pre><code>pnpm run new-post </code></pre> <p>它会自动生成文件骨架，或者你也可以直接在 <code>src/content/posts/</code> 目录下新建一个 <code>.md</code> 文件，手动写好头部元信息：</p> <pre><code>--- title: 文章标题 published: 2026-09-29 description: 一句话摘要（会显示在列表卡片上） tags: [随笔, 教程] category: 随笔 draft: false --- 正文内容（Markdown）…… </code></pre> <p>几个约定：</p> <ul> <li><code>published</code> 决定排序，越新越靠前；</li> <li><code>tags</code> 会自动聚合成标签云，<code>category</code> 是分类；</li> <li><code>image</code> 可以设置封面图（支持相对路径、<code>/public</code> 路径或网络图片）；</li> <li><code>draft: true</code> 的文章不会发布；</li> <li>文件名就是文章 URL，例如 <code>hello-world.md</code> → <code>/posts/hello-world/</code>。</li> </ul> <h2>接下来的计划</h2> <ul> <li>[ ] 把关于页和头像换成自己的</li> <li>[ ] 加上评论系统</li> <li>[ ] 折腾一些好玩的页面</li> </ul> <blockquote> <p>建站的乐趣一半在于折腾本身。慢慢来，比较快。</p> </blockquote> https://11suixing11.github.io/homepage/posts/mindnotes-local-first/https://11suixing11.github.io/homepage/posts/mindnotes-local-first/一个范围更小的浏览器白板，如何在离线、依赖、归因和维护边界上做取舍。Mon, 01 Jun 2026 00:00:00 GMT<p>这不是一篇「替代谁」的宣言。Excalidraw、tldraw 这类项目把浏览器白板做到了很高的水准，MindNotes Pro 的目标更窄：在一个普通浏览器里，尽量快地打开、离线地写画、清楚地导出，并且让实现保持可读。</p> <h2>为什么要做一个范围更小的白板</h2> <p>我经常需要的是临时画思路、整理截图、写几行文字，然后把结果导出。这个场景不一定需要账户、多人协作、模板市场或云端同步。它更像纸笔：打开，写，保存，关掉。</p> <p>所以 MindNotes Pro 的边界从一开始就很朴素：</p> <ul> <li>数据默认留在本地浏览器。</li> <li>核心绘图体验不依赖外部 CDN。</li> <li>功能优先服务单人笔记和轻量白板。</li> <li>不把没有实现的协作、账号、后端能力写进卖点。</li> </ul> <h2>依赖数量不是奖牌，它只是约束</h2> <p>早期 README 里过度强调「少依赖」，这很容易变成一种营销话术。更准确的说法是：我用较小的依赖面来限制复杂度，但这不是为了证明别人做得重，而是为了让这个项目更容易维护。</p> <table> <thead> <tr> <th>选择</th> <th>带来的好处</th> <th>付出的代价</th> </tr> </thead> <tbody> <tr> <td>React + Canvas</td> <td>UI 和绘图状态容易组织</td> <td>需要认真处理重绘、选择框和历史记录</td> </tr> <tr> <td>Zustand</td> <td>状态模型直接、调试成本低</td> <td>store 变大后必须拆分职责</td> </tr> <tr> <td>本地导出</td> <td>用户不需要上传数据</td> <td>浏览器兼容和格式细节都要自己兜底</td> </tr> <tr> <td>无云协作</td> <td>实现和隐私模型更简单</td> <td>团队实时编辑不是当前目标</td> </tr> </tbody> </table> <h2>向成熟工具学习，但把归因讲清楚</h2> <p>白板软件有很多已经被验证过的交互模式：快速缩放、样式复制、框选、对齐、键盘快捷键。学习这些模式并不丢人，真正危险的是把学习包装成原创。</p> <p>现在项目文档会更明确地说明：MindNotes Pro 参考了 Figma、Excalidraw、tldraw 等工具的通用交互经验，同时只维护自己实际实现和测试过的功能。外部项目的具体 PR、issue 或设计细节不再被当作宣传材料。</p> <blockquote> <p>一个开源项目可以受启发，但不能靠模糊归因来显得更专业。</p> </blockquote> <h2>接下来的维护重点</h2> <p>比起继续堆功能，我更想先补几件基础工作：</p> <ul> <li>清理现有测试失败，把 canvas、history、selection 的回归用例稳定下来。</li> <li>把导出、快捷键、选择引擎这类高风险路径补成更小的测试单元。</li> <li>减少 README 里不可验证或容易过期的数字。</li> <li>继续把贡献指南、路线图和安全说明写得像一个真实维护中的仓库。</li> </ul> <h2>这个项目适合谁</h2> <p>如果你需要一个单人使用、离线优先、可以直接打开写画的浏览器白板，MindNotes Pro 可能合适。如果你需要多人实时协作、复杂素材库、企业权限或长期云端存储，成熟白板产品会更合适。</p> <p>把适用场景说清楚，通常比把口号喊得更响更有用。</p> <h2>项目入口</h2> <ul> <li><a href="https://11suixing11.github.io/mindnotes-pro/">Live demo</a></li> <li><a href="https://github.com/11suixing11/mindnotes-pro">Repository</a></li> <li><a href="https://github.com/11suixing11/mindnotes-pro#roadmap">Roadmap</a></li> </ul>