https://www.e7coding.com/Recent content on E7CodingHugozh-cnJoyJoySun, 14 Jun 2026 00:00:00 +0000https://www.e7coding.com/posts/why-i-quit-fancy-notes/Sun, 14 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/why-i-quit-fancy-notes/<p>折腾过的笔记软件，两只手数不过来。每换一个，前两周都像打了鸡血，第三周就开始研究插件，第四周彻底不写了。</p> <p>后来想明白一件事：<strong>记录的摩擦力越小，越可能坚持。</strong> 花哨的功能不是帮你记，是帮你逃避记。</p> <p>现在我只用一个文件夹 + Markdown，配上全文搜索，足够了。</p>https://www.e7coding.com/posts/my-favorite-shell-aliases/Sat, 13 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/my-favorite-shell-aliases/<p>别名（alias）是性价比最高的效率投资之一：配置一次，受益每天。</p> <ul> <li><code>gs</code> → <code>git status</code></li> <li><code>gl</code> → <code>git log --oneline --graph</code></li> <li><code>..</code> → <code>cd ..</code>，<code>...</code> → <code>cd ../..</code></li> <li><code>serve</code> → 一行起一个本地静态服务器</li> </ul> <p>关键不是别名多，而是<strong>只给真正高频的命令起别名</strong>，否则自己都记不住。</p>https://www.e7coding.com/posts/notes-on-focus/Fri, 12 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/notes-on-focus/<p>把手机放到另一个房间，比任何专注 App 都管用。</p> <p>环境决定了默认行为，而我们大多数时候都活在默认里。</p>https://www.e7coding.com/posts/markdown-styleguide/Fri, 12 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/markdown-styleguide/<p>这一段是普通正文，用来检查 <strong>加粗</strong>、<code>行内代码</code> 以及<a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">链接</a>的样式是否与 Minimal 一致。正文字号 16px、行高 1.5。</p> <h2 id="二级标题barlow-800">二级标题（Barlow 800）</h2> <p>段落之间保持 1.25rem 的下边距，整体竖向节奏与原 Minimal 的 <code>styles.tsx</code> 对齐。</p> <h3 id="三级标题">三级标题</h3> <p>下面是无序与有序列表：</p> <ul> <li>第一项，列表行高为 2</li> <li>第二项，缩进 16px</li> <li>第三项</li> </ul> <ol> <li>有序列表第一步</li> <li>有序列表第二步</li> </ol> <h3 id="任务列表">任务列表</h3> <ul> <li><input checked="" disabled="" type="checkbox"> 已完成的任务</li> <li><input disabled="" type="checkbox"> 待办的任务</li> </ul> <h2 id="引用">引用</h2> <blockquote> <p>设计的一致性，不是靠自律，而是靠把正确的选择变成默认值。</p>https://www.e7coding.com/posts/static-site-hosting/Thu, 11 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/static-site-hosting/<h2 id="为什么静态站托管几乎免费">为什么静态站托管几乎免费</h2> <p>没有服务器、没有数据库，CDN 直接分发 HTML —— 这让静态博客可以挂在各家 免费额度上长期运行。</p> <h2 id="四家对比">四家对比</h2> <ul> <li><strong>Cloudflare Pages</strong>：构建额度宽松，全球 CDN 最快，推荐</li> <li><strong>Vercel</strong>：体验顺滑，但商业用途需留意条款</li> <li><strong>Netlify</strong>：老牌，表单/函数生态完整</li> <li><strong>GitHub Pages</strong>：最简单，但构建能力有限</li> </ul> <p>对个人博客，<strong>Cloudflare Pages + Hugo</strong> 是当前性价比最高的组合。</p>https://www.e7coding.com/posts/before-refactoring-legacy/Thu, 11 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/before-refactoring-legacy/<p>接手一个没人敢动的老项目，最容易犯的错就是上来就大改。我的经验是先做三件事：</p> <h2 id="1-给关键路径补上测试">1. 给关键路径补上测试</h2> <p>哪怕只是冒烟测试，也能在你改坏东西时第一时间报警。没有测试的重构，等于闭着眼睛拆炸弹。</p> <h2 id="2-划清模块边界">2. 划清模块边界</h2> <p>先理清「谁依赖谁」，把要动的部分和外界的接口固定下来。边界稳了，内部怎么折腾都可控。</p> <h2 id="3-留好可回滚的退路">3. 留好可回滚的退路</h2> <p>小步提交、特性开关、灰度发布——确保任何一步都能快速退回。重构是马拉松，不是一锤子买卖。</p> <p>做完这三件，再开始动手，心里就有底了。</p>https://www.e7coding.com/posts/sample-frontend/Wed, 10 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-frontend/<p>前端构建这几年卷得厉害，先说结论再讲取舍。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/hello-hugo/Wed, 10 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/hello-hugo/<h2 id="为什么是-hugo">为什么是 Hugo</h2> <p>Minimal UI 是一套基于 React + MUI 的后台模板，观感精炼。但个人博客并不需要一个运行时 SPA —— 静态站点在<strong>速度、可维护性、托管成本</strong>上都更划算。</p> <p>Hugo 的优势在于：</p> <ul> <li>构建极快，上千篇文章秒级出站</li> <li>内置 taxonomy，<strong>分类（categories）与标签（tags）开箱即用</strong></li> <li>Markdown 即内容，写作体验顺滑</li> </ul> <h2 id="设计如何迁移">设计如何迁移</h2> <p>MUI 的 <code>sx</code> 与主题系统无法直接搬运，但<strong>设计 token 可以</strong>：主色 <code>#00A76F</code>、 柔和卡片阴影、16px 圆角、Public Sans + Barlow 字体，全部转写成 Tailwind v4 的 <code>@theme</code> 变量即可。</p>https://www.e7coding.com/posts/sample-backend/Tue, 09 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-backend/<p>分层不是教条，是为了让改动局部化。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/markdown-tips/Tue, 09 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/markdown-tips/<h2 id="善用脚注">善用脚注</h2> <p>正文里写 <code>[^1]</code>，底部补充来源，既不打断阅读又保留出处。</p> <h2 id="任务列表">任务列表</h2> <ul> <li><input checked="" disabled="" type="checkbox"> 已完成</li> <li><input disabled="" type="checkbox"> 待办</li> </ul> <p>清单类内容用任务列表比纯文字更直观。</p> <h2 id="代码块加语言标识">代码块加语言标识</h2> <p>指定语言后语法高亮才会生效，阅读体验差别很大。</p> <p>写作工具不该成为障碍，<strong>把这些细节变成肌肉记忆</strong>，注意力才能留给内容本身。</p>https://www.e7coding.com/posts/tailwind-tokens/Mon, 08 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/tailwind-tokens/<h2 id="theme-是关键">@theme 是关键</h2> <p>Tailwind v4 用 <code>@theme</code> 块声明设计 token，声明即生成工具类。把 Minimal 的 <code>theme-config.ts</code> 里的值原样搬过来：</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">theme</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">--color-primary</span><span class="o">:</span> <span class="p">#</span><span class="nn">00a76f</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">--radius-card</span><span class="o">:</span> <span class="nt">16px</span><span class="o">;</span> </span></span><span class="line"><span class="cl"> <span class="nt">--shadow-card</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">2px</span> <span class="nt">0</span> <span class="nt">rgb</span><span class="o">(</span><span class="nt">145</span> <span class="nt">158</span> <span class="nt">171</span> <span class="o">/</span> <span class="p">.</span><span class="nc">2</span><span class="o">),</span> </span></span><span class="line"><span class="cl"> <span class="nt">0</span> <span class="nt">12px</span> <span class="nt">24px</span> <span class="nt">-4px</span> <span class="nt">rgb</span><span class="o">(</span><span class="nt">145</span> <span class="nt">158</span> <span class="nt">171</span> <span class="o">/</span> <span class="p">.</span><span class="nc">12</span><span class="o">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div><p>之后就能直接写 <code>bg-primary</code>、<code>rounded-card</code>、<code>shadow-card</code>。</p> <h2 id="soft-chip-的复刻">soft chip 的复刻</h2> <p>MUI 的 <code>&lt;Chip variant=&quot;soft&quot;&gt;</code> 是 16% 透明度底色 + 主色文字，用 <code>color-mix</code> 一行还原，无需额外配置。</p>https://www.e7coding.com/posts/sample-ops/Mon, 08 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-ops/<p>凌晨三点的告警，是最好的老师。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/sample-db/Sun, 07 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-db/<p>慢查询八成是索引没建对。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/design-tokens-thinking/Sun, 07 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/design-tokens-thinking/<h2 id="token-是单一事实来源">token 是单一事实来源</h2> <p>把所有视觉决策（主色、灰阶、圆角、阴影）收敛成命名变量，模板里只引用变量 名而非硬编码值。换肤、调性微调都只动一处。</p> <h2 id="在-tailwind-v4-里落地">在 Tailwind v4 里落地</h2> <p><code>@theme</code> 块声明即生成工具类，这让&quot;设计 token = 实现&quot;几乎零距离。</p> <blockquote> <p>风格一致性不是靠自律，而是靠把正确的选择变成默认值。</p> </blockquote>https://www.e7coding.com/posts/sample-ai/Sat, 06 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-ai/<p>别一上来就微调，先想清楚要解决什么。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/writing-workflow/Fri, 05 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/writing-workflow/<h2 id="灵感捕捉">灵感捕捉</h2> <p>随手记进一个 inbox 文件，每周整理一次。真正值得写的想法会反复浮现。</p> <h2 id="草稿到发布">草稿到发布</h2> <ol> <li>在 <code>content/posts/</code> 新建 Markdown</li> <li><code>hugo server -D</code> 本地预览（<code>-D</code> 显示草稿）</li> <li>满意后去掉 <code>draft</code>，推送，CI 自动构建上线</li> </ol> <p>整个过程不离开编辑器，<strong>写作专注度</strong>是个人博客最该优先保护的东西。</p>https://www.e7coding.com/posts/sample-cli/Fri, 05 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-cli/<p>趁手的工具，是看不见的生产力。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/sample-reading/Thu, 04 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-reading/<p>好书值得反复读，每次都有新收获。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/sample-timeblock/Wed, 03 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-timeblock/<p>真正稀缺的不是时间，是注意力。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/sample-oss/Tue, 02 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-oss/<p>开源最难的不是代码，是可持续。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>https://www.e7coding.com/posts/sample-typography/Mon, 01 Jun 2026 00:00:00 +0000Joyhttps://www.e7coding.com/posts/sample-typography/<p>排版好不好，直接影响内容的可信度。</p> <h2 id="要点">要点</h2> <p>（示例文章，用于演示分类导览与「全部分类」页，正文从略。）</p> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul>