2026年6月6日
打造這本日誌
混合式指南——這個網站為何存在、用什麼搭建，以及如何一步步重建它。
這本日誌是一個安放長文的地方——以排版為先、支援雙語，並刻意分成兩種氛圍：首頁的粗獷 bento 網格，以及文章頁的編輯式閱讀體驗。
首頁用結構說話；文章用文字呼吸。這種對比是刻意的。這篇指南會同時說明「為什麼」與「怎麼做」。
技術堆疊一覽
點選每張卡片，了解它在專案中的角色：
在 app/[locale]/ 下以檔案路由組織頁面，文章靜態生成，首頁 bento 網格以 Server Component 渲染。
專案結構
展開資料夾，瀏覽目錄配置：
globals.css — 設計 token
*.mdx — 文章與 postMeta
bento/ — 首頁網格
mdx/ — 互動式文章區塊
lib/posts.ts — 文章註冊表
messages/ — UI 翻譯（en、zh）
i18n/ — 語系路由
逐步搭建
以 create-next-app 建立 App Router + TypeScript 專案。透過 @tailwindcss/postcss 加入 Tailwind v4，並在 globals.css 定義語意化色彩 token——文章用 paper、ink、accent；首頁 bento 用 bento-bg、bento-ink。
動手試試
新文章的基本結構如下：
content/posts/my-post.mdx
export const postMeta = {
title: "我的第一篇筆記",
date: "2026-06-06",
description: "供列表與 SEO 使用的簡短摘要。",
tags: ["journal"],
};
你的 MDX 內容從這裡開始。在註冊表中加入這篇文章：
lib/posts.ts
import MyPost, { postMeta as metaMyPost } from "@/content/posts/my-post.mdx";
const ENTRIES: PostEntry[] = [
{
slug: "my-post",
locales: { en: { meta: metaMyPost, MDXContent: MyPost } },
},
// ...既有項目
];啟動開發伺服器：
終端機
npm run dev前往 /zh/notes/my-post 即可預覽。
標籤與探索
標籤是 postMeta 上的可選字串。它們驅動三個功能：筆記列表 的篩選 pill、文章頁可點擊的標籤，以及首頁 bento 輪播中的標籤展示。
試試下方的篩選器——它使用本站的真實文章：
試試用標籤篩選
- 黑色間距design, bento, css, rwd
- 打造這本日誌guide, nextjs, mdx, build
- 用 MDX 寫作guide, mdx, journal
- On makingcraft, process, design
- Hello, worldjournal, intro
接下來
瀏覽完整筆記列表，閱讀 Hello, world 感受網站語氣，或 fork 專案，把 bento 網格改成你的樣子。
最好的日誌都是一小步一小步長出來的——一篇文章、一個標籤、一頁安靜的版面。