rodvl-blog — 个人博客与作品集 | RudolphLiu

这个网站本身就是这个项目。从设计到开发完全由我一人完成，是我探索现代 Web 开发技术栈的实践场地。

技术选型

选择 Next.js 15 App Router 作为框架，原因是它的 RSC（React Server Components）架构非常适合内容型网站：静态页面在构建时生成，交互部分按需注水，性能与开发体验兼顾。

Velite 替代了传统的 contentlayer，在构建时将 MDX 文件编译成类型安全的数据对象，同时支持自定义 schema 验证。这意味着每一篇文章的 frontmatter 字段都有完整的 TypeScript 类型推导。

Tailwind CSS v4 带来了基于 CSS 变量的主题系统，让深色/浅色模式的切换更加优雅，设计 token 集中管理。

设计理念

整体视觉参考了 Moebius 的线条美学与 Sable 游戏的沙漠色调——克制、温暖、有质感。核心 accent 色 #e07840（日落橙）贯穿全站，与暗色背景形成对比。

内容模块：

博客 — 技术文章与生活思考
项目 — 软件作品、方案文档、IoT 发明
摄影 — 旅行摄影相册
阅读 — 读过的书和短评

技术亮点

MDX 内容管道

// velite.config.ts
const blog = defineCollection({
  name: 'Blog',
  pattern: 'app/blog/posts/**/*.mdx',
  schema: s.object({
    title: s.string().max(99),
    publishedAt: s.isodate(),
    summary: s.string().max(999),
    tags: s.array(s.string()).default([]),
    body: s.mdx(),
  }),
})

图片加载优化

摄影模块涉及大量高清图片，采用以下策略保证丝滑体验：

模块级 Set 缓存已加载的图片 src，避免返回导航时重新触发 fade-in
prioritySrc prop 从服务端确定性地传入，避免 SSR/Hydration 不一致
CSS transition-[opacity,transform] 实现 500ms 优雅淡入

侧边栏系统

桌面端固定侧边栏（可折叠 192px/64px），通过 SidebarProvider 全局管理状态，MainContent 动态调整左侧 margin 实现平滑过渡。

部署

Vercel + 自动 CI/CD。每次 push 到 main 分支自动触发构建，Velite 在构建时处理所有 MDX，生成静态 HTML，首屏加载极快。