预计阅读时间：12 分钟
🚀 超前科技感个人博客 — 项目架构设计
一、技术栈选型
| 层级 | 选型 | 说明 |
|---|---|---|
| 框架 | Next.js 15 (App Router) | SSR/ISR/SSG 三合一，动态+静态混合渲染 |
| 语言 | TypeScript 5.x | 严格类型，泛型复用 |
| 样式 | Tailwind CSS v4 + class-variance-authority | 原子化 + 组件级变体 |
| 动画引擎 | Framer Motion + GSAP | 页面过渡 + 粒子/光效等重动画 |
| 3D/特效 | Three.js (React Three Fiber) + @react-three/postprocessing | 3D 背景、粒子系统、后期光效 |
| 内容管理 | MDX + Contentlayer / next-mdx-remote | 本地 Markdown 渲染，支持 React 组件内嵌 |
| 数据库 | Prisma + SQLite/PostgreSQL | 访客留言、阅读量、点赞等动态数据 |
| 搜索引擎 | MeiliSearch / pagefind | 全站模糊搜索 |
| 部署 | Docker + Vercel / 自建 VPS | CI/CD 自动部署 |
二、目录结构
blog/
├── app/ # Next.js App Router 页面
│ ├── layout.tsx # 根布局（全局粒子背景、字体加载）
│ ├── page.tsx # 首页：动态 Terminal 入口 + 最新文章
│ ├── globals.css # 全局样式（CSS 变量、暗黑模式）
│ ├── not-found.tsx # 404 故障风页面
│ ├── error.tsx # 错误边界（光污染报错页）
│ │
│ ├── posts/ # 文章列表 + 详情
│ │ ├── page.tsx # 文章列表（网格/时间轴切换）
│ │ └── [slug]/
│ │ └── page.tsx # 文章详情（代码高亮、TOC、阅读进度）
│ │
│ ├── projects/ # 项目展示
│ │ ├── page.tsx # 项目墙（3D 卡片翻转）
│ │ └── [slug]/page.tsx
│ │
│ ├── about/ # 关于页
│ │ └── page.tsx # 个人星盘/技能树 3D 可视化
│ │
│ ├── guestbook/ # 留言板
│ │ └── page.tsx # 动态粒子留言墙
│ │
│ ├── api/ # API Routes
│ │ ├── views/route.ts # 阅读量 +1
│ │ ├── likes/route.ts # 点赞 toggle
│ │ ├── guestbook/route.ts # 留言 CRUD
│ │ └── search/route.ts # 搜索接口
│ │
│ └── sitemap.ts / robots.ts # SEO
│
├── components/ # 组件目录
│ ├── ui/ # 基础 UI 组件
│ │ ├── Button.tsx # 霓虹光效按钮
│ │ ├── Card.tsx # 玻璃态卡片
│ │ ├── Badge.tsx # 全息标签
│ │ ├── Input.tsx # 发光输入框
│ │ ├── Modal.tsx # 毛玻璃模态框
│ │ └── Toast.tsx # 流动光提示
│ │
│ ├── layout/ # 布局组件
│ │ ├── Navbar.tsx # 悬浮导航栏（滚轮变色）
│ │ ├── Footer.tsx # 简约底部（动态星座连线）
│ │ ├── Sidebar.tsx # 侧边栏（TOC + 相关文章）
│ │ └── MobileNav.tsx # 移动端抽屉导航
│ │
│ ├── effects/ # 特效组件
│ │ ├── ParticleBackground.tsx # Three.js 粒子系统
│ │ ├── GridGlow.tsx # 网格光效背景
│ │ ├── GlitchText.tsx # 故障文字效果
│ │ ├── TypeWriter.tsx # 打字机效果
│ │ ├── ScanLine.tsx # CRT 扫描线叠层
│ │ └── Aurora.tsx # 极光动态背景
│ │
│ ├── blog/ # 博客相关
│ │ ├── PostCard.tsx # 文章卡片（悬停 3D 倾斜）
│ │ ├── PostHeader.tsx # 文章头图 + 元信息
│ │ ├── TableOfContents.tsx # 悬浮目录
│ │ ├── ReadingProgress.tsx # 顶部阅读进度条（光效）
│ │ ├── CodeBlock.tsx # 代码块（霓虹高亮 + 复制）
│ │ └── TagCloud.tsx # 标签云（粒子碰撞动效）
│ │
│ └── home/ # 首页专用
│ ├── HeroSection.tsx # 欢迎区（3D 文字 + 粒子）
│ ├── TerminalIntro.tsx # Terminal 交互式自我介绍
│ ├── FeaturedPosts.tsx # 精选文章轮播
│ └── StatsBoard.tsx # 站点数据仪表盘
│
├── lib/ # 工具库
│ ├── utils.ts # cn() 等工具函数
│ ├── prisma.ts # Prisma 客户端单例
│ ├── mdx.ts # MDX 编译与渲染
│ └── constants.ts # 站点常量
│
├── content/ # 内容目录
│ ├── posts/ # Markdown/MDX 文章
│ │ ├── hello-world.mdx
│ │ └── ...
│ ├── projects/ # 项目数据
│ │ └── ...
│ └── snippets/ # 代码片段
│
├── public/ # 静态资源
│ ├── fonts/ # 自定义字体（JetBrains Mono 等）
│ ├── images/ # 图片
│ └── models/ # 3D 模型文件
│
├── styles/ # 样式
│ ├── animations.css # 关键帧动画
│ └── prose-custom.css # 文章内容样式覆盖
│
├── types/ # 类型定义
│ └── index.ts # 全局 TS 类型
│
├── hooks/ # 自定义 Hooks
│ ├── useMousePosition.ts # 鼠标位置追踪（视差）
│ ├── useScrollProgress.ts # 滚动进度
│ ├── useIntersectionObserver.ts# 进入视口检测
│ └── useLocalStorage.ts # 本地存储
│
├── providers/ # React Context Providers
│ └── ThemeProvider.tsx # 主题切换（黑暗/浅色/赛博）
│
├── docker/ # Docker 配置
│ ├── Dockerfile
│ └── nginx.conf
│
├── .env.local # 环境变量
├── tailwind.config.ts # Tailwind 配置（扩展暗黑色板）
├── next.config.ts # Next.js 配置
├── tsconfig.json # TS 配置
├── package.json
└── README.md
三、核心技术设计
3.1 视觉语言系统
色彩体系（暗黑赛博风）
:root {
--bg-primary: #0a0a0f; /* 深空黑底 */
--bg-secondary: #12121a; /* 次级背景 */
--bg-card: rgba(18, 18, 26, 0.6); /* 卡片 - 毛玻璃 */
--accent-cyan: #00f0ff; /* 主强调色 - 青色 */
--accent-purple: #a855f7; /* 辅强调色 - 紫色 */
--accent-pink: #ff2d95; /* 点缀色 - 粉色 */
--text-primary: #e2e8f0; /* 主文字 */
--text-secondary: #94a3b8; /* 次文字 */
--text-dim: #475569; /* 弱文字 */
--glow-cyan: 0 0 20px #00f0ff; /* 青色辉光 */
--glow-purple: 0 0 20px #a855f7; /* 紫色辉光 */
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.06);
}
字体层级
| 用途 | 字体 | 权重 |
|---|---|---|
| 标题/Logo | Orbitron / 'Syne' | 700-900 |
| 正文 | 'Inter' | 300-500 |
| 代码 | 'JetBrains Mono', 'Fira Code' | 400-600 |
| 装饰性 | 'Major Mono Display' | — |
3.2 核心交互设计
| 交互 | 实现 | 描述 |
|---|---|---|
| 鼠标视差 | useMousePosition → 粒子/卡片偏移 |
鼠标移动带动背景元素位移 |
| 滚动驱动 | useScrollProgress + scroll-driven-animations |
页面元素按滚动进度触发动画 |
| 页面转场 | Framer Motion AnimatePresence + layoutId |
SP 风格的平滑页面切换 |
| 悬停反馈 | 卡片 3D 倾斜 + 辉光边缘 + 缩放 | 所有可交互元素都有"活着"的反馈 |
| 懒加载 | next/dynamic + 滚动 IntersectionObserver |
非首屏组件延迟加载 |
3.3 性能优化策略
┌───────────────────────────────────────────┐
│ 性能优化策略 │
├───────────────────────────────────────────┤
│ • 粒子背景: canvas 离屏渲染 + requestAnim │
│ • Image: next/image + WebP + blurDataURL │
│ • 字体: next/font + 预加载 + fallback │
│ • 3D: R3F 懒加载 + 降低粒子数(移动端) │
│ • 文章: ISR revalidate=3600 增量静态生成 │
│ • 动画: 用 transform/opacity 避免重排 │
│ • 代码: 按需引入 Shiki + 延迟高亮 │
│ • 数据: SWR + 乐观更新 + 预取 │
└───────────────────────────────────────────┘
四、页面路由与数据流
┌─────────────┐
│ Next.js 15 │
│ App Router │
└──────┬──────┘
│
┌─────────────────┼─────────────────┐
│ │ │
┌────▼────┐ ┌─────▼─────┐ ┌──────▼─────┐
│ SSG │ │ ISR │ │ SSR │
│ posts/* │ │ 首页 │ │ 留言板 │
│ about │ │ projects │ │ 搜索 │
└─────────┘ │ /api/* │ │ 认证 │
└───────────┘ └────────────┘
静态生成 SSG: 构建时生成 HTML，CDN 缓存
增量再生 ISR: 构建生成 + 按需重新验证（revalidate）
服务端渲染 SSR: 每次请求渲染（动态数据）
客户端获取: useSWR / fetch → API Routes → Prisma
五、组件树 & 渲染层级
<RootLayout>
├── <Providers>
│ ├── <ThemeProvider /> # 主题上下文
│ └── <ParticleBackground /> # 全局粒子（fixed, 全屏）
│
├── <Navbar /> # fixed 顶部
│ ├── <Logo /> # 故障闪烁 Logo
│ ├── <NavLinks /> # 导航链接
│ └── <ThemeToggle /> # 主题切换按钮
│
├── <main>
│ └── <PageContent /> # 各页面内容（AnimatePresence 包裹）
│ ├── <HeroSection /> # 首页 Hero
│ │ ├── <TerminalIntro />
│ │ └── <GlitchText />
│ ├── <FeaturedPosts />
│ │ └── <PostCard />[]
│ └── <StatsBoard />
│
├── <Footer /> # 底部 + 星座连线
│
└── <ScanLine /> # CRT 扫描线（可选装饰层）
六、技术亮点实现
6.1 Terminal 交互式自我介绍
页面加载时，模拟终端输入效果，逐行打印自我介绍。支持用户输入简单命令（help、skills、projects）展示不同信息。
// 终端组件核心逻辑
const [lines, setLines] = useState<Line[]>([]);
const [input, setInput] = useState('');
const history = useRef<string[]>([]);
const commands: Record<string, () => string> = {
help: () => '可用命令: about, skills, projects, contact, clear',
skills: () => '● React/Next.js ● TypeScript ● Three.js ● Node.js',
about: () => '全栈开发者 | 设计爱好者 | 开源贡献者',
clear: () => { setLines([]); return ''; },
};
6.2 3D 粒子背景系统
Three.js 粒子系统，随鼠标移动产生交互，可切换不同形态（银河、矩阵、星云）。
粒子数量: 桌面端 3000 个 / 移动端 800 个
交互: 鼠标移动 → 粒子产生流动/波纹效果
色彩: 渐变映射 → 随主题切换
连接线: 相邻粒子间光纤连线（性能敏感，可选关闭）
6.3 阅读进度 & 文章页体验
┌─ 顶部阅读进度 ──────────────────────────── 100% ─┐
│ [==============光效进度条================] │
│ │
│ 📝 文章标题 │
│ 📅 2025-01-15 ⏱ 8 min read 👁 1,234 views │
│ │
│ 正文内容... [← 悬浮目录] │
│ 代码块 [霓虹 Monokai 主题 + 一键复制] │
│ 图片 [懒加载 + 模糊占位] │
│ │
│ ────────────────────────────────────── │
│ 💬 评论区 (客户端渲染，SSG 友好) │
└────────────────────────────────────────────────────┘
6.4 全站搜索
layer:
┌─ 用户输入 ─→ 防抖 300ms ─→ MeiliSearch/Pagefind API
│
├── 返回: 标题 + 摘要 + 路径 + 高亮片段
│
└── 展示: 模态框浮层，键盘上下选择，Enter 跳转
离线方案: Pagefind（构建时生成静态索引，无后端依赖）
在线方案: MeiliSearch（自建 Docker，实时索引）
七、部署架构
┌─────────────┐ ┌──────────────┐ ┌────────────┐
│ GitHub │ ──→ │ CI/CD │ ──→ │ Vercel │
│ (源码) │ │ GitHub Actions│ │ (主站) │
└─────────────┘ └──────────────┘ └─────┬──────┘
│
┌───────────────────────────────┤
│ │
┌───────▼───────┐ ┌─────────▼─────────┐
│ Docker │ │ 自建 VPS │
│ + MeiliSearch│ │ + PostgreSQL │
│ (搜索) │ │ (数据库/API) │
└───────────────┘ └───────────────────┘
域名: blog.yourdomain.com
CDN: Vercel Edge Network (全球 100+ 节点)
监控: Vercel Analytics + Sentry
备份: 每日自动备份 content/ + 数据库
八、推荐开发顺序
Phase 1 — 骨架（Week 1-2）
□ Next.js 项目初始化 + TypeScript + Tailwind
□ 基础目录结构搭建
□ 全局布局、主题系统
□ 粒子背景（简单版）
Phase 2 — 内容（Week 3-4）
□ MDX 内容管线
□ 文章列表页 + 详情页
□ 代码高亮 + 目录组件
□ 项目展示页
Phase 3 — 交互（Week 5-6）
□ 首页 Terminal 自我介绍
□ 3D 粒子背景增强
□ 页面转场动画
□ 视差 + 滚动驱动动画
Phase 4 — 动态（Week 7-8）
□ 数据库 + API Routes
□ 留言板
□ 阅读量 + 点赞
□ 全站搜索
Phase 5 — 打磨（Week 9-10）
□ 性能优化（Lighthouse 90+）
□ 移动端适配
□ SEO（sitemap、Open Graph、JSON-LD）
□ Docker + CI/CD
□ 自定义域名 + SSL
九、关键 npm 包
{
"dependencies": {
"next": "^15.x",
"react": "^19.x",
"react-dom": "^19.x",
"framer-motion": "^11.x",
"three": "^0.170.x",
"@react-three/fiber": "^8.x",
"@react-three/postprocessing": "^2.x",
"next-mdx-remote": "^5.x",
"@prisma/client": "^6.x",
"shiki": "^1.x",
"clsx": "^2.x",
"tailwind-merge": "^2.x",
"swr": "^2.x"
},
"devDependencies": {
"typescript": "^5.x",
"tailwindcss": "^4.x",
"prisma": "^6.x",
"postcss": "^8.x",
"autoprefixer": "^10.x"
}
}
十、设计灵感参考
| 风格元素 | 参考来源 |
|---|---|
| 粒子系统 + 鼠标交互 | CodePen / Three.js 官方示例 |
| 玻璃态 UI (Glassmorphism) | UI 设计趋势，MacOS Big Sur 启发的毛玻璃 |
| 故障文字 Glitch | 赛博朋克风格，2 层 position 偏移 + clip |
| Terminal 交互 | Stripe 的 Terminal 演示页 |
| 霓虹光效 | 80 年代合成器波 + Vaporwave |
| 滚动驱动动画 | Awwwards 获奖个人站 |
| CRT 扫描线 | 复古显示器模拟装饰层 |
| 3D 卡片翻转 | Apple 产品页的 3D 旋转卡片 |
本文由 admin 原创，转载请注明出处。
评论
0