274 lines
7.0 KiB
Markdown
274 lines
7.0 KiB
Markdown
# HaoAWS官方网站
|
||
|
||
<p align="center">
|
||
<img src="public/images/logo-text.png" alt="HaoAWS" width="200" />
|
||
</p>
|
||
|
||
一个现代化的多语言企业云服务官网，基于 Next.js 14 构建，支持完全静态导出和多语言国际化。
|
||
|
||
## ✨ 项目特性
|
||
|
||
- 🌍 **多语言支持** - 简体中文、繁体中文、英文
|
||
- 📱 **响应式设计** - 完美适配桌面、平板、手机
|
||
- ⚡ **静态导出** - 支持完全静态化部署，加载速度极快
|
||
- 🔍 **SEO 优化** - 完整的 Meta 标签、结构化数据、多语言 sitemap
|
||
- 📰 **新闻系统** - 基于 Markdown 的内容管理系统
|
||
- 🎨 **现代 UI** - 使用 Tailwind CSS 和 ShadCN 组件
|
||
- 🚀 **性能优化** - 代码分割、图片优化、预加载
|
||
- 📦 **部署友好** - 支持 Netlify、Vercel、GitHub Pages 等平台
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
- **前端框架**: [Next.js 14](https://nextjs.org/) (App Router)
|
||
- **样式**: [Tailwind CSS](https://tailwindcss.com/)
|
||
- **组件**: [ShadCN/UI](https://ui.shadcn.com/)
|
||
- **国际化**: 自定义 i18n 解决方案
|
||
- **内容管理**: Markdown + Gray Matter
|
||
- **类型安全**: TypeScript
|
||
- **代码规范**: ESLint + Prettier
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
kejiyun/
|
||
├── app/ # Next.js App Router
|
||
│ ├── [locale]/ # 多语言路由
|
||
│ │ ├── about/ # 关于我们页面
|
||
│ │ ├── news/ # 新闻列表和详情
|
||
│ │ ├── products/ # 产品页面
|
||
│ │ ├── support/ # 支持页面
|
||
│ │ └── layout.tsx # 多语言布局
|
||
│ ├── news/[id]/ # 默认语言新闻详情
|
||
│ ├── globals.css # 全局样式
|
||
│ └── layout.tsx # 根布局
|
||
├── components/ # 可复用组件
|
||
│ ├── about/ # 关于页面组件
|
||
│ ├── LanguageSwitcher.tsx # 语言切换器
|
||
│ ├── Layout.tsx # 布局组件
|
||
│ └── SEOPreview.tsx # SEO 预览
|
||
├── data/ # 数据文件
|
||
│ └── locales/ # 多语言翻译文件
|
||
│ ├── en/ # 英文翻译
|
||
│ ├── zh-CN/ # 简体中文翻译
|
||
│ └── zh-TW/ # 繁体中文翻译
|
||
├── docs/ # 文档和新闻内容
|
||
│ └── news/ # 新闻 Markdown 文件
|
||
├── lib/ # 工具函数
|
||
│ ├── i18n.ts # 国际化配置
|
||
│ ├── markdown.ts # Markdown 解析
|
||
│ └── seo.ts # SEO 工具
|
||
├── public/ # 静态资源
|
||
└── middleware.ts # 路由中间件
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
# 或
|
||
yarn install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
打开 [http://localhost:3000](http://localhost:3000) 查看网站。
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
# 普通构建
|
||
npm run build
|
||
|
||
# 静态导出构建
|
||
npm run build:static
|
||
```
|
||
|
||
### 本地预览静态版本
|
||
|
||
```bash
|
||
npm run serve
|
||
# 或
|
||
npm run preview
|
||
```
|
||
|
||
## 🌍 多语言支持
|
||
|
||
### 支持的语言
|
||
|
||
- **简体中文** (`zh-CN`) - 默认语言，路径: `/`
|
||
- **繁体中文** (`zh-TW`) - 路径: `/zh-TW/`
|
||
- **英文** (`en`) - 路径: `/en/`
|
||
|
||
### 路由示例
|
||
|
||
```
|
||
/ # 简体中文首页
|
||
/about/ # 简体中文关于页面
|
||
/news/article-id/ # 简体中文新闻详情
|
||
|
||
/zh-TW/ # 繁体中文首页
|
||
/zh-TW/about/ # 繁体中文关于页面
|
||
/zh-TW/news/article-id/ # 繁体中文新闻详情
|
||
|
||
/en/ # 英文首页
|
||
/en/about/ # 英文关于页面
|
||
/en/news/article-id/ # 英文新闻详情
|
||
```
|
||
|
||
### 添加新语言
|
||
|
||
1. 在 `lib/i18n.ts` 中添加语言配置
|
||
2. 在 `data/locales/` 中创建对应的翻译文件
|
||
3. 在 `docs/news/` 中添加对应语言的新闻文件
|
||
4. 更新各页面的 `generateStaticParams` 函数
|
||
|
||
## 📰 新闻系统
|
||
|
||
### 新闻文件结构
|
||
|
||
```markdown
|
||
---
|
||
title: "文章标题"
|
||
description: "文章描述"
|
||
date: "2024-01-01"
|
||
author: "作者"
|
||
tags: ["标签1", "标签2"]
|
||
---
|
||
|
||
# 文章内容
|
||
|
||
这里是 Markdown 格式的文章内容...
|
||
```
|
||
|
||
### 添加新新闻
|
||
|
||
1. 在 `docs/news/[语言]/` 目录下创建新的 `.md` 文件
|
||
2. 更新 `app/[locale]/news/[id]/page.tsx` 中的 `generateStaticParams` 函数
|
||
3. 重新构建网站
|
||
|
||
## 🔍 SEO 优化
|
||
|
||
### 已实现的 SEO 功能
|
||
|
||
- ✅ 多语言 Meta 标签
|
||
- ✅ Open Graph 标签
|
||
- ✅ Twitter Card 支持
|
||
- ✅ 结构化数据 (JSON-LD)
|
||
- ✅ 自动生成 sitemap.xml
|
||
- ✅ robots.txt 配置
|
||
- ✅ 语言链接标签 (hreflang)
|
||
|
||
### SEO 配置
|
||
|
||
在 `lib/seo.ts` 中配置默认的 SEO 设置，每个页面可以覆盖这些设置。
|
||
|
||
## 📦 部署
|
||
|
||
### 静态部署（推荐）
|
||
|
||
#### Netlify
|
||
```bash
|
||
# 构建命令
|
||
npm run build:static
|
||
|
||
# 发布目录
|
||
out
|
||
```
|
||
|
||
#### Vercel
|
||
```bash
|
||
npm install -g vercel
|
||
vercel --prod
|
||
```
|
||
|
||
#### GitHub Pages
|
||
```bash
|
||
npm run build:static
|
||
# 将 out/ 目录内容推送到 gh-pages 分支
|
||
```
|
||
|
||
### 服务器部署
|
||
|
||
```bash
|
||
npm run build
|
||
npm start
|
||
```
|
||
|
||
## 🎨 自定义和扩展
|
||
|
||
### 添加新页面
|
||
|
||
1. 在 `app/[locale]/` 目录下创建新页面
|
||
2. 添加对应的翻译文件
|
||
3. 更新导航菜单
|
||
4. 添加 `generateStaticParams` 函数（如果需要静态导出）
|
||
|
||
### 修改样式
|
||
|
||
项目使用 Tailwind CSS，可以在以下文件中修改样式：
|
||
- `app/globals.css` - 全局样式
|
||
- `tailwind.config.ts` - Tailwind 配置
|
||
- 各组件文件中的 className
|
||
|
||
### 添加新组件
|
||
|
||
在 `components/` 目录下创建新组件，遵循现有的命名和结构规范。
|
||
|
||
## 🔧 开发指南
|
||
|
||
### 代码规范
|
||
|
||
```bash
|
||
# 代码格式化
|
||
npm run format
|
||
|
||
# 代码检查
|
||
npm run lint
|
||
```
|
||
|
||
### Windows 开发
|
||
|
||
如果在 Windows 上遇到权限问题，请参考 [WINDOWS_BUILD_GUIDE.md](./WINDOWS_BUILD_GUIDE.md)。
|
||
|
||
## 📋 可用脚本
|
||
|
||
```bash
|
||
npm run dev # 开发模式
|
||
npm run build # 生产构建
|
||
npm run build:static # 静态导出构建
|
||
npm run build:simple # 简化构建（解决权限问题）
|
||
npm run start # 启动生产服务器
|
||
npm run lint # 代码检查
|
||
npm run format # 代码格式化
|
||
npm run serve # 本地预览静态文件
|
||
npm run preview # 构建并预览
|
||
```
|
||
|
||
## 🐛 故障排除
|
||
|
||
### 常见问题
|
||
|
||
1. **构建权限错误** - 参考 [WINDOWS_BUILD_GUIDE.md](./WINDOWS_BUILD_GUIDE.md)
|
||
2. **语言切换不工作** - 检查 Cookie 设置和客户端 JavaScript
|
||
3. **静态导出失败** - 确保所有动态路由都有 `generateStaticParams`
|
||
|
||
### 获取帮助
|
||
|
||
- 查看 [静态部署指南](./STATIC_DEPLOYMENT.md)
|
||
- 查看 [Windows 构建指南](./WINDOWS_BUILD_GUIDE.md)
|
||
- 检查 Next.js 官方文档
|
||
|
||
## 📄 许可证
|
||
|
||
本项目采用 MIT 许可证。
|
||
|
||
---
|
||
|
||
**提示**: 这是一个完全静态化的网站，构建后可以部署到任何静态文件托管服务，无需 Node.js 服务器环境。
|