範例文章：本站排版元件全示範
這是一篇範本，把本站文章能用的每一種排版元件都示範一次：圖片、畫框、對比滑桿、提示框、程式碼、表格與引言。要寫新文章時複製這篇改就行。
這篇是寫作範本：複製 content/writing/sample-post-template.mdx、改檔名和 frontmatter、把內容換掉，跑 npm run publish:check -- --write 就能發布。以下每一節示範一種元件，順便寫用法。
一、普通段落與行內樣式
段落直接寫。粗體用兩個星號，斜體用一個，行內程式碼用反引號。連結這樣寫：Harry Chang 的網站。中英混排時系統會自動用 Source Serif 4 配 Noto Serif TC。
引言用大於符號。適合放一句想強調的話，或引用別人說的話。
二、圖片：三種放法
普通圖（上面那張）：。原圖丟 content-images/writing/，跑 npm run images 會自動轉 WebP、記錄尺寸和模糊縮圖。
畫框圖：適合想鄭重展示的單張——
對比滑桿：before/after 拖著看，鍵盤左右鍵也能操作——
三、提示框
四、程式碼
行內用反引號；整段用三個反引號加語言名：
// 範例：本站的 NEXT UP 推薦評分
function scoreRelated(current: Meta, candidate: Meta): number {
const shared = countSharedTags(current, candidate);
if (shared === 0) return 0;
return shared * 10 + recencyBonus(current.date, candidate.date);
}
五、清單與表格
待辦式清單：
- 原圖丟
content-images/，跑npm run images - 文章寫好，frontmatter 至少填
title和date npm run publish:check看報告，加-- --write --push直接上線
表格用來放可枚舉的事實：
| 欄位 | 必填 | 說明 |
| --- | --- | --- |
| title / date | 是 | 標題與日期（YYYY-MM-DD） |
| excerpt / tags | 否 | 留空會由發布腳本用 LLM 補 |
| readingTime | 否 | 發布腳本自動計算，不用手填 |
| draft | 否 | true 就不會出現在網站上 |
六、結尾
文章底部會自動出現「NEXT UP · 接下來讀」推薦卡（按共同 tag 挑）和上一篇/下一篇，不用自己寫。刪掉這篇範本前記得先把想留的段落複製走。