— 案例研究 01 —
Elzary
把個人知識整理成一座可以探索的城市。
- Role
- 產品構想、資訊架構、視覺設計、前端開發、內容策略
- Timeline
- 2026.06 — Present
- Status
- 已上線，持續迭代
- Next.js
- React
- TypeScript
- MDX
- GSAP
- Tailwind CSS
01 · 起點
一條時間軸，裝不下不同種類的思考。
大部分個人網站都把文章排成一條時間軸。但工程筆記、閱讀、電影與生活觀察並不是同一種內容；全部放進同一條動態牆後，內容之間的脈絡很快就會消失。
我想做的不是另一個部落格，而是一個讓不同內容各自找到位置的地方。
02 · 設計問題
讓世界觀成為結構，而不是閱讀的阻力。
- 01如何讓不同主題共存在同一個品牌裡？
- 02如何讓網站有世界觀，但不妨礙內容閱讀？
- 03如何同時管理中文、英文、文章 metadata 與技術 SEO？
03 · 核心概念
城市不是背景裝飾，而是資訊架構。
每個街區代表一類內容。讀者可以按照發表時間閱讀，也可以從感興趣的主題進入，在對應的街區裡繼續探索。
- AI 工坊AI 實作與工作流
- 閱讀書庫閱讀與書評
- 電影放映室電影與文化觀察
- 公共廣場社會與政策
- 遠方觀測站旅行與探索
- 聲音電台Podcast
- 市場帳房財經與市場
- 生活林地自我與生活筆記
04 · 系統實作
一份內容，自動連接網站的每個入口。
文章使用 MDX 管理，metadata 會自動產生街區與標籤頁、相關文章、文章目錄、RSS、Sitemap、Open Graph 圖片與結構化資料。
- Bilingual UI
- Responsive layout
- Reading progress
- RSS
- Sitemap
- JSON-LD
- OG images
- Reduced motion
05 · 反思
世界觀比內容成熟得更快。
八個街區已經建立，但真正完成的文章還不多。結果是一座看起來完整，實際上卻仍有許多空房間的城市。
因此，下一階段的重點不是增加更多裝飾，而是讓已完成的內容先成為主角；其餘街區則以較低調的擴建計畫逐步開放。
06 · 目前成果
已經上線，也仍在持續成長。
完整響應式雙語網站
文章與街區內容系統
技術 SEO 基礎
動態城市敘事
這座城市仍在成長