# HaoAWS官方网站

HaoAWS

一个现代化的多语言企业云服务官网，基于 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 服务器环境。