264 lines
5.8 KiB
Markdown
264 lines
5.8 KiB
Markdown
|
# 东云科技官网 (DongYun Technology)
|
||
|
|
|
||
|
|
## 项目简介
|
||
|
|
|
||
|
|
这是一个使用 Next.js 14 App Router 构建的企业官网，支持多语言国际化，主要面向 AWS 云服务业务。
|
||
|
|
|
||
|
|
## 技术栈
|
||
|
|
|
||
|
|
- **前端框架**: Next.js 14 (App Router)
|
||
|
|
- **语言**: TypeScript
|
||
|
|
- **样式**: Tailwind CSS
|
||
|
|
- **UI组件**: Radix UI + 自定义组件
|
||
|
|
- **国际化**: react-i18next
|
||
|
|
- **状态管理**: React Hooks
|
||
|
|
- **部署**: Vercel / 自定义服务器
|
||
|
|
|
||
|
|
## 功能特性
|
||
|
|
|
||
|
|
- 🌍 多语言支持 (中文简体/繁体/英文)
|
||
|
|
- 📱 响应式设计
|
||
|
|
- ⚡ 服务端渲染 (SSR)
|
||
|
|
- 🎨 现代化UI设计
|
||
|
|
- 📄 Markdown内容支持
|
||
|
|
- 🔍 SEO优化
|
||
|
|
- 🚀 高性能优化
|
||
|
|
|
||
|
|
## 项目结构
|
||
|
|
|
||
|
|
```
|
||
|
|
dongyun/
|
||
|
|
├── app/ # Next.js App Router
|
||
|
|
│ ├── [locale]/ # 国际化路由
|
||
|
|
│ │ ├── layout.tsx # 本地化布局
|
||
|
|
│ │ ├── page.tsx # 首页
|
||
|
|
│ │ ├── about/ # 关于我们
|
||
|
|
│ │ ├── contact/ # 联系我们
|
||
|
|
│ │ ├── consultation/ # 咨询服务
|
||
|
|
│ │ ├── news/ # 新闻资讯
|
||
|
|
│ │ ├── products/ # 产品服务
|
||
|
|
│ │ └── support/ # 技术支持
|
||
|
|
│ ├── components/ # React组件
|
||
|
|
│ │ ├── ui/ # 基础UI组件
|
||
|
|
│ │ ├── Header.tsx # 头部组件
|
||
|
|
│ │ ├── Footer.tsx # 底部组件
|
||
|
|
│ │ ├── Logo.tsx # Logo组件
|
||
|
|
│ │ └── providers/ # Context提供者
|
||
|
|
│ ├── api/ # API路由
|
||
|
|
│ ├── globals.css # 全局样式
|
||
|
|
│ ├── favicon.ico # 网站图标
|
||
|
|
│ ├── robots.ts # SEO机器人配置
|
||
|
|
│ └── sitemap.ts # 站点地图
|
||
|
|
├── lib/ # 工具函数库
|
||
|
|
│ ├── utils.ts # 通用工具
|
||
|
|
│ ├── types.ts # TypeScript类型定义
|
||
|
|
│ ├── i18n.ts # 国际化配置
|
||
|
|
│ ├── cms.ts # 内容管理
|
||
|
|
│ ├── seo-config.ts # SEO配置
|
||
|
|
│ └── sitemap-*.ts # 站点地图工具
|
||
|
|
├── translations/ # 国际化文件
|
||
|
|
│ ├── zh-CN.ts # 中文简体
|
||
|
|
│ ├── zh-TW.ts # 中文繁体
|
||
|
|
│ ├── en.ts # 英文
|
||
|
|
│ └── */ # 其他翻译资源
|
||
|
|
├── docs/ # 文档资源
|
||
|
|
│ ├── zh-CN/ # 中文文档
|
||
|
|
│ ├── zh-TW/ # 繁体文档
|
||
|
|
│ └── en/ # 英文文档
|
||
|
|
├── public/ # 静态资源
|
||
|
|
├── middleware.ts # Next.js中间件
|
||
|
|
├── tailwind.config.ts # Tailwind配置
|
||
|
|
├── next.config.mjs # Next.js配置
|
||
|
|
├── tsconfig.json # TypeScript配置
|
||
|
|
└── package.json # 项目依赖
|
||
|
|
```
|
||
|
|
|
||
|
|
## 开发指南
|
||
|
|
|
||
|
|
### 环境要求
|
||
|
|
|
||
|
|
- Node.js 18+
|
||
|
|
- npm / yarn / pnpm / bun
|
||
|
|
|
||
|
|
### 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
# 或
|
||
|
|
yarn install
|
||
|
|
# 或
|
||
|
|
pnpm install
|
||
|
|
# 或
|
||
|
|
bun install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 开发启动
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
# 或
|
||
|
|
yarn dev
|
||
|
|
# 或
|
||
|
|
pnpm dev
|
||
|
|
# 或
|
||
|
|
bun dev
|
||
|
|
```
|
||
|
|
|
||
|
|
访问 [http://localhost:3000](http://localhost:3000) 查看开发环境。
|
||
|
|
|
||
|
|
### 构建生产版本
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
npm run start
|
||
|
|
```
|
||
|
|
|
||
|
|
### 代码规范
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 代码格式化
|
||
|
|
npm run format
|
||
|
|
|
||
|
|
# 代码检查
|
||
|
|
npm run lint
|
||
|
|
```
|
||
|
|
|
||
|
|
## 国际化开发
|
||
|
|
|
||
|
|
### 支持的语言
|
||
|
|
|
||
|
|
- `zh-CN`: 中文简体 (默认)
|
||
|
|
- `zh-TW`: 中文繁体
|
||
|
|
- `en`: 英文
|
||
|
|
|
||
|
|
### 路由结构
|
||
|
|
|
||
|
|
```
|
||
|
|
/zh/ # 中文简体 (默认)
|
||
|
|
/zh-TW/ # 中文繁体
|
||
|
|
/en/ # 英文
|
||
|
|
```
|
||
|
|
|
||
|
|
### 添加新翻译
|
||
|
|
|
||
|
|
1. 在 `translations/` 目录下编辑对应语言文件
|
||
|
|
2. 使用 `t('key')` 函数调用翻译
|
||
|
|
3. 在组件中使用 `useTranslation` Hook
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
|
||
|
|
function MyComponent() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return <h1>{t('common.title')}</h1>;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 组件开发
|
||
|
|
|
||
|
|
### UI组件
|
||
|
|
|
||
|
|
基础UI组件位于 `app/components/ui/`，基于 Radix UI 构建。
|
||
|
|
|
||
|
|
### 业务组件
|
||
|
|
|
||
|
|
业务组件位于 `app/components/`，包括：
|
||
|
|
|
||
|
|
- `Header.tsx`: 网站头部导航
|
||
|
|
- `Footer.tsx`: 网站底部信息
|
||
|
|
- `Logo.tsx`: 品牌Logo
|
||
|
|
- 各页面专用组件
|
||
|
|
|
||
|
|
### 添加新组件
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
// app/components/MyComponent.tsx
|
||
|
|
interface MyComponentProps {
|
||
|
|
title: string;
|
||
|
|
locale: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function MyComponent({ title, locale }: MyComponentProps) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h2>{title}</h2>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 内容管理
|
||
|
|
|
||
|
|
### 文档内容
|
||
|
|
|
||
|
|
- 文档存放在 `docs/` 目录
|
||
|
|
- 支持 Markdown 格式
|
||
|
|
- 按语言分类存储
|
||
|
|
|
||
|
|
### 静态资源
|
||
|
|
|
||
|
|
- 图片、字体等资源放在 `public/` 目录
|
||
|
|
- 使用相对路径引用: `/images/logo.png`
|
||
|
|
|
||
|
|
## 部署
|
||
|
|
|
||
|
|
### Vercel部署
|
||
|
|
|
||
|
|
1. 连接 GitHub 仓库
|
||
|
|
2. 设置环境变量
|
||
|
|
3. 自动部署
|
||
|
|
|
||
|
|
### 自定义服务器
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 构建
|
||
|
|
npm run build
|
||
|
|
|
||
|
|
# 启动
|
||
|
|
npm run start
|
||
|
|
```
|
||
|
|
|
||
|
|
### Docker部署
|
||
|
|
|
||
|
|
```dockerfile
|
||
|
|
FROM node:18-alpine
|
||
|
|
WORKDIR /app
|
||
|
|
COPY package*.json ./
|
||
|
|
RUN npm ci --only=production
|
||
|
|
COPY . .
|
||
|
|
RUN npm run build
|
||
|
|
EXPOSE 3000
|
||
|
|
CMD ["npm", "start"]
|
||
|
|
```
|
||
|
|
|
||
|
|
## 性能优化
|
||
|
|
|
||
|
|
- 使用 Next.js 图片优化
|
||
|
|
- 启用 Gzip 压缩
|
||
|
|
- 代码分割和懒加载
|
||
|
|
- 静态资源缓存
|
||
|
|
- 服务端渲染优化
|
||
|
|
|
||
|
|
## 贡献指南
|
||
|
|
|
||
|
|
1. Fork 项目
|
||
|
|
2. 创建功能分支: `git checkout -b feature/new-feature`
|
||
|
|
3. 提交更改: `git commit -am 'Add new feature'`
|
||
|
|
4. 推送分支: `git push origin feature/new-feature`
|
||
|
|
5. 提交 Pull Request
|
||
|
|
|
||
|
|
## 许可证
|
||
|
|
|
||
|
|
本项目采用 MIT 许可证。
|
||
|
|
|
||
|
|
## 联系我们
|
||
|
|
|
||
|
|
- 官网: [东云科技](https://www.dongyun.tech)
|
||
|
|
- 邮箱: contact@dongyun.tech
|
||
|
|
- 技术支持: support@dongyun.tech
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
*Built with ❤️ by DongYun Technology Team*
|