docs: 重写 README 为中文,添加英文版跳转链接

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-01 18:13:53 +08:00
parent c5994759fb
commit ba385c119a
2 changed files with 167 additions and 9 deletions

87
README.en.md Normal file
View File

@@ -0,0 +1,87 @@
# blweb · Personal Blog
> Still water runs deep — ink dissolves in silence.
A personal blog built with React + Vite, combining Japanese minimalist aesthetics with glassmorphism design. No backend required, ready to deploy as static files.
[中文版 →](./README.md)
---
## Features
- **Japanese minimalist style** — sakura palette, kanji watermarks, manuscript grid backgrounds
- **Glassmorphism cards** — rounded corners with `backdrop-filter` frosted glass effect
- **Light / dark theme toggle** — persisted to `localStorage`
- **Sakura petal animation** — Canvas petals drift on every route transition
- **Admin panel** — PIN-protected; create, edit, and delete articles
- **Rich text editor** — toolbar with bold, italic, headings, blockquotes, and image insertion (URL or local file → base64)
- **Client-side search** — real-time filtering, no server needed
- **No backend** — all data stored in `localStorage`; deploy anywhere as static files
## Tech Stack
| Tech | Purpose |
|------|---------|
| React 18 | UI framework |
| Vite | Build tool |
| React Router v6 | Client-side routing |
| CSS Modules + Custom Properties | Styling & theme system |
| localStorage | Data persistence |
## Getting Started
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
```
Open `http://localhost:5173` in your browser.
## Project Structure
```
src/
├── components/
│ ├── admin/ # Admin panel (PIN gate, editor, toolbar)
│ ├── article/ # Article components (card, grid, body)
│ ├── layout/ # Layout (Header, Footer, AppShell)
│ └── ui/ # Shared UI (theme toggle, search, tags, petal canvas)
├── contexts/ # React Contexts (theme, article data)
├── pages/ # Page components
├── styles/ # Global styles, design tokens, animations
└── utils/ # Helpers (search, date formatting, slug generation)
```
## Routes
| Path | Page |
|------|------|
| `/` | Home (article list) |
| `/article/:slug` | Article detail |
| `/about` | About me |
| `/admin` | Admin panel (PIN required) |
| `/admin/new` | Create article |
| `/admin/edit/:slug` | Edit article |
## Admin Panel
Navigate to `/admin`. The default PIN is `2501`.
To change it, update the `CORRECT_PIN` constant in [`src/components/admin/AdminGate.jsx`](src/components/admin/AdminGate.jsx).
## Deployment
**Netlify**: `public/_redirects` is already configured for SPA routing. Drag and drop the `dist/` folder.
**GitHub Pages / other static hosts**: After `npm run build`, copy `dist/index.html` to `dist/404.html`.
## License
MIT

View File

@@ -1,16 +1,87 @@
# React + Vite # blweb · 个人博客
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. > 静かな水面に、深い墨が溶けていく
Currently, two official plugins are available: 一个基于 React + Vite 构建的个人博客,融合日系极简美学与毛玻璃设计风格,无需后端,开箱即用。
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) [English Version →](./README.en.md)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
## React Compiler ---
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). ## 特性
## Expanding the ESLint configuration - **极简日系风格** — 樱花配色、汉字水印、原稿用纸网格背景
- **毛玻璃卡片** — 圆角 + `backdrop-filter` 玻璃质感
- **亮/暗主题切换** — 持久化到 `localStorage`
- **樱花花瓣动画** — 路由跳转时 Canvas 飘落效果
- **文章管理后台** — PIN 保护,支持新建、编辑、删除
- **富文本编辑器** — 工具栏支持加粗、斜体、标题、引用、图片插入URL 或本地上传转 base64
- **客户端搜索** — 实时过滤,无需服务器
- **无后端** — 所有数据存于 `localStorage`,可直接部署为静态文件
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. ## 技术栈
| 技术 | 用途 |
|------|------|
| 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