正在铺开首页内容
一个为个人表达设计的静态博客引擎，聚合文章、作品、相册、友链、RSS 与阅读数统计。
我想要的不是传统意义上的“博客模板”，而是一个更完整的个人表达载体。它既要能认真承载文章，又需要有作品集、相册和关于页这样的展示空间。
这篇案例文档也顺手承担了一个额外任务：把站点里的 Markdown 与 MDX 能力尽量展示完整。你会在这里看到 强调、斜体、强调斜体、删除线、inline code、重点高亮、SSG、Cmd + K、脚注1、引用式链接 Next.js 文档 和自动链接 https://nextjs.org/docs。
这个项目一开始就有几个明确方向：
RSS、sitemap、JSON-LD、分类与标签聚合都从内容层自动推导。这类个人站点的核心不是“功能表做满”，而是让写作、展示和迭代变得顺手。
- 写文章时不用担心结构松散
- 增加新栏目时不用推倒重来
- 部署时保持静态站的简单性
Mermaid 图正在生成中...
内容系统采用本地 MDX，并通过 Zod 做 frontmatter 校验。文章、作品和配置的结构都足够明确，所以 RSS、sitemap、分类标签页和元信息生成都能顺着内容层自动完成。
访问量采用 Supabase 作为轻量存储，只把统计能力放进一个极小的接口层里，保持页面本身仍然是静态生成。
| 模块 | 作用 | 当前状态 | 优先级 |
|---|---|---|---|
content/posts | 文章内容源 | 已完成 | 1 |
content/portfolio | 案例文档与项目说明 | 已完成 | 1 |
content/gallery / 数据文件 | 相册与图片信息 | 进行中 | 2 |
src/lib/seo.ts | metadata、JSON-LD、RSS、sitemap | 已完成 | 1 |
src/app/api/view | 阅读数统计接口 | 已完成 | 2 |
| “关于木杉” 3D 形象 | 个人展示与视差叙事 | 持续迭代 | 3 |
type Post = {
title: string;
slug: string;
summary: string;
publishedAt: string;
tags: string[];
};
export function pickFeaturedPosts(posts: Post[]) {
return posts
.filter((post) => post.tags.includes("nextjs") || post.tags.includes("设计"))
.slice(0, 3);
}{
"site": "木杉的风与代码",
"features": ["blog", "portfolio", "gallery", "rss", "view-counter"],
"contentSource": "local-mdx",
"deployment": "vercel"
}npm run dev
npm run lint
npm run typecheck
npm run build因为这类个人站点最重要的是可控性和长期维护成本。本地内容更适合版本管理，也更容易把 RSS、SEO、分类标签和自定义页面一起纳入同一套内容结构。
这里主要是为了验证标题层级、段落节奏、锚点滚动和长文档的阅读表现是否稳定。
这个项目最重要的成果不是“功能做全了”，而是建立了一套可以长期扩展的个人站点骨架。接下来无论是继续写作、增加作品案例，还是替换真实个人素材，都不需要再动结构。
如果把这篇文档当作一份能力清单来看，它也说明了这套内容层现在已经能承载：
这类“案例文档既是内容又是功能验收页”的方式，对个人站点特别实用。 ↩