2026年6月6日
用 MDX 寫作
入門指南——文章如何運作、有哪些 MDX 短碼，以及如何加入自己的內容。
這本日誌刻意分成兩種氛圍：首頁的粗獷 bento 網格，以及文章頁的編輯式閱讀體驗。首頁用結構說話；文章用文字呼吸。
技術堆疊一覽
點選每張卡片，了解它在專案中的角色：
在 app/[locale]/ 下以檔案路由組織頁面，文章靜態生成，首頁 bento 網格以 Server Component 渲染。
專案結構
展開資料夾，瀏覽目錄配置：
globals.css — 設計 token
*.mdx — 文章與 postMeta
bento/ — 首頁網格
mdx/ — 互動式文章區塊
lib/posts.ts — 掃描 content/posts/
messages/ — UI 翻譯（en、zh）
i18n/ — 語系路由
逐步操作
在 content/posts/ 放入 .mdx 檔案。匯出 postMeta 物件，包含 title、date、description 與可選的 tags。slug 來自檔名——hello-world.mdx 對應 /notes/hello-world。
動手試試
新文章的基本結構如下：
content/posts/my-post.mdx
export const postMeta = {
title: "我的第一篇筆記",
date: "2026-06-06",
description: "供列表與 SEO 使用的簡短摘要。",
tags: ["journal"],
};
你的 MDX 內容從這裡開始。啟動開發伺服器：
終端機
pnpm dev前往 /zh/notes/my-post 即可預覽。
MDX 中的圖片
將圖片放在 public/，用標準 markdown 語法引用。全域 MdxImg 元件會加上細框與間距：
同一張圖也會出現在首頁 bento 的圖片輪播中。
標籤與探索
標籤是 postMeta 上的可選字串。它們驅動筆記列表的篩選 pill、文章頁可點擊的標籤，以及首頁 bento 的標籤輪播。
試試下方的篩選器——它使用本站的真實文章：
試試用標籤篩選
- 黑色間距design, bento, css, rwd
- 打造這本日誌guide, nextjs, mdx, build
- 用 MDX 寫作guide, mdx, journal
- On makingcraft, process, design
- Hello, worldjournal, intro
Bento 間距（互動示範）
首頁網格用單一 CSS token 控制格子之間的黑線。拖曳滑桿，感受間距大小對版面的影響：
Adjust the gap
Mini bento preview
A
B
C
D
接下來
瀏覽完整筆記列表，閱讀 Hello, world 感受語氣，然後用你自己的文字取代這篇指南。
最好的日誌都是一小步一小步長出來的——一篇文章、一個標籤、一頁安靜的版面。