胡旭
106 lines
3.4 KiB
Markdown
106 lines
3.4 KiB
Markdown
# sui_blog
|
||
|
||
个人博客 — 水墨纸质杂志风格。
|
||
|
||
技术栈：Next.js 16 + React 19 + Tailwind CSS 4 + GSAP ScrollTrigger。
|
||
|
||
## 页面
|
||
|
||
| 路由 | 说明 |
|
||
|---|---|
|
||
| `/` | 首页 — Hero 逐字揭示 + 精选文章 + 最新文章 |
|
||
| `/blog` | 文章列表 — 按时间倒序，分类/标签筛选 |
|
||
| `/posts/[slug]` | 文章详情 — 宋式排版，上下篇导航 |
|
||
| `/categories` | 分类浏览 — 卡片网格，悬停动效 |
|
||
| `/tags` | 标签云 |
|
||
| `/about` | 关于页 — 个人介绍 + 时间轴 + 技术栈 |
|
||
|
||
## 后台管理
|
||
|
||
| 路由 | 说明 |
|
||
|---|---|
|
||
| `/admin/login` | 登录（密码认证，cookie session） |
|
||
| `/admin` | 仪表盘 — 统计概览 + 最近文章 |
|
||
| `/admin/posts` | 文章管理 — 列表筛选、新建、编辑、删除 |
|
||
| `/admin/categories` | 分类管理 — 增删改 |
|
||
| `/admin/tags` | 标签管理 — 云式展示，hover 删除 |
|
||
|
||
数据存储在 `src/data/storage/*.json`，已加入 `.gitignore`。
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
pnpm install
|
||
pnpm dev # http://localhost:3000
|
||
pnpm build # 生产构建
|
||
```
|
||
|
||
初始化种子数据（首次运行）：
|
||
|
||
```bash
|
||
npx tsx src/lib/seed.ts
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── app/
|
||
│ ├── page.tsx # 首页
|
||
│ ├── layout.tsx # 根布局
|
||
│ ├── globals.css # 全局样式 + Tailwind v4 设计令牌
|
||
│ ├── about/ # 关于页
|
||
│ ├── admin/ # 后台管理
|
||
│ │ ├── layout.tsx # 侧栏 + 鉴权
|
||
│ │ ├── login/ # 登录页
|
||
│ │ ├── posts/ # 文章 CRUD
|
||
│ │ ├── categories/ # 分类管理
|
||
│ │ └── tags/ # 标签管理
|
||
│ ├── api/ # Route Handlers
|
||
│ │ ├── auth/ # 登录/登出/鉴权
|
||
│ │ ├── posts/ # 文章 CRUD
|
||
│ │ ├── categories/ # 分类 CRUD
|
||
│ │ └── tags/ # 标签 CRUD
|
||
│ ├── blog/ # 文章列表
|
||
│ ├── categories/ # 分类浏览
|
||
│ ├── posts/[slug]/ # 文章详情
|
||
│ └── tags/ # 标签云
|
||
├── components/
|
||
│ ├── Header.tsx # 顶部导航
|
||
│ ├── Footer.tsx # 页脚
|
||
│ ├── HeroSection.tsx # 首页 Hero
|
||
│ ├── BlogList.tsx # 文章列表组件
|
||
│ ├── PostContent.tsx # 文章正文排版
|
||
│ ├── PostSections.tsx # 精选/最近文章卡片
|
||
│ └── GsapReveal.tsx # GSAP 滚动动画组件
|
||
├── data/
|
||
│ ├── posts.ts # Mock 数据
|
||
│ └── storage/ # JSON 数据文件（gitignored）
|
||
└── lib/
|
||
├── store.ts # 数据存储层（posts/categories/tags CRUD）
|
||
└── seed.ts # 种子数据脚本
|
||
```
|
||
|
||
## 设计系统
|
||
|
||
详见 [UI.md](./UI.md)。
|
||
|
||
核心色彩：parchment（纸张底色）+ ink（墨色文字）+ terracotta（赭石强调）+ sage（成功/发布状态）。
|
||
|
||
字体三层：`font-display`（宋体标题）→ `font-body`（宋体正文）→ `font-sans`（无衬线 UI 文字）。
|
||
|
||
动画：GSAP ScrollTrigger 驱动页面滚动揭示，逐字 blur 动画用于标题，CSS transition 处理微交互。
|
||
|
||
## 部署
|
||
|
||
```bash
|
||
pnpm build
|
||
pnpm start
|
||
```
|
||
|
||
或部署到 Vercel / 任意 Node.js 主机。
|
||
|
||
## License
|
||
|
||
MIT
|