blweb/README.md

blweb · 个人博客

静かな水面に、深い墨が溶けていく

一个基于 React + Vite 构建的个人博客，融合日系极简美学与毛玻璃设计风格，无需后端，开箱即用。

English Version →

---

特性

• 极简日系风格 — 樱花配色、汉字水印、原稿用纸网格背景
• 毛玻璃卡片 — 圆角 + backdrop-filter 玻璃质感
• 亮/暗主题切换 — 持久化到 localStorage
• 樱花花瓣动画 — 路由跳转时 Canvas 飘落效果
• 文章管理后台 — PIN 保护，支持新建、编辑、删除
• 富文本编辑器 — 工具栏支持加粗、斜体、标题、引用、图片插入（URL 或本地上传转 base64）
• 客户端搜索 — 实时过滤，无需服务器
• 无后端 — 所有数据存于 localStorage，可直接部署为静态文件

技术栈

技术	用途
React 18	UI 框架
Vite	构建工具
React Router v6	客户端路由
CSS Modules + 自定义属性	样式与主题系统
localStorage	数据持久化

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

启动后访问 http://localhost:5173

目录结构

src/
├── components/
│   ├── admin/       # 管理后台组件（PIN 锁、编辑器、工具栏）
│   ├── article/     # 文章相关组件（卡片、列表、正文）
│   ├── layout/      # 布局组件（Header、Footer、AppShell）
│   └── ui/          # 通用 UI（主题切换、搜索栏、标签、花瓣动画）
├── contexts/        # React Context（主题、文章数据）
├── pages/           # 页面组件
├── styles/          # 全局样式、设计 Token、动画
└── utils/           # 工具函数（搜索、日期格式化、slug 生成）

路由

路径	页面
/	首页（文章列表）
/article/:slug	文章详情
/about	关于我
/admin	管理后台（需 PIN）
/admin/new	新建文章
/admin/edit/:slug	编辑文章

管理后台

访问 /admin，默认 PIN 为 2501。

可在 src/components/admin/AdminGate.jsx 中修改 CORRECT_PIN 常量。

部署

Netlify：public/_redirects 已配置 SPA 路由重定向，直接拖拽 dist/ 目录即可。

GitHub Pages / 其他静态托管：npm run build 后将 dist/index.html 复制为 dist/404.html。

许可

MIT