个人博客前端 · 随记 / 技术笔记 / 一些顺手的小工具
Levi Blog 是我个人独立开发并长期自用的一套博客前端（Vue 3 + Vite）。主要用来写文章、整理笔记、放一些自己经常用的小工具。UI 走深色系 + 青色点缀的路线，支持明暗主题切换，也做了按时间自动切换的开关。布局偏响应式，桌面和手机都能用，但仍以我自己日常使用场景为主。
Levi Blog 目前有两个前端版本，共用 levi-blog-service 后端：
- 当前项目
Levi-Blog：Vue 3 + Vite 版本，功能完整，包含工具箱、动态背景特效和互动组件。 - My-Blog-Nuxt：Nuxt 4 SSR 版本，强调内容阅读、SEO、服务端渲染和更轻量的阅读体验。
两个版本的数据接口保持一致，可以根据部署环境和产品侧重点选择使用。
| ⭐ 组件总数 | 约 101 个 Vue 单文件组件（会随迭代变化） |
| 📄 页面路由 | 约 28 条（文章分类 / 工具箱 / 独立页面） |
| 🧰 工具模块 | 12 个 utils + 10 个 api 模块 |
| 🎨 主题系统 | 明暗切换 + 可选按时自动切换 |
| 📦 包管理 | Yarn · 依赖数量保持可控 |
|
|
|
|
| 类别 | 技术选型 | 说明 |
|---|---|---|
| 框架 | Vue 3.3 + Composition API | 主要开发方式 |
| 构建 | Vite 3.0 | 本地开发 / 打包 |
| 路由 | Vue Router 4 | 页面路由 |
| 状态 | Pinia 3 + 持久化插件 | 全局状态 + 本地持久化 |
| HTTP | Axios | 请求层基础 |
| 样式 | Sass + Bootstrap Icons | 样式与图标 |
| Markdown | md-editor-v3 + Prism.js | Markdown 编辑 / 高亮 |
| 图片 | Compressor.js + Cropper.js + ExifReader | 压缩 / 裁剪 / 元数据 |
| 加密 | Crypto-JS | 浏览器端加解密 |
| 动画 | Lottie Web + Hammer.js | 动画与拖拽等交互 |
| 特效 | Canvas + requestAnimationFrame | 背景特效 |
| 自动导入 | unplugin 系列 | 组件 / API / 图标自动导入 |
Levi-Blog/
├── public/ # 静态资源（不经过构建处理）
├── src/
│ ├── api/ # 🔌 API 接口层（10 个模块）
│ │ ├── articles.js # 文章接口
│ │ ├── comments.js # 评论接口
│ │ ├── messages.js # 留言接口
│ │ ├── links.js # 友链接口
│ │ └── ...
│ ├── assets/ # 🎨 静态资源（字体 / 图标 / 图片）
│ ├── components/ # 🧩 通用组件库
│ │ ├── MarkdownRenderer # Markdown 渲染器
│ │ ├── ImagePreview # 图片预览
│ │ ├── SwitchWallpaper # 背景特效/主题设置面板
│ │ ├── MatrixRain # Canvas 代码雨特效
│ │ ├── ParticleNetwork # Canvas 粒子连线特效
│ │ ├── StarField # Canvas 星空特效
│ │ ├── DustParticles # Canvas 浮尘特效
│ │ ├── CatPet # 互动猫咪
│ │ ├── ArticleSkeleton # 骨架屏
│ │ ├── FloatToolBar # 悬浮工具栏（主题/特效切换）
│ │ └── ...
│ ├── directives/ # 📌 自定义指令（vSlidIn 等）
│ ├── hooks/ # 🪝 组合式函数（useTheme / useGetData）
│ ├── layout/ # 🏗 布局组件（Header / Footer / 导航抽屉）
│ ├── router/ # 🧭 路由配置（28 条路由）
│ ├── stores/ # 📦 Pinia 状态仓库（含特效配置）
│ ├── styles/ # 🎭 全局样式（base / element / md）
│ ├── utils/ # 🔧 工具函数（12 个模块）
│ │ ├── request.js # Axios 封装
│ │ ├── storage.js # localStorage 封装
│ │ ├── vSlidIn.js # 元素滑入指令
│ │ └── ...
│ ├── views/ # 📄 页面视图
│ │ ├── Home/ # 首页（分屏 Hero + 终端窗口）
│ │ ├── Topic/ # 文章分类（日记 / 技术 / 萌宠 / 光影 / 笔记）
│ │ ├── Tools/ # 工具箱（加解密 / 换算 / 图片等）
│ │ ├── About/ # 关于我 / 作品集 / 联系
│ │ ├── MessageBoard/ # 留言板
│ │ ├── Links/ # 友情链接
│ │ ├── Nav/ # 常用网站导航
│ │ └── Material/ # 前端资料
│ ├── App.vue # 根组件（开门动画 / 主题初始化）
│ └── main.js # 入口文件
├── vite.config.js # Vite 构建配置
├── package.json # 项目依赖
└── LICENSE # MIT 开源协议
- Node.js >= 16
- Yarn >= 1.22
# 克隆仓库
git clone https://github.com/LeviQin/Levi-Blog.git
cd Levi-Blog
# 安装依赖
yarn install
# 启动开发服务器（localhost:9527）
yarn dev
# 构建生产版本
yarn build
# 预览构建结果
yarn preview| 功能 | 说明 |
|---|---|
| 明暗切换 | 悬浮工具栏月亮/太阳按钮，偏好持久化 |
| 按时自动切换 | 18:00-08:00 自动暗色，其余亮色（可关闭） |
| 首页 Hero | 分屏布局：终端风格标题 + 代码窗口 |
点击右下角悬浮工具栏的星星图标，可打开特效设置面板：
- 4 种 Canvas 特效：代码雨 / 粒子连线 / 星空 / 浮尘
- 可调参数：密度、速度、强度、颜色（5 档预设）
- 实时预览：面板内直接看到当前特效效果
- 底色搭配：多套配色光晕 + 特效叠加
| 页面 | 地址 |
|---|---|
| 🏠 首页 | leviqin.top |
| 📔 日常随记 | /category/daily |
| 💻 开发心得 | /category/technology |
| 🐱 萌宠日记 | /category/cute-pet |
| 📒 学习笔记 | /category/notes |
| 🌄 光影故事 | /category/landscape |
| 工具 | 地址 |
|---|---|
| 🔐 加解密 | /encryption |
| 📏 单位换算 | /unit |
| 🔑 密码生成器 | /password |
| 🖼 图片处理 | /image-processing |
| 🗜 图片压缩 | /image-compression |
| 📋 图片 EXIF | /image-exif-view |
| 页面 | 地址 |
|---|---|
| 🧑 关于我 | /about |
| 💼 作品集 | /portfolio |
| 页面 | 地址 |
|---|---|
| 🔗 常用网站 | /nav |
| 💬 留言板 | /comments |
| 🤝 友情链接 | /friendlinks |
生产构建里做了一些偏“实用主义”的处理，主要目标是减少体积、让首屏更轻一点：
| 优化项 | 策略 |
|---|---|
| 代码压缩 | esbuild minify，速度远快于 terser |
| CSS 处理 | 所有 CSS 合并为单一文件 |
| 图片优化 | vite-plugin-imagemin 自动转 WebP，质量 60% |
| Chunk 分割 | 组件级代码分割，按需加载 |
| Source Map | 生产环境关闭，减小体积 |
| 静态资源 | 带 hash 的文件名，长效缓存 |
| 构建清单 | 生成 manifest.json，便于服务端集成 |
| 特效性能 | Canvas 限制 DPR ≤ 2，页面隐藏自动暂停动画 |
如果你在使用中发现问题，或者有更顺手的实现方式，欢迎提 Issue / PR：
- Fork 本仓库
- 创建你的特性分支：
git checkout -b feature/amazing-feature - 提交你的更改：
git commit -m 'feat: add amazing feature' - 推送到分支：
git push origin feature/amazing-feature - 发起 Pull Request
本项目基于 MIT License 开源，你可以自由地使用、修改和分发。
如果这个项目对你有帮助，请给一个 ⭐️ 吧！