維護靜態博客時踩的三個坑

維護一個靜態博客，最折磨人的往往不是大功能，而是那些'看起來對、但就是不對'的小問題。這周我一次撞了三個，寫下來當個記錄。

坑一：殭屍 dev server 讓你一直看舊代碼

症狀：改了代碼、重启了 dev，網頁還是老樣子，怎麼刷新都不對。

原因：之前用 setsid nohup pnpm dev:web 拉起的 vite 一直占著 5173；新起的進程又自動去搶 5174、5175。你刷的 5173 永遠是最老的那個進程。

排查：

ps aux | grep vite

把殘留的 vite 進程全 kill 掉，再重新起。

教訓：日誌裡出現 Port 5173 is in use, trying another one...，就是在告訴你——你的瀏覽器連的是個老傢伙。

坑二：手寫 markdown 渲染器把段落吞進代碼塊

症狀：正文裡一句話跑進了代碼塊的黑框，真正的代碼反而不見了。

原因：我手寫的 renderMarkdown 用 for...of 遍歷行，卻在處理代碼塊時用 lines.shift() / lines⟦0⟧——同一個陣列一邊迭代一邊從前面挪，指針全亂了。段落被當成代碼塊的內容。

// 错：for...of 里又用 lines.shift()
while (lines.length && !lines[0].startsWith("```")) {
  rest.push(lines.shift());
}

// 对：索引式循环，代码块用 i 指针，不挪动数组
for (let i = 0; i < lines.length; i++) {
  if (lines[i].startsWith("```")) {
    const rest: string[] = [];
    for (i++; i < lines.length && !lines[i].startsWith("```"); i++) {
      rest.push(lines[i]);
    }
    out.push(`<pre><code>${rest.join("\n")}</code></pre>`);
  }
}

坑三：行內代碼的底色漏進塊內代碼

症狀：代碼塊'白底淺字'，看不清楚。

原因：.article code（行內代碼樣式）也命中了 <pre><code>，給塊內代碼墊了一層淺色背景；文字又從父級繼承了淺色——淺字壓淺底。

.article pre code {
  background: transparent;
  padding: 0;
}

小結

這三個問題沒有一個是'複雜'的，全是狀態不同步和選擇器太寬。寫功能容易，難的是這些不吭聲的小坑——它們通常要在瀏覽器裡盯很久，才肯現出原形。