98 lines
2.6 KiB
Markdown
98 lines
2.6 KiB
Markdown
# Minimalist AI Blog Frontend
|
||
|
||
## 项目简介
|
||
|
||
基于 Next.js 16 + Rust 后端的极简主义博客系统前端。采用瑞士风格设计（黑白灰配色、Inter 字体），专注于内容展示。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Next.js 16 (App Router)
|
||
- **语言**: TypeScript
|
||
- **样式**: Tailwind CSS v4 + @tailwindcss/typography
|
||
- **渲染**: React Markdown + Rehype Highlight (代码高亮)
|
||
- **部署**: Docker + Docker Compose
|
||
|
||
## 功能特性
|
||
|
||
- 🎨 **极简设计**: 纯粹的内容阅读体验，无干扰元素
|
||
- 📝 **Markdown 支持**: 完美支持 GFM 语法和代码高亮 (GitHub Light 主题)
|
||
- 📱 **完全响应式**: 适配移动端和桌面端
|
||
- 🔐 **后台管理**: 集成登录、文章发布、编辑和删除功能
|
||
- ⚡ **高性能**: 基于 Next.js 静态生成与增量更新
|
||
- 🐳 **Docker 部署**: 一键构建与启动
|
||
|
||
## 快速开始
|
||
|
||
### 1. 本地开发
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
```
|
||
|
||
访问 `http://localhost:3000` 查看效果。
|
||
|
||
### 2. 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
npm start
|
||
```
|
||
|
||
## Docker 部署
|
||
|
||
本项目支持使用 Docker Compose 一键部署，无需手动配置 Node.js 环境。
|
||
|
||
### 部署步骤
|
||
|
||
1. **克隆仓库**
|
||
```bash
|
||
git clone <your-repo-url>
|
||
cd rs-blog
|
||
```
|
||
|
||
2. **配置后端地址**
|
||
打开 `docker-compose.yml` 文件，修改 `NEXT_PUBLIC_API_URL` 为你的服务器公网 IP 或域名：
|
||
```yaml
|
||
args:
|
||
# 将此处修改为你的服务器 IP 或域名
|
||
NEXT_PUBLIC_API_URL: http://your-server-ip:8765
|
||
```
|
||
> **注意**: 不要使用 `127.0.0.1` 或 `localhost`，因为这是构建在前端代码中的地址，用户浏览器需要能够直接访问该地址。
|
||
|
||
3. **启动服务**
|
||
```bash
|
||
docker-compose up -d --build
|
||
```
|
||
|
||
4. **查看日志** (可选)
|
||
```bash
|
||
docker-compose logs -f
|
||
```
|
||
|
||
服务将在 `http://your-server-ip:3000` 启动。
|
||
|
||
## 环境变量
|
||
|
||
| 变量名 | 描述 | 默认值 |
|
||
|--------|------|--------|
|
||
| `NEXT_PUBLIC_API_URL` | 后端 API 地址 | `http://127.0.0.1:8765` |
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── app/ # Next.js 页面路由
|
||
│ ├── admin/ # 后台管理页面
|
||
│ ├── login/ # 登录页面
|
||
│ └── posts/ # 文章详情页
|
||
├── components/ # React 组件
|
||
│ ├── layout/ # 布局组件 (Header, Footer)
|
||
│ ├── post/ # 文章相关组件
|
||
│ └── ui/ # 基础 UI 组件 (Button, Input)
|
||
├── lib/ # 工具库 (API 客户端, Hooks)
|
||
└── types/ # TypeScript 类型定义
|
||
``` |