69 lines
3.8 KiB
Markdown
69 lines
3.8 KiB
Markdown
|
# 网站功能介绍（CloudPro）
|
|||
|
|
|
|||
|
|
本文档概述站点各功能模块、页面结构与内容更新方式，便于产品、运营与开发同事快速上手。
|
|||
|
|
|
|||
|
|
## 1. 多语言支持
|
|||
|
|
- 语言：简体中文（zh）、繁体中文（zh-tw）、英文（en）
|
|||
|
|
- 切换策略：页面加载时根据浏览器语言自动设置；导航栏可手动切换
|
|||
|
|
- 文案来源：各页面本地 `translations` 对象内置多语言文案
|
|||
|
|
|
|||
|
|
## 2. 导航与页面
|
|||
|
|
- 顶部导航：`首页 / 产品 / 解决方案 / 支持 / 资讯 / 联系我们`
|
|||
|
|
- 支持移动端菜单与下拉子菜单，键盘可访问性已处理
|
|||
|
|
- 页脚：版权信息、回到顶部按钮
|
|||
|
|
|
|||
|
|
## 3. 首页（`/`）
|
|||
|
|
- 横幅（HeroBanner）：多类型幻灯（品牌/产品/促销），支持渐变背景与 CTA 按钮
|
|||
|
|
- 为什么选择我们：四大卖点卡片
|
|||
|
|
- 产品服务：ECS/RDS/SLB 等产品卡片与“了解更多”CTA
|
|||
|
|
|
|||
|
|
## 4. 产品页（`/products`）及子页
|
|||
|
|
- 产品总览与子产品详情页：`/products/ecs`、`/products/oss`、`/products/rds`、`/products/slb`
|
|||
|
|
- 面向营销的功能与价格展示，可按需扩展 CTA 跳转与表单
|
|||
|
|
|
|||
|
|
## 5. 解决方案（`/solutions`）与支持（`/support`）
|
|||
|
|
- 解决方案：场景化描述与优势展示
|
|||
|
|
- 支持：服务流程、常见问题、服务承诺等内容（可根据各自页面完善）
|
|||
|
|
|
|||
|
|
## 6. 联系我们（`/contact`）
|
|||
|
|
- 表单字段：姓名、邮箱、公司、电话、主题、描述
|
|||
|
|
- 提交行为：前端演示（console + alert），需要对接后端或第三方时请开发接入
|
|||
|
|
- 联系方式卡片：热线、邮箱、地址、工作时间
|
|||
|
|
|
|||
|
|
## 7. 资讯中心（`/news`）
|
|||
|
|
- 分类筛选：全部 / 技术文章 / 产品更新 / 行业动态 / 教程指南
|
|||
|
|
- 列表卡片：分类徽标、标题、摘要、作者、发布日期、阅读时长
|
|||
|
|
- 详情页（`/news/[slug]`）：
|
|||
|
|
- Markdown 内容渲染（`react-markdown` + `remark-gfm`）
|
|||
|
|
- 代码块语法高亮（`react-syntax-highlighter`，Prism `tomorrow` 主题）
|
|||
|
|
- 元信息：作者 / 发布时间 / 阅读时长 / 分类徽标
|
|||
|
|
|
|||
|
|
### 7.1 内容更新流程
|
|||
|
|
- 在 `content/<slug>/` 目录创建以下文件（按需）：
|
|||
|
|
- `zh.md`、`zh-tw.md`、`en.md`
|
|||
|
|
- 详情页会按当前语言请求 `/content/<slug>/<lang>.md`，找不到则使用内置默认内容回退
|
|||
|
|
- 列表页要显示新文章：在 `app/news/page.tsx` 的 `newsData` 数组中新增一项（含分类、标题多语言、摘要多语言、作者、日期、阅读时长）
|
|||
|
|
|
|||
|
|
## 8. SEO 与站点地图
|
|||
|
|
- 客户端 SEO：`components/Head/Head.tsx` 动态设置 `title / meta description / meta keywords / OG / Twitter` 标签
|
|||
|
|
- robots 与 sitemap：
|
|||
|
|
- `app/robots.ts` 依据 `NEXT_PUBLIC_BASE_URL` 生成 robots.txt
|
|||
|
|
- `app/sitemap.ts` 生成站点地图，包含静态路由与基于 `content/` 目录推断的动态资讯路由
|
|||
|
|
|
|||
|
|
## 9. 静态导出与部署
|
|||
|
|
- 已启用静态导出：`next.config.mjs` 配置 `output: 'export'` 与 `trailingSlash: true`
|
|||
|
|
- 构建与导出：`npm run build && npm run export`，在 `out/` 目录得到静态站点
|
|||
|
|
- 部署：将 `out/` 上传至任意静态托管（如 OSS、GitHub Pages、Nginx 静态站点等）
|
|||
|
|
|
|||
|
|
## 10. 可扩展点
|
|||
|
|
- 表单后端：接入企业邮箱、Serverless 函数或第三方表单服务（如 Formspree、Zapier、Freshdesk 等）
|
|||
|
|
- 内容来源：接入 CMS（如 Contentful、Sanity、Strapi）替代本地 `content/`
|
|||
|
|
- 多语言：将页面内 `translations` 迁移为 i18n 方案（如 next-intl）
|
|||
|
|
- 数据统计：接入 GA4、Umami、Plausible 等
|
|||
|
|
|
|||
|
|
## 11. 配置说明
|
|||
|
|
- `NEXT_PUBLIC_BASE_URL`：用于生成 robots 与 sitemap（例如 `https://your-domain.com`）
|
|||
|
|
- Tailwind：已启用 `tailwindcss-animate`，可按需扩展主题变量
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
如需新增页面或模块，可参考现有页面模式（导航 -> Hero -> 内容区块 -> 页脚），保持视觉与交互一致性。
|