个人博客网站 · Personal Blog

核心需求定义：写作体验要用 Notion（已有习惯），阅读体验要完全自定义，部署要零运维，内容要支持双语。这推导出 Notion as CMS + Next.js 前端渲染的技术路径。

核心功能

📝 内容管理

• 文章、项目、图库全部由 Notion 数据库驱动，通过 Notion API 拉取数据
• Webhook 触发 Vercel ISR 缓存刷新，内容更新无需重新部署，发布延迟 < 5 秒

🌐 中英双语

• 基于 Next.js App Router 动态路由实现 zh、en 双语切换
• 中间件自动检测 Accept-Language 请求头并重定向

📖 博客文章系统

• 分类过滤 · 目录导航（TOC 滚动同步高亮）· 上下篇跳转
• Shiki 代码高亮，完整渲染 Notion 全部块类型（标题、引用、Callout、表格、折叠块等）

🖼️ 图库模块

• Lightbox 灯笱原图查看 · 分类过滤 · 音频播放器

✨ 视觉特效

• Live2D 看板娘 · 粒子网格背景 · 鼠标拖尾 · 花瓣飘落
• ScrollReveal 入场动画 · Spotlight 卡片光晕

🔍 SEO & 体验

• 自动生成 sitemap.xml、robots.txt，支持 Open Graph 元数据
• 深色模式：系统偏好跟随 + 手动切换，偏好本地持久化

技术实现细节

架构设计

关键技术决策

① 为何选 ISR 而非 SSR / SSG？

• 纯 SSG：构建时拉取全量内容，每次更新需重新 build，不适合频繁写作
• 纯 SSR：每次请求都调 Notion API，受限于限速（3 req/s），并发高时延迟不可控
• ISR：首次请求构建缓存，后续命中静态缓存（毫秒级响应），Webhook 触发定向刷新，兼顾性能与实时性

② Notion 块类型的完整渲染

Notion API 返回结构化 Block 树，需手动实现每种块类型的 React 渲染组件：

• 递归处理嵌套块（折叠块内嵌列表、引用内嵌代码等）
• 富文本注解（加粗、斜体、行内代码、颜色）的样式映射
• 图片块需代理转发（Notion 图片链接有时效性，需服务端缓存 URL）

③ Live2D 看板娘的性能隔离

Live2D 模型体积大（~5MB），采用动态导入（next/dynamic + ssr: false）延迟加载，不阻塞首屏渲染，Lighthouse 性能分数不受影响。

技术亮点

AI 产品经理视角

这个项目不只是技术练习，它是一次完整的 0→1 产品决策链实践。

需求分析 → 明确核心用户（我自己 + 潜在读者/招聘方）的差异化需求，定义不妥协的优先级：写作体验 > 部署成本 > 视觉效果

方案选型 → 对比 4 种主流博客方案的 ROI，用数据驱动技术选型而非「跟风用最新框架」

产品设计 → 独立完成 UI/UX 设计，双语结构考虑了国际化场景，图库模块考虑了多媒体内容扩展性

迭代思维 → 博客本身记录了 AI 产品调研、工具评测等内容，既是输出平台，也是个人 PM 能力的实物证明

技术理解 → 能与工程师深度沟通 ISR、API 限速、渲染策略等技术细节，具备跨角色协作基础