Hugo Lin

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 輪播中的標籤展示。

試試下方的篩選器——它使用本站的真實文章：

試試用標籤篩選

接下來

瀏覽完整筆記列表，閱讀 Hello, world 感受網站語氣，或 fork 專案，把 bento 網格改成你的樣子。

最好的日誌都是一小步一小步長出來的——一篇文章、一個標籤、一頁安靜的版面。