CloudBridge/README.md

# CloudBridge Proxy - AWS云服务代理网站

一个专业的AWS云服务代理网站，基于Nuxt3构建，支持多语言和SSG部署。

## 🚀 功能特性

- ✅ **多语言支持** - 简体中文、繁体中文、英文
- ✅ **响应式设计** - 适配所有设备
- ✅ **SEO优化** - 自动生成sitemap.xml和robots.txt
- ✅ **博客系统** - 基于Markdown的内容管理
- ✅ **表单集成** - 联系表单提交到Formspree
- ✅ **客服集成** - Chatway客服代码
- ✅ **社交媒体** - Telegram和WhatsApp联系方式
- ✅ **AWS风格设计** - 参考AWS官网设计风格

## 🌍 支持语言

- 🇺🇸 English (en)
- 🇨🇳 简体中文 (zh)
- 🇹🇼 繁體中文 (zh-hant)

## 🛠 技术栈

- **框架**: Nuxt 3
- **样式**: Tailwind CSS
- **国际化**: @nuxtjs/i18n
- **内容管理**: @nuxt/content
- **SEO**: @nuxtjs/seo
- **图标**: Lucide Vue Next

## 📦 安装

### 环境要求

- Node.js 18+
- npm 或 yarn

### 安装步骤

```bash
# 克隆项目
git clone <repository-url>
cd cloudbridge-proxy

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 生成静态站点
npm run generate
```

## 📁 项目结构

```
cloudbridge-proxy/
├── assets/                 # 静态资源
│   └── css/               # 样式文件
├── components/            # Vue组件
├── content/              # 博客内容
│   ├── en/               # 英文文章
│   ├── zh/               # 中文文章
│   └── zh-hant/          # 繁体中文文章
├── lang/                 # 语言文件
├── layouts/              # 布局组件
├── pages/                # 页面文件
├── public/               # 公共资源
└── nuxt.config.ts        # Nuxt配置
```

## 📝 内容管理

### 添加博客文章

1. 在 `content/` 目录下选择对应语言文件夹
2. 创建新的 `.md` 文件
3. 添加frontmatter元数据：

```yaml
---
title: "文章标题"
description: "文章描述"
date: 2024-01-15
image: "/images/article-image.jpg"
readingTime: 5
---
```

### 管理翻译

- 在不同语言目录下创建相同文件名的文章
- 系统会自动检测并提供语言切换功能
- 如果缺少翻译，会显示翻译不可用页面

## 🔧 配置

### 网站配置

在 `nuxt.config.ts` 中修改：

```typescript
site: {
  url: 'https://your-domain.com',
  name: 'Your Site Name',
  description: 'Your site description'
}
```

### 自定义配置

- **联系方式**: 在 `components/AppHeader.vue` 和 `components/AppFooter.vue` 中修改
- **表单提交**: 在 `nuxt.config.ts` 中修改 `formspreeEndpoint`
- **客服代码**: 在 `nuxt.config.ts` 中修改客服脚本

## 🚀 部署

### 推荐：静态站点生成 (SSG)

```bash
# 生成静态文件
npm run generate

# 部署到任何静态托管服务
# 如：Vercel, Netlify, GitHub Pages等
```

### 服务端渲染 (SSR)

```bash
# 构建应用
npm run build

# 启动生产服务器
npm run preview
```

## 🔍 SEO功能

- 自动生成sitemap.xml
- 自动生成robots.txt
- 多语言SEO支持
- 结构化数据
- Open Graph标签

## 📱 响应式设计

- 移动端优先设计
- 平板和桌面端优化
- 触摸友好的交互

## 🛡 安全

- 表单验证
- XSS防护
- CSRF保护
- 安全的依赖管理

## 📈 性能

- 静态站点生成
- 图片优化
- 代码分割
- 懒加载

## 🤝 贡献

欢迎提交Issue和Pull Request！

## 📄 许可证

MIT License

## 🆘 支持

- 📧 Email: support@cloudbridge-proxy.com
- 💬 Telegram: @pinnovatecloud
- 📱 WhatsApp: +1 9174029875

## 🔄 维护

### 定期任务

- 更新依赖包
- 检查安全漏洞
- 更新内容
- 监控性能

### 监控

- 网站性能
- 错误日志
- 用户反馈
- SEO排名

---

## ✅ 完整网站功能已交付

### **技术栈**
- ✅ Nuxt 3 + Vue 3
- ✅ Tailwind CSS
- ✅ TypeScript支持
- ✅ Vite构建工具

### **多语言支持**
- ✅ 简体中文、繁体中文、英文
- ✅ 语言切换功能
- ✅ SEO多语言支持
- ✅ 翻译缺失处理

### **内容与SEO**
- ✅ Markdown博客系统
- ✅ 自动sitemap生成
- ✅ robots.txt配置
- ✅ 多语言SEO优化

### **集成与联系**
- ✅ Formspree表单提交
- ✅ Chatway客服代码
- ✅ Telegram/WhatsApp联系方式
- ✅ 社交媒体集成

### **设计与UX**
- ✅ AWS风格设计
- ✅ 响应式布局
- ✅ 现代化UI组件
- ✅ 流畅的动画效果

### **内容创建**
- ✅ 示例博客文章
- ✅ 多语言翻译
- ✅ 完整的页面内容
- ✅ 专业的文案

## 🚀 快速开始

1. 克隆项目到本地
2. 运行 `npm install` 安装依赖
3. 运行 `npm run dev` 启动开发服务器
4. 访问 `http://localhost:3000` 查看网站
5. 运行 `npm run generate` 生成静态文件用于部署

## 🌐 域名建议

- cloudbridge-proxy.com
- aws-proxy-services.com
- cloud-proxy-hub.com
- aws-cloud-bridge.com