🌸 开源了一个Vue3个人博客：SakuraBlog，樱花+科技风双主题

最近花时间把我的个人博客 fineday.vip 整理成了一个可复用的博客模板开源出来——SakuraBlog 🌸

✨ 为什么做这个？

市面上的博客模板大多"能用但不好看"。作为前端开发者 + 颜控，我想要一个：

• 颜值在线的（不是那种2018年的Bootstrap风格）
• 技术栈现代的（Vue3 + TypeScript + Vite）
• 开箱即用的（不用折腾半天才能跑起来）

所以就有了 SakuraBlog。

🎨 设计亮点

双主题系统

模式	特点
🌸 樱花模式	粉色系 + 樱花飘落粒子 + 柔和渐变
🔮 科技HUD模式	深蓝底色 + 扫描线 + 发光边框 + 赛博朋克

一键切换，CSS变量驱动，所有组件自动适配。

玻璃态 UI

• backdrop-filter: blur() 毛玻璃卡片
• 半透明背景 + 渐变边框
• 明暗两套配色都精心调整过

内置功能

• 📝 Markdown 文章渲染（marked）
• 🌓 明暗主题切换
• 📱 响应式布局
• ⚡ ECharts 数据可视化图表展示
• 🐙 GitHub 仓库信息面板
• 🏷️ 文章标签/分类/搜索
• 💬 评论系统（localStorage）
• 👤 个人作品集展示页

🛠 技术栈

前端框架：Vue 3.4 (Composition API + TypeScript)
UI库：Element Plus 2.x
构建工具：Vite 6
样式：SCSS + CSS Variables
图表：ECharts 6
路由：Vue Router 4
动画：CSS Transitions + Live2D
部署：GitHub Pages (Vite SSG)

🚀 快速开始

# 克隆
git clone https://github.com/zxgzs/finedayblogs.git

# 安装
cd finedayblogs; yarn install

# 本地开发
yarn dev        # http://localhost:5173

# 构建部署
yarn build       # 输出到 dist/

📁 项目结构

src/
├── components/     # 通用组件（文章卡片、侧边栏等）
├── composables/    # 组合式函数（useChart, useTheme...）
├── views/          # 页面视图
├── data/           # 数据文件（articles.ts）
├── router/         # 路由配置
└── utils/          # 工具函数
public/             # 静态资源（OG图、图标等）

版本对比

功能	Free	Pro	Enterprise
基础博客功能	✅	✅	✅
樱花/科技双主题	✅	✅	✅
ECharts可视化	✅	✅	✅
10种预设配色	❌	✅	✅
粒子特效开关	❌	✅	✅
Live2D看板娘	❌	✅	✅
定制配色方案	❌	❌	✅
1对1技术支持	❌	❌	✅
价格	免费	¥99	¥299

Free 版完全免费使用（MIT协议），Pro/Enterprise 版提供更多定制化选项和技术支持。

在线预览

👉 fineday.vip （樱花模式 / 科技风 可切换）

GitHub

⭐ 如果觉得不错，欢迎给个 Star 支持一下！

🔗 github.com/zxgzs/fined…

---

我是晴天，专注 Vue3 + ECharts 数据可视化开发。欢迎交流~