CloudPro/docs/功能介绍.md

网站功能介绍（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 -> 内容区块 -> 页脚），保持视觉与交互一致性。