254 lines
4.8 KiB
Markdown
254 lines
4.8 KiB
Markdown
# 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
|