# blweb · 个人博客

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

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

[English Version →](./README.en.md)

---

## 特性

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

## 技术栈

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

## 快速开始

```bash
# 安装依赖
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`](src/components/admin/AdminGate.jsx) 中修改 `CORRECT_PIN` 常量。

## 部署

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

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

## 许可

MIT