# CloudPro 云服务器代理商网站（Next.js 14 + TailwindCSS）

本项目是基于 Next.js App Router 搭建的多语言营销网站模板，集成 TailwindCSS、React Markdown 渲染、Prism 代码高亮与基础 SEO。支持静态导出，适合部署到任意静态主机（如 OSS、GitHub Pages、Vercel 静态托管等）。

## 技术栈
- Next.js 14（App Router）
- React 18、TypeScript
- TailwindCSS + tailwindcss-animate
- lucide-react 图标
- react-markdown + remark-gfm（Markdown 渲染/表格/任务列表）
- react-syntax-highlighter（Prism 主题：`tomorrow`）

## 主要特性
- 多语言 UI：简体中文（zh）、繁体中文（zh-tw）、英文（en），根据浏览器语言自动切换
- 资讯中心：分类筛选、阅读时间展示；详情页支持 Markdown 内容与代码高亮
- 产品/解决方案/支持/联系等页面的营销内容结构
- 基础 SEO：客户端 Head 组件动态设置标题、描述、关键词与 OpenGraph/Twitter 标签
- robots 与 sitemap：基于 `app/robots.ts` 与 `app/sitemap.ts` 生成（支持静态导出）
- 静态导出（`next export`）：`next.config.mjs` 已设置 `output: 'export'` 与 `trailingSlash: true`

## 目录结构（摘）
- `app/`：App Router 页面
  - `page.tsx`：首页
  - `news/`：资讯列表与详情页（`[slug]/page.tsx`）
  - `products/`：产品页与子页面（ECS/OSS/RDS/SLB）
  - `solutions/`、`support/`、`contact/`
  - `robots.ts`、`sitemap.ts`：生成 robots 与 sitemap
- `components/`：导航、页脚、横幅、Head 等 UI 组件
- `content/`：Markdown 内容目录（例如 `content/cloud-security-best-practices/zh.md`）
- `public/`：静态资源

## 环境变量
- `NEXT_PUBLIC_BASE_URL`：站点基础 URL，用于 `app/robots.ts` 与 `app/sitemap.ts`

示例（PowerShell）：
```powershell
Copy-Item .env.example .env -ErrorAction SilentlyContinue
# 在 .env 中设置：
# NEXT_PUBLIC_BASE_URL=https://your-domain.com
```

## 本地开发
```powershell
# 安装依赖
npm install

# 启动开发服务器（默认 http://localhost:3000）
npm run dev
```

## 代码质量
```powershell
# 代码格式化
npm run format

# 代码检查
npm run lint
```

## 构建与导出
项目已配置为静态导出模式：
```powershell
# 生产构建（生成 .next）
npm run build

# 静态导出（生成 .\out 目录）
npm run export
```
将 `out/` 目录上传到任意静态托管即可上线。若本地预览导出结果：
```powershell
npx serve .\out
```

> 说明：由于使用 `output: 'export'`，推荐通过 `npm run export` 获取静态产物目录进行部署；`npm run start` 适用于 SSR 场景，通常无需在本模板中使用。

## 内容与路由
- 新增资讯详情页内容：在 `content/<slug>/` 下放置 `zh.md` / `zh-tw.md` / `en.md`
- `app/sitemap.ts` 会扫描 `content/` 目录下的文件夹生成 `/news/<slug>` 动态路由至站点地图
- 若要在资讯列表页展示新文章，请在 `app/news/page.tsx` 的 `newsData` 中补充对应项

## UI 组件
- `components/Head/Head.tsx`：在客户端动态设置 meta（标题/描述/关键词/OG/Twitter）
- `components/Navigation/*`：导航栏、移动端菜单、下拉菜单
- `components/Banner/HeroBanner.tsx`：首页横幅/轮播与 CTA
- `components/Footer/Footer.tsx`：页脚与回到顶部按钮

## Tailwind 配置
- `tailwind.config.ts` 已启用 `darkMode: ['class']` 与 `tailwindcss-animate`
- 内容扫描路径包含 `app/`、`components/`、`pages/`

## 注意事项
- 若同时存在 `public/robots.txt` 与 `app/robots.ts`，以 `app/robots.ts` 生成的为准（静态导出会产出 robots.txt 与 sitemap.xml）。
- 本项目为前端模板，联系表单当前为前端演示（console + alert），需要接入后端或第三方服务时请自行扩展。

## 可用脚本
```json
{
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "format": "prettier --write .",
  "export": "next build && next export"
}
```

---

在 Onlook 或浏览器中打开 `http://localhost:3000` 查看效果。