151 lines
3.9 KiB
Markdown
151 lines
3.9 KiB
Markdown
# turingflow-blog-001
|
|
|
|
个人作品集/博客网站模板，适用于设计师、开发者、自由职业者展示作品和服务。
|
|
|
|
## 技术栈
|
|
|
|
- React 19 + Vite 7
|
|
- Tailwind CSS 4
|
|
- React Router DOM 7
|
|
- Lucide React (图标库)
|
|
|
|
## 快速开始
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm run dev
|
|
```
|
|
|
|
## 目录结构
|
|
|
|
```text
|
|
src/
|
|
├── App.jsx # 应用入口，包含路由配置
|
|
├── main.jsx # React 挂载点
|
|
├── index.css # 全局样式 (Tailwind)
|
|
├── components/ # 可复用组件
|
|
│ ├── NavBar.jsx # 导航栏
|
|
│ ├── Footer.jsx # 页脚
|
|
│ ├── Button.jsx # 按钮组件
|
|
│ ├── AboutCard.jsx # 关于卡片
|
|
│ ├── ProjectCards.jsx # 项目卡片列表
|
|
│ ├── Testimonials.jsx # 客户评价
|
|
│ ├── Faq.jsx # 常见问题
|
|
│ └── ... # 其他组件
|
|
├── pages/ # 页面组件
|
|
│ ├── Home.jsx # 首页
|
|
│ ├── About.jsx # 关于页面
|
|
│ ├── Services.jsx # 服务页面
|
|
│ ├── Portfolio.jsx # 作品集列表
|
|
│ ├── ProductDetail.jsx# 作品详情
|
|
│ ├── Blog.jsx # 博客列表
|
|
│ ├── BlogDetail.jsx # 博客详情
|
|
│ └── Contact.jsx # 联系页面
|
|
├── data/ # 静态数据 (JSON)
|
|
│ ├── menu.json # 导航菜单配置
|
|
│ ├── projects.json # 作品集数据
|
|
│ ├── blog.json # 博客文章数据
|
|
│ ├── testimonials.json# 客户评价数据
|
|
│ ├── brands.json # 合作品牌数据
|
|
│ ├── certifications.json # 资质认证数据
|
|
│ ├── faq.json # 常见问题数据
|
|
│ └── work.json # 工作经历数据
|
|
└── lib/ # 工具库
|
|
└── Head.jsx # 页面头部管理
|
|
```
|
|
|
|
## 路由配置
|
|
|
|
| 路径 | 页面 | 说明 |
|
|
|------|------|------|
|
|
| `/` | Home | 首页 |
|
|
| `/about` | About | 关于我 |
|
|
| `/services` | Services | 服务介绍 |
|
|
| `/portfolio` | Portfolio | 作品集列表 |
|
|
| `/portfolio/:slug` | ProductDetail | 作品详情 |
|
|
| `/blog` | Blog | 博客列表 |
|
|
| `/blog/:slug` | BlogDetail | 博客详情 |
|
|
| `/contact` | Contact | 联系方式 |
|
|
|
|
## 数据结构
|
|
|
|
### 导航菜单 (data/menu.json)
|
|
|
|
```json
|
|
[
|
|
{ "label": "首页", "path": "/" },
|
|
{ "label": "关于", "path": "/about" },
|
|
{ "label": "服务", "path": "/services" }
|
|
]
|
|
```
|
|
|
|
### 项目数据 (data/projects.json)
|
|
|
|
```json
|
|
[
|
|
{
|
|
"id": 1,
|
|
"slug": "project-name",
|
|
"title": "项目标题",
|
|
"description": "项目描述",
|
|
"image": "/images/project.jpg",
|
|
"category": "Web Design",
|
|
"tags": ["React", "Tailwind"]
|
|
}
|
|
]
|
|
```
|
|
|
|
### 博客数据 (data/blog.json)
|
|
|
|
```json
|
|
[
|
|
{
|
|
"id": 1,
|
|
"slug": "article-slug",
|
|
"title": "文章标题",
|
|
"excerpt": "文章摘要",
|
|
"content": "文章正文内容...",
|
|
"image": "/images/blog.jpg",
|
|
"date": "2024-01-15",
|
|
"author": "作者名",
|
|
"tags": ["设计", "开发"]
|
|
}
|
|
]
|
|
```
|
|
|
|
## 常见修改任务
|
|
|
|
### 修改网站信息
|
|
|
|
1. 编辑 `index.html` 中的 `<title>` 和 meta 标签
|
|
2. 修改 `src/components/NavBar.jsx` 中的 Logo 和网站名称
|
|
3. 修改 `src/components/Footer.jsx` 中的版权信息
|
|
|
|
### 修改导航菜单
|
|
|
|
编辑 `src/data/menu.json`，添加或删除菜单项
|
|
|
|
### 添加新页面
|
|
|
|
1. 在 `src/pages/` 创建新页面组件
|
|
2. 在 `src/App.jsx` 的 Routes 中添加路由
|
|
|
|
### 修改样式主题
|
|
|
|
编辑 `src/index.css` 中的 CSS 变量或 Tailwind 配置
|
|
|
|
### 添加作品/博客
|
|
|
|
编辑 `src/data/projects.json` 或 `src/data/blog.json`
|
|
|
|
## 布局说明
|
|
|
|
- `PageShell` 组件统一控制页面最大宽度 (`max-w-7xl`)
|
|
- 响应式断点：`lg:px-10` (大屏增加内边距)
|
|
- 所有页面共享 NavBar 和 Footer
|
|
|
|
## 图片资源
|
|
|
|
- 存放在 `public/` 目录
|
|
- 引用路径：`/images/xxx.jpg`
|