110 lines
4.0 KiB
Markdown
110 lines
4.0 KiB
Markdown
|
# 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` 查看效果。
|