254 lines
5.5 KiB
Markdown
254 lines
5.5 KiB
Markdown
# turingflow-landing-001
|
||
|
||
单页落地页模板，适用于企业、产品、服务推广展示。基于 Bootstrap 3 样式框架。
|
||
|
||
## 技术栈
|
||
|
||
- React 19 + Vite 6
|
||
- Bootstrap 3 (CSS 框架)
|
||
- Font Awesome 4 (图标库)
|
||
- Smooth Scroll (平滑滚动)
|
||
- EmailJS (联系表单邮件发送)
|
||
- jQuery + Bootstrap JS (导航栏折叠)
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
pnpm install
|
||
pnpm run dev
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```text
|
||
src/
|
||
├── App.jsx # 应用入口，组装所有页面区块
|
||
├── main.jsx # React 挂载点
|
||
├── App.css # 应用样式
|
||
├── index.css # 全局样式
|
||
├── components/ # 页面区块组件
|
||
│ ├── navigation.jsx # 导航栏 (固定顶部)
|
||
│ ├── header.jsx # 首屏 Hero 区域
|
||
│ ├── features.jsx # 特性列表
|
||
│ ├── about.jsx # 关于我们
|
||
│ ├── services.jsx # 服务介绍
|
||
│ ├── gallery.jsx # 作品画廊 (Lightbox)
|
||
│ ├── testimonials.jsx # 客户评价
|
||
│ ├── Team.jsx # 团队成员
|
||
│ ├── contact.jsx # 联系表单 + 页脚
|
||
│ └── image.jsx # 图片组件
|
||
├── data/ # 静态数据
|
||
│ └── data.json # 所有内容数据
|
||
└── logo.svg # Logo 文件
|
||
public/
|
||
├── css/ # Bootstrap + 自定义样式
|
||
│ ├── bootstrap.css # Bootstrap 3 核心样式
|
||
│ ├── style.css # 自定义页面样式
|
||
│ └── nivo-lightbox/ # Lightbox 插件样式
|
||
├── fonts/ # 字体文件
|
||
│ └── font-awesome/ # Font Awesome 图标
|
||
├── img/ # 图片资源
|
||
│ ├── portfolio/ # 作品集图片
|
||
│ ├── team/ # 团队成员照片
|
||
│ └── testimonials/ # 客户头像
|
||
└── js/ # JavaScript 库
|
||
├── jquery.1.11.1.js # jQuery
|
||
└── bootstrap.js # Bootstrap JS
|
||
```
|
||
|
||
## 页面结构
|
||
|
||
单页应用，通过锚点导航滚动到各区块：
|
||
|
||
| 区块 ID | 组件 | 说明 |
|
||
|---------|------|------|
|
||
| `#page-top` | - | 页面顶部 |
|
||
| `#features` | Features | 4个特性卡片 |
|
||
| `#about` | About | 关于介绍 + 列表 |
|
||
| `#services` | Services | 6个服务卡片 |
|
||
| `#portfolio` | Gallery | 9张作品图 (Lightbox) |
|
||
| `#testimonials` | Testimonials | 客户评价轮播 |
|
||
| `#team` | Team | 4个团队成员 |
|
||
| `#contact` | Contact | 联系表单 + 社交链接 |
|
||
|
||
## 数据结构 (data/data.json)
|
||
|
||
### 首屏 Hero (Header)
|
||
|
||
```json
|
||
{
|
||
"Header": {
|
||
"title": "标题文字",
|
||
"paragraph": "副标题描述"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 特性 (Features)
|
||
|
||
```json
|
||
{
|
||
"Features": [
|
||
{
|
||
"icon": "fa fa-comments-o",
|
||
"title": "特性标题",
|
||
"text": "特性描述"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 关于 (About)
|
||
|
||
```json
|
||
{
|
||
"About": {
|
||
"paragraph": "关于介绍文字",
|
||
"Why": ["列表项1", "列表项2"],
|
||
"Why2": ["列表项3", "列表项4"]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 服务 (Services)
|
||
|
||
```json
|
||
{
|
||
"Services": [
|
||
{
|
||
"icon": "fa fa-wordpress",
|
||
"name": "服务名称",
|
||
"text": "服务描述"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 作品画廊 (Gallery)
|
||
|
||
```json
|
||
{
|
||
"Gallery": [
|
||
{
|
||
"title": "作品标题",
|
||
"largeImage": "img/portfolio/01-large.jpg",
|
||
"smallImage": "img/portfolio/01-small.jpg"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 客户评价 (Testimonials)
|
||
|
||
```json
|
||
{
|
||
"Testimonials": [
|
||
{
|
||
"img": "img/testimonials/01.jpg",
|
||
"text": "评价内容",
|
||
"name": "客户姓名"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 团队 (Team)
|
||
|
||
```json
|
||
{
|
||
"Team": [
|
||
{
|
||
"img": "img/team/01.jpg",
|
||
"name": "成员姓名",
|
||
"job": "职位"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 联系信息 (Contact)
|
||
|
||
```json
|
||
{
|
||
"Contact": {
|
||
"address": "地址",
|
||
"phone": "电话",
|
||
"email": "邮箱",
|
||
"facebook": "Facebook链接",
|
||
"twitter": "Twitter链接",
|
||
"youtube": "YouTube链接"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 常见修改任务
|
||
|
||
### 修改网站标题和描述
|
||
|
||
编辑 `index.html` 中的 `<title>` 和 `<meta name="description">`
|
||
|
||
### 修改 Logo 和品牌名
|
||
|
||
编辑 `src/components/navigation.jsx` 中的：
|
||
|
||
```jsx
|
||
<a className="navbar-brand page-scroll" href="#page-top">
|
||
React Landing Page {/* 修改此处 */}
|
||
</a>
|
||
```
|
||
|
||
### 修改导航菜单
|
||
|
||
编辑 `src/components/navigation.jsx` 中的 `<ul className="nav navbar-nav navbar-right">` 列表
|
||
|
||
### 修改所有内容
|
||
|
||
编辑 `src/data/data.json`，按上述数据结构修改
|
||
|
||
### 配置联系表单
|
||
|
||
1. 注册 [EmailJS](https://www.emailjs.com/) 账号
|
||
2. 创建 Email Service 和 Template
|
||
3. 编辑 `src/components/contact.jsx`：
|
||
|
||
```jsx
|
||
emailjs.sendForm(
|
||
"YOUR_SERVICE_ID", // 替换为你的 Service ID
|
||
"YOUR_TEMPLATE_ID", // 替换为你的 Template ID
|
||
e.target,
|
||
"YOUR_PUBLIC_KEY" // 替换为你的 Public Key
|
||
)
|
||
```
|
||
|
||
### 添加/替换图片
|
||
|
||
- 作品图片: `public/img/portfolio/` (需要 large 和 small 两个尺寸)
|
||
- 团队照片: `public/img/team/`
|
||
- 客户头像: `public/img/testimonials/`
|
||
|
||
### 修改样式
|
||
|
||
- Bootstrap 覆盖样式: `public/css/style.css`
|
||
- 颜色、字体、间距等自定义样式在此文件
|
||
|
||
## 图标使用
|
||
|
||
使用 Font Awesome 4 图标类名，格式: `fa fa-图标名`
|
||
|
||
常用图标：
|
||
|
||
- `fa fa-check` - 对勾
|
||
- `fa fa-star` - 星星
|
||
- `fa fa-phone` - 电话
|
||
- `fa fa-envelope` - 邮件
|
||
- `fa fa-map-marker` - 地点
|
||
|
||
完整图标列表: <https://fontawesome.com/v4/icons/>
|
||
|
||
## 布局说明
|
||
|
||
- 使用 Bootstrap 3 栅格系统 (`col-md-*`)
|
||
- 导航栏固定顶部 (`navbar-fixed-top`)
|
||
- 响应式设计，适配移动端
|
||
- 点击导航链接平滑滚动到对应区块
|