作者：SantaChains
一个充满日本文学美学的个人博客，以川端康成的雪国为灵感，融合了现代Web技术与传统东方美学。
- 川端康成风格：整体色调采用樱花粉与雾蓝色的渐变，营造雪国的朦胧美感
- 动态樱花飘落：实时生成的樱花花瓣动画，营造诗意的氛围
- 水波纹效果：点击页面产生涟漪，增添互动趣味
- 文字渐变：使用CSS渐变动画，让文字如雪花般闪烁
- 深色模式：优雅的暗色主题，保护眼睛的同时保持美感
- 3D磁吸卡片：鼠标移动时卡片跟随倾斜，增强沉浸感
- 打字机效果：副标题逐字显示，带闪烁光标
- 模糊玻璃效果：使用backdrop-filter实现现代毛玻璃质感
- 平滑过渡：所有交互都有精心设计的动画过渡
- 响应式设计：完美适配桌面、平板和移动设备
- Markdown渲染：支持完整的Markdown语法，包括表格、代码块、GFM扩展等
- 目录导航：自动提取文章标题，支持平滑滚动定位
- 首字下沉：文章首字采用特殊字体，增添文学气息
- 图片懒加载：优化性能的同时保持流畅体验
- 代码高亮：代码块使用霞鹜文楷Mono字体，优雅展示
- 分类系统：文章按主题分类，便于浏览
- 标签云：支持多标签管理，快速筛选相关内容
- 友链页面：展示友情链接
- 留言板：访客可以留下评论和反馈
| 技术 | 用途 |
|---|---|
| Next.js 15.4.4 | React框架，支持App Router |
| TypeScript 5.x | 类型安全的JavaScript |
| Tailwind CSS 4.x | 实用优先的CSS框架 |
| shadcn/ui | 精美的React组件库 |
| Framer Motion | 流畅的动画效果 |
| Canvas API | 高性能粒子系统 |
| Radix UI | 无障碍UI组件基础 |
| Remark | Markdown解析与处理 |
| Turbopack | 下一代打包工具（开发模式） |
"美在于发现，在于邂逅，是机缘。" - 川端康成
本项目试图通过数字媒介，捕捉川端康成笔下那种稍纵即逝的美。每一个像素、每一行代码，都是对"物哀"美学的现代诠释。
| 颜色 | 色值 | 寓意 |
|---|---|---|
| 🌸 樱花粉 | #F8BBD9 |
代表生命的脆弱与美丽 |
| 🌫️ 雾蓝色 | #B8C5D6 |
象征雪国的宁静与深远 |
| 📜 宣纸白 | #FEFEFE |
承载文字的纯净背景 |
- 樱花飘落：象征时间的流逝与生命的短暂
- 水波涟漪：表现内心的波动与情感的扩散
- 文字闪烁：如同雪花在月光下的反射
推荐插件
📖 查看详细使用指南 - 包含 Obsidian 配置、写作工作流、部署说明等完整教程
# 克隆项目
git clone https://github.com/SantaChains/santachains-blog
# 进入项目目录
cd santachains-blog
# 安装依赖
npm install
# 启动开发服务器（使用Turbopack）
npm run dev访问 http://localhost:3000 查看效果。
| 命令 | 说明 |
|---|---|
npm run dev |
启动开发服务器（Turbopack加速） |
npm run build |
构建生产版本 |
npm run prebuild |
复制图片资源到public目录 |
npm start |
启动生产服务器 |
npm run lint |
运行ESLint代码检查 |
npm run verify |
验证文章slug和图片完整性 |
npm run copy-images |
手动复制图片资源 |
构建输出位于 dist 目录。
santachains-blog/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── categories/ # 分类页面
│ │ ├── friends/ # 友链页面
│ │ ├── guestbook/ # 留言板页面
│ │ ├── posts/ # 文章列表与详情
│ │ └── tags/ # 标签页面
│ ├── components/ # React组件
│ │ ├── animation/ # 动画组件
│ │ ├── animations/ # 动效组件
│ │ ├── dynamic/ # 动态导入组件
│ │ ├── effects/ # 视觉效果组件
│ │ ├── layout/ # 布局组件
│ │ ├── post/ # 文章相关组件
│ │ └── ui/ # UI组件库(shadcn)
│ ├── lib/ # 工具函数
│ │ ├── data/ # 数据层
│ │ └── services/ # 服务层
│ ├── posts/ # 博客内容
│ │ ├── content/ # Markdown文章
│ │ ├── images/ # 文章配图
│ │ └── templates/ # 文章模板
│ └── types/ # TypeScript类型
├── public/ # 静态资源
│ └── fonts/ # 字体文件
├── scripts/ # 构建脚本
└── .github/workflows/ # CI/CD配置
- 桌面端：三列网格布局，充分展示内容
- 平板端：双列布局，保持阅读体验
- 移动端：单列布局，优化触摸交互
本项目使用了以下中文字体：
| 字体 | 文件 | 用途 |
|---|---|---|
| Google Arima | Arima-Regular.ttf |
标题和正文 |
| 文泉微米黑 | WenQuanWeiMiHei.ttf |
正文内容 |
| 仓耳今楷03 | CangErJinKai03.ttf |
首字下沉 |
| 霞鹜文楷 Mono | LXGWWenKaiMono.ttf |
代码块和等宽文本 |
- Next.js - React框架
- Tailwind CSS - CSS框架
- shadcn/ui - UI组件库
- Framer Motion - 动画库
- Lucide Icons - 图标库
- 川端康成《雪国》- 虚无美学
- 三岛由纪夫《金阁寺》- 极致之美
- chenglou/pretext - 排版灵感
- Google Fonts - Arima
- 文泉驿 - 微米黑
- 仓耳字库 - 今楷
- 霞鹜文楷 - 文楷Mono
MIT © SantaChains
在雪国的寂静中，用文字捕捉那些稍纵即逝的美丽瞬间。
Made with 💗 by SantaChains