重写 README.md
This commit is contained in:
parent
c906a2c013
commit
04b27ac0a2
256
README.md
256
README.md
@ -1,153 +1,199 @@
|
|||||||
# Simba-Index
|
# Simba Robotics 官方网站
|
||||||
|
|
||||||
本项目是一个基于 TypeScript 和 Next.js 的战队主页模板，用于生成战队主页所需的静态文件，生成后部署在具有 Nginx/OpenResty 环境的网页服务器中分发，以介绍、宣传战队。
|
黑龙江大学 Simba Robotics 战队的官方网站项目，用于展示团队信息、成员、机器人作品和比赛成就。
|
||||||
[点击这里](https://www.simba-robotics.com)查看最新部署呈现的效果。
|
|
||||||
|
|
||||||
---
|
## 目录
|
||||||
|
|
||||||
## 项目结构
|
- [项目概述](#项目概述)
|
||||||
|
- [开发环境需求](#开发环境需求)
|
||||||
|
- [项目目录结构](#项目目录结构)
|
||||||
|
- [安装和设置](#安装和设置)
|
||||||
|
- [编译和调试](#编译和调试)
|
||||||
|
- [部署](#部署)
|
||||||
|
- [贡献指南](#贡献指南)
|
||||||
|
|
||||||
项目的主要目录和文件结构如下：
|
## 项目概述
|
||||||
|
|
||||||
|
Simba Robotics 官方网站是一个使用 Next.js 构建的现代化 Web 应用，采用 React 框架和 Tailwind CSS 进行样式设计。网站包含以下主要功能：
|
||||||
|
|
||||||
|
- 响应式设计，适配各种设备屏幕
|
||||||
|
- 团队介绍和成员展示
|
||||||
|
- 机器人作品展示
|
||||||
|
- 比赛成就和历史记录
|
||||||
|
- 联系方式和招募信息
|
||||||
|
|
||||||
|
## 开发环境需求
|
||||||
|
|
||||||
|
要开发和运行此项目，您需要以下环境：
|
||||||
|
|
||||||
|
- **Node.js** (v18.0.0 或更高版本)
|
||||||
|
- **npm** (v8.0.0 或更高版本) 或 **yarn** (v1.22.0 或更高版本)
|
||||||
|
- 现代浏览器 (Chrome, Firefox, Safari, Edge)
|
||||||
|
- 代码编辑器 (推荐 Visual Studio Code)
|
||||||
|
- Git
|
||||||
|
|
||||||
|
## 项目目录结构
|
||||||
|
|
||||||
```plaintext
|
```plaintext
|
||||||
SimbaIndex/
|
simba-robotics/
|
||||||
├── .next/ # Next.js 构建输出目录
|
├── app/ # Next.js 应用路由
|
||||||
├── pages/ # 页面组件目录
|
│ ├── history/ # 英灵殿页面
|
||||||
│ ├── index.tsx # 首页
|
│ ├── privacy/ # 隐私政策页面
|
||||||
│ ├── history/ # 历史记录页面
|
│ ├── robots/ # 机器人详情页面
|
||||||
│ │ ├── page.tsx # 历史记录页面主文件
|
│ ├── teams/ # 团队小组页面
|
||||||
│ │ ├── layout.tsx # 历史记录页面布局文件
|
│ ├── terms/ # 服务条款页面
|
||||||
├── components/ # 可复用的 React 组件
|
│ ├── globals.css # 全局样式
|
||||||
├── styles/ # 样式文件
|
│ ├── layout.tsx # 根布局组件
|
||||||
├── public/ # 静态资源文件
|
│ └── page.tsx # 首页组件
|
||||||
├── package.json # 项目依赖和脚本
|
├── components/ # 可复用组件
|
||||||
├── tsconfig.json # TypeScript 配置文件
|
│ ├── ui/ # UI 组件库
|
||||||
└── README.md # 项目说明文件
|
│ ├── about-section.tsx # 关于部分组件
|
||||||
|
│ ├── achievements-section.tsx # 成就部分组件
|
||||||
|
│ ├── contact-section.tsx # 联系部分组件
|
||||||
|
│ ├── footer.tsx # 页脚组件
|
||||||
|
│ ├── header.tsx # 页头组件
|
||||||
|
│ ├── hero-section.tsx # 英雄部分组件
|
||||||
|
│ ├── robots-showcase.tsx # 机器人展示组件
|
||||||
|
│ ├── team-groups-section.tsx # 团队小组部分组件
|
||||||
|
│ └── theme-provider.tsx # 主题提供者组件
|
||||||
|
├── lib/ # 工具和数据
|
||||||
|
│ ├── achievement-data.ts # 成就数据
|
||||||
|
│ ├── robot-data.ts # 机器人数据
|
||||||
|
│ └── utils.ts # 工具函数
|
||||||
|
├── public/ # 静态资源
|
||||||
|
│ ├── icons/ # 图标文件
|
||||||
|
│ ├── grid-pattern.png # 网格背景
|
||||||
|
│ └── logo.svg # 团队 Logo
|
||||||
|
├── .gitignore # Git 忽略文件
|
||||||
|
├── next.config.js # Next.js 配置
|
||||||
|
├── package.json # 项目依赖
|
||||||
|
├── README.md # 项目说明
|
||||||
|
├── tailwind.config.ts # Tailwind CSS 配置
|
||||||
|
└── tsconfig.json # TypeScript 配置
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
## 安装和设置
|
||||||
|
|
||||||
## 开发环境要求
|
按照以下步骤设置开发环境：
|
||||||
|
|
||||||
在开始开发之前，请确保您的系统满足以下要求：
|
### 1. **克隆仓库**
|
||||||
|
|
||||||
- **Node.js**: 版本 >= 16.x
|
```shellscript
|
||||||
- **npm** 或 **yarn**: 用于管理依赖
|
git clone https://github.com/your-username/simba-robotics.git
|
||||||
- **TypeScript**: 项目使用 TypeScript 编写
|
cd simba-robotics
|
||||||
- **Next.js**: 用于服务端渲染和静态站点生成
|
```
|
||||||
|
|
||||||
---
|
### 2. **安装依赖**
|
||||||
|
|
||||||
## 安装依赖
|
使用 npm：
|
||||||
|
|
||||||
在项目根目录下运行以下命令以安装所需依赖：
|
```shellscript
|
||||||
|
|
||||||
```bash
|
|
||||||
# 使用 npm
|
|
||||||
npm install
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
# 或使用 yarn
|
或使用 yarn：
|
||||||
|
|
||||||
|
```shellscript
|
||||||
yarn install
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
### 3. **环境变量设置**
|
||||||
|
|
||||||
## 启动开发服务器
|
如果需要，创建 `.env.local` 文件并添加必要的环境变量：
|
||||||
|
|
||||||
运行以下命令以启动本地开发服务器：
|
```plaintext
|
||||||
|
NEXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
```bash
|
## 编译和调试
|
||||||
# 使用 npm
|
|
||||||
|
### 开发模式
|
||||||
|
|
||||||
|
启动开发服务器：
|
||||||
|
|
||||||
|
```shellscript
|
||||||
npm run dev
|
npm run dev
|
||||||
|
# 或
|
||||||
# 或使用 yarn
|
|
||||||
yarn dev
|
yarn dev
|
||||||
```
|
```
|
||||||
|
|
||||||
开发服务器默认运行在 `http://localhost:3000`。
|
访问 [http://localhost:3000](http://localhost:3000) 查看网站。
|
||||||
|
|
||||||
---
|
### 构建项目
|
||||||
|
|
||||||
## 编译和构建
|
构建生产版本：
|
||||||
|
|
||||||
要生成生产环境的构建版本，请运行以下命令：
|
```shellscript
|
||||||
|
|
||||||
```bash
|
|
||||||
# 使用 npm
|
|
||||||
npm run build
|
npm run build
|
||||||
|
# 或
|
||||||
# 或使用 yarn
|
|
||||||
yarn build
|
yarn build
|
||||||
```
|
```
|
||||||
|
|
||||||
构建完成后，输出文件将存储在 `.next/` 目录中。
|
### 运行生产版本
|
||||||
|
|
||||||
---
|
```shellscript
|
||||||
|
npm run start
|
||||||
## 调试方法
|
# 或
|
||||||
|
yarn start
|
||||||
1. **本地调试**：
|
|
||||||
- 启动开发服务器后，使用浏览器访问 `http://localhost:3000`。
|
|
||||||
- 使用浏览器开发者工具调试页面。
|
|
||||||
|
|
||||||
2. **VS Code 调试**：
|
|
||||||
- 在项目根目录中创建或编辑 `.vscode/launch.json` 文件，添加以下配置：
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"type": "node",
|
|
||||||
"request": "launch",
|
|
||||||
"name": "Next.js Debug",
|
|
||||||
"program": "${workspaceFolder}/node_modules/next/dist/bin/next",
|
|
||||||
"args": ["dev"],
|
|
||||||
"cwd": "${workspaceFolder}",
|
|
||||||
"protocol": "inspector",
|
|
||||||
"port": 9229
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- 按下 `F5` 启动调试。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
|
|
||||||
### 1. 找不到模块或类型声明
|
|
||||||
|
|
||||||
如果遇到类似 `找不到模块` 的错误，请运行以下命令安装缺失的依赖：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
npm install --save-dev @types/<模块名>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. 构建失败
|
### 代码检查
|
||||||
|
|
||||||
确保所有依赖已正确安装，并运行以下命令清理缓存后重新构建：
|
运行 ESLint 检查代码：
|
||||||
|
|
||||||
```bash
|
```shellscript
|
||||||
npm run clean
|
npm run lint
|
||||||
npm run build
|
# 或
|
||||||
|
yarn lint
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
## 部署
|
||||||
|
|
||||||
|
该项目可以部署到任何支持 Next.js 的平台。
|
||||||
|
|
||||||
|
### 自托管部署
|
||||||
|
|
||||||
|
1. 构建项目：`npm run build`
|
||||||
|
2. 将 `.next`、`public` 目录和 `package.json` 复制到服务器
|
||||||
|
3. 在服务器上安装依赖：`npm install --production`
|
||||||
|
4. 启动服务：`npm run start`
|
||||||
|
|
||||||
## 贡献指南
|
## 贡献指南
|
||||||
|
|
||||||
欢迎对本项目提出改进建议或提交代码贡献。请确保在提交代码前运行以下命令以检查代码质量：
|
我们欢迎任何形式的贡献！如果您想为项目做出贡献，请遵循以下步骤：
|
||||||
|
|
||||||
```bash
|
1. Fork 仓库
|
||||||
npm run lint
|
2. 创建您的特性分支：`git checkout -b feature/amazing-feature`
|
||||||
npm run test
|
3. 提交您的更改：`git commit -m 'Add some amazing feature'`
|
||||||
```
|
4. 推送到分支：`git push origin feature/amazing-feature`
|
||||||
|
5. 提交 Pull Request
|
||||||
|
|
||||||
---
|
### 代码风格
|
||||||
|
|
||||||
|
- 使用 TypeScript 进行类型检查
|
||||||
|
- 遵循 ESLint 规则
|
||||||
|
- 使用函数组件和 React Hooks
|
||||||
|
- 使用 Tailwind CSS 进行样式设计
|
||||||
|
- 保持组件的可复用性和模块化
|
||||||
|
|
||||||
|
### 命名约定
|
||||||
|
|
||||||
|
- 组件文件：使用 kebab-case（如 `hero-section.tsx`）
|
||||||
|
- React 组件：使用 PascalCase（如 `HeroSection`）
|
||||||
|
- 函数和变量：使用 camelCase（如 `handleClick`）
|
||||||
|
- 常量：使用大写 SNAKE_CASE（如 `MAX_ITEMS`）
|
||||||
|
|
||||||
## 许可证
|
## 许可证
|
||||||
|
|
||||||
本项目基于 [GPL v3.0](LICENSE) 开源。
|
本项目采用 MIT 许可证 - 详情请参阅 [LICENSE](LICENSE) 文件。
|
||||||
|
|
||||||
|
## 联系方式
|
||||||
|
|
||||||
|
如有任何问题或建议，请联系：
|
||||||
|
|
||||||
|
- 电子邮件：[contact@simbarobotics.com](mailto:contact@simbarobotics.com)
|
||||||
|
- 地址：Room 602, Physics Building, Heilongjiang University
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
© 2023 Simba Robotics. 保留一切权利。
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user