HaoAWS官方网站

一个现代化的多语言企业云服务官网，基于 Next.js 14 构建，支持完全静态导出和多语言国际化。

✨ 项目特性

• 🌍 多语言支持 - 简体中文、繁体中文、英文
• 📱 响应式设计 - 完美适配桌面、平板、手机
• ⚡ 静态导出 - 支持完全静态化部署，加载速度极快
• 🔍 SEO 优化 - 完整的 Meta 标签、结构化数据、多语言 sitemap
• 📰 新闻系统 - 基于 Markdown 的内容管理系统
• 🎨 现代 UI - 使用 Tailwind CSS 和 ShadCN 组件
• 🚀 性能优化 - 代码分割、图片优化、预加载
• 📦 部署友好 - 支持 Netlify、Vercel、GitHub Pages 等平台

🛠️ 技术栈

• 前端框架: Next.js 14 (App Router)
• 样式: Tailwind CSS
• 组件: ShadCN/UI
• 国际化: 自定义 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                # 路由中间件

🚀 快速开始

安装依赖

npm install
# 或
yarn install

开发模式

npm run dev

打开 http://localhost:3000 查看网站。

构建生产版本

# 普通构建
npm run build

# 静态导出构建
npm run build:static

本地预览静态版本

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 函数

📰 新闻系统

新闻文件结构

---
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

# 构建命令
npm run build:static

# 发布目录
out

Vercel

npm install -g vercel
vercel --prod

GitHub Pages

npm run build:static
# 将 out/ 目录内容推送到 gh-pages 分支

服务器部署

npm run build
npm start

🎨 自定义和扩展

添加新页面

1. 在 app/[locale]/ 目录下创建新页面
2. 添加对应的翻译文件
3. 更新导航菜单
4. 添加 generateStaticParams 函数（如果需要静态导出）

修改样式

项目使用 Tailwind CSS，可以在以下文件中修改样式：

• app/globals.css - 全局样式
• tailwind.config.ts - Tailwind 配置
• 各组件文件中的 className

添加新组件

在 components/ 目录下创建新组件，遵循现有的命名和结构规范。

🔧 开发指南

代码规范

# 代码格式化
npm run format

# 代码检查
npm run lint

Windows 开发

如果在 Windows 上遇到权限问题，请参考 WINDOWS_BUILD_GUIDE.md。

📋 可用脚本

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
2. 语言切换不工作 - 检查 Cookie 设置和客户端 JavaScript
3. 静态导出失败 - 确保所有动态路由都有 generateStaticParams

获取帮助

• 查看 静态部署指南
• 查看 Windows 构建指南
• 检查 Next.js 官方文档

📄 许可证

本项目采用 MIT 许可证。

---

提示: 这是一个完全静态化的网站，构建后可以部署到任何静态文件托管服务，无需 Node.js 服务器环境。