文章和文档，从原理讲到能用。https://imoriar.com/zh-CNhttps://imoriar.com/posts/quiet-astro-theme/https://imoriar.com/posts/quiet-astro-theme/从宣纸的颜色开始，聊版心、行距、中英混排，以及为什么只留一种强调色。Thu, 05 Nov 2026 00:00:00 GMT<p>这是一篇示例文章，换成你自己的内容即可。文件名就是网址：<code>src/content/posts/quiet-astro-theme.md</code> 对应 <code>/posts/quiet-astro-theme/</code>。</p> <h2 id="从宣纸的颜色开始">从宣纸的颜色开始</h2> <p>底色 <code>#faf9f7</code> 不是纯白，也不发黄。重点内容可以<mark>高亮标出</mark>，链接是<a href="#">青色</a>，整页只有这一种颜色。</p> <blockquote> <p>颜色越少，每一次出现越有意义。</p> </blockquote> <pre class="astro-code css-variables" style="background-color:var(--astro-code-background);color:var(--astro-code-foreground); overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">export</span><span style="color:var(--astro-code-token-keyword)"> default</span><span style="color:var(--astro-code-token-function)"> defineSite</span><span style="color:var(--astro-code-foreground)">({</span></span> <span class="line"><span style="color:var(--astro-code-foreground)"> platforms</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-foreground)"> [{ platform</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-string-expression)"> 'youtube'</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-foreground)"> handle</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-string-expression)"> '@example'</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-foreground)"> primary</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> true</span><span style="color:var(--astro-code-foreground)"> }]</span><span style="color:var(--astro-code-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--astro-code-foreground)">});</span></span></code></pre> <h2 id="版心与行距">版心与行距</h2> <p>正文 17px、行高 1.75，版心 680px，大约一行 40 个汉字。</p> <h3 id="一行多少个字">一行多少个字</h3> <ul> <li>少于 30 字：换行太频繁</li> <li>30–45 字：舒适</li> <li>超过 50 字：容易读串行</li> </ul> <div class="or-alert or-alert-success" role="note"> <svg class="or-icon or-alert-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg> <div class="or-alert-body"> <div class="or-alert-title">小建议</div> <div class="or-alert-desc"> <p>中文段落建议不超过四行，长段落拆开读起来更轻松。</p> </div> </div> </div> <div class="or-alert or-alert-warning" role="alert"> <svg class="or-icon or-alert-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg> <div class="or-alert-body"> <div class="or-alert-desc"> <p>比例写成 16:9、时间写成 10:30，不会被当成指令吞掉。</p> </div> </div> </div> <h2 id="中英混排">中英混排</h2> <table><thead><tr><th>样式</th><th>字号</th><th>行高</th></tr></thead><tbody><tr><td>正文与导语</td><td>17px</td><td>1.75</td></tr><tr><td>小字</td><td>14px</td><td>1.6</td></tr><tr><td>代码</td><td>14px</td><td>1.7</td></tr></tbody></table> <hr> <p>以上。</p>Astro排版https://imoriar.com/posts/claude-tests-workflow/https://imoriar.com/posts/claude-tests-workflow/先让它读懂代码，再让它提出边界条件，最后我来决定哪些值得测。Sat, 12 Sep 2026 00:00:00 GMT<p>示例文章。</p>AIhttps://imoriar.com/posts/pagefind-chinese-search/https://imoriar.com/posts/pagefind-chinese-search/不要服务器，不要第三方，构建时生成索引，几十 KB 就能搜全站。Fri, 28 Aug 2026 00:00:00 GMT<p>示例文章。</p>Astro