# proxy-website

**Repository Path**: ZHIYI16/proxy-website

## Basic Information

- **Project Name**: proxy-website
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-15
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LinkProxy - 企业级IP代理服务

LinkProxy 是一个基于 Nuxt 4 构建的企业级 IP 代理服务网站，采用深色科技风格设计。

## 项目概述

- **框架**: Nuxt 4.2.2 (Vue 3.5.26)
- **样式**: Tailwind CSS 6.14.0
- **博客系统**: 基于 Markdown 的自定义博客系统

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发服务器

启动开发服务器（默认运行在 `http://localhost:3000`）：

```bash
npm run dev
```

### 生产构建

构建生产版本：

```bash
npm run build
```

本地预览生产构建：

```bash
npm run preview
```

---

## 博客文章发布指南

### 博客系统架构

本项目使用自定义的 Markdown 博客系统，通过服务器 API 读取 `content/blog/` 目录下的 Markdown 文件并渲染为网页。

### 发布新文章

#### 1. 创建 Markdown 文件

在 `content/blog/` 目录下创建新的 Markdown 文件，文件名格式必须遵循：

```
YYYY-MM-DD-slug.md
```

- `YYYY-MM-DD`: 文章发布日期（例如：2025-01-15）
- `slug`: URL 友好的文章标识符（例如：static-proxy-introduction）

**示例文件名：**
```
content/blog/2025-01-15-my-new-article.md
```

#### 2. 文章 Front Matter 配置

每个 Markdown 文件必须包含 Front Matter（文件顶部的 YAML 配置），定义文章的元数据：

```markdown
---
title: '文章标题'
description: '文章简介，用于SEO和列表展示'
date: 2025-01-15
author: '作者名称'
category: '分类名称'
tags: ['标签1', '标签2', '标签3']
image: '/images/blog/article-cover.jpg'
readTime: 8
draft: false
---

文章内容...
```

**Front Matter 字段说明：**

| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| `title` | string | ✅ | 文章标题 |
| `description` | string | ✅ | 文章描述，用于 SEO 和列表页展示 |
| `date` | date | ✅ | 发布日期，格式：YYYY-MM-DD |
| `author` | string | ✅ | 作者名称 |
| `category` | string | ✅ | 文章分类（用于筛选和推荐） |
| `tags` | array | ❌ | 标签列表 |
| `image` | string | ❌ | 文章封面图路径 |
| `readTime` | number | ❌ | 预计阅读时间（分钟） |
| `draft` | boolean | ❌ | 是否为草稿（true 不会显示） |

#### 3. 文章内容格式

支持标准 Markdown 语法，包括：

```markdown
## 二级标题

### 三级标题

这是一段普通文本，支持**加粗**、*斜体*和`代码`。

### 列表

- 无序列表项 1
- 无序列表项 2
- 无序列表项 3

1. 有序列表项 1
2. 有序列表项 2

### 代码块

```javascript
// 代码会自动高亮显示
function hello() {
  console.log('Hello, World!');
}
```

### 引用

> 这是一段引用文本。

### 表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |

### 链接

[链接文本](https://example.com)
```

#### 4. 完整示例

```markdown
---
title: '静态IP代理完全指南：从入门到精通'
description: '深入了解静态IP代理的工作原理、应用场景以及如何选择最适合的代理服务。'
date: 2025-01-15
author: 'LinkProxy Team'
category: '技术教程'
tags: ['代理IP', '静态IP', '网络技术']
image: '/images/blog/proxy-guide.jpg'
readTime: 12
draft: false
---

## 什么是静态IP代理？

静态IP代理是一种为用户分配固定IP地址的代理服务...

### 核心特性

- **IP地址固定**：长期使用相同的IP地址
- **高稳定性**：避免频繁更换IP带来的连接问题

### 代码示例

```bash
# 静态代理连接示例
curl -x http://proxy.example.com:8080 \
  -u username:password \
  http://api.example.com/data
```
```

### 文章管理

#### 查看所有文章

文章列表会自动从 `content/blog/` 目录读取，访问 `/blog` 可查看所有已发布的文章。

#### 草稿文章

将 Front Matter 中的 `draft` 设置为 `true` 可以隐藏文章：

```yaml
---
draft: true
---
```

#### 编辑文章

直接编辑对应的 Markdown 文件，保存后刷新页面即可看到更新。

#### 删除文章

删除对应的 Markdown 文件即可移除文章。

### 文章 URL 规则

文章的访问 URL 格式为：

```
/blog/{slug}
```

例如，文件名 `2025-01-15-static-proxy-introduction.md` 对应的 URL 为：

```
/blog/static-proxy-introduction
```

### 相关文章推荐

系统会自动推荐同分类下的其他文章（最多3篇），显示在文章详情页底部。

### SEO 优化

每篇文章会自动生成：

- 动态页面标题
- Meta 描述
- Open Graph 标签（社交分享优化）
- Twitter Card 标签
- Schema.org 结构化数据（Article 类型）

### 分类系统

当前支持的分类：
- 技术教程
- 产品更新
- 技术实战
- 更多...

在 Front Matter 中设置 `category` 字段来指定文章分类。

### 注意事项

1. **文件命名规范**：必须使用 `YYYY-MM-DD-slug.md` 格式
2. **日期一致性**：Front Matter 中的 `date` 应与文件名中的日期一致
3. **slug 唯一性**：确保 slug 在所有文章中唯一，避免冲突
4. **图片管理**：详见下方"图片管理"章节
5. **草稿测试**：发布前建议先设置为 `draft: true` 进行预览

---

## 图片管理

### 目录结构

项目采用自动同步机制管理博客图片：

```
link-proxy/
├── content/
│   ├── blog/           # 博客文章
│   └── images/         # 👈 将图片放在这里
│       ├── twitter-card.png
│       └── og-image.png
└── public/
    └── images/         # 👈 自动同步到这里（部署使用）
```

### 使用方法

#### 1. 存放图片

将博客图片放在 `content/images/` 目录下。

支持的图片格式：`.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`, `.ico`

#### 2. 在 Markdown 中引用

在 `content/blog/` 目录下的文章中，使用**相对路径**引用图片：

```markdown
<!-- ✅ 正确 - 使用相对路径 -->
![twitter-card](../images/twitter-card.png)

<!-- ❌ 错误 - 本地预览无法显示 -->
![twitter-card](/images/twitter-card.png)
```

#### 3. 自动同步

图片会在以下时机自动从 `content/images/` 复制到 `public/images/`：

| 命令 | 触发时机 |
|------|----------|
| `npm run dev` | 每次启动开发服务器 |
| `npm run build` | 每次构建生产版本 |
| `npm run sync-images` | 手动同步 |

### 工作原理

1. **本地编写**：使用相对路径 `../images/xxx.png`，Markdown 编辑器可以正常预览
2. **自动同步**：运行 dev/build 时，图片自动复制到 `public/images/`
3. **部署上线**：`public` 目录映射到根路径 `/`，图片路径依然有效

### 示例

假设你有一张图片 `content/images/diagram.png`，在文章中这样引用：

```markdown
---
title: '我的文章'
---

文章内容...

![架构图](../images/diagram.png)

更多内容...
```

运行 `npm run dev` 后，图片会被自动复制到 `public/images/diagram.png`，部署时也能正常访问。

---

## 项目结构

```
link-proxy/
├── app/
│   ├── components/       # Vue 组件
│   │   ├── Navbar.vue
│   │   ├── Footer.vue
│   │   ├── MarkdownRenderer.vue
│   │   └── ...
│   └── pages/           # 页面路由
│       ├── index.vue    # 首页
│       ├── blog/
│       │   ├── index.vue      # 博客列表
│       │   └── [slug].vue     # 博客详情
│       ├── faq.vue
│       └── ...
├── content/
│   └── blog/            # 博客文章目录
│       ├── 2025-01-15-article-1.md
│       └── 2025-01-10-article-2.md
├── server/
│   └── api/
│       ├── blog-posts.get.ts      # 文章列表 API
│       └── blog/[slug].get.ts    # 文章详情 API
├── public/               # 静态资源
└── nuxt.config.ts       # Nuxt 配置
```

---

## 技术栈

- **Nuxt 4** - Vue.js 框架
- **Tailwind CSS** - 样式框架
- **Markdown-it** - Markdown 解析
- **gray-matter** - Front Matter 解析

---

## 部署

查看 [Nuxt 部署文档](https://nuxt.com/docs/getting-started/deployment) 了解更多部署选项。

### 常用部署平台

- **Vercel**: `npm run build` 后推送到 GitHub，连接 Vercel 自动部署
- **Netlify**: 连接 Git 仓库，自动构建和部署
- **Node.js 服务器**: 构建后使用 `node .output/server/index.mjs` 运行

---

## PM2 部署指南

### 前置要求

- 服务器已安装 Node.js (推荐 v18+)
- 服务器已安装 PM2 (`npm install -g pm2`)
- 已安装 Nginx (用于反向代理)

### 部署步骤

#### 1. 构建项目

在本地或服务器上执行构建：

```bash
npm run build
```

构建完成后，生产输出在 `.output` 目录。

#### 2. 上传文件到服务器

将以下内容上传到服务器：

```bash
# 方式一：上传构建输出
scp -r .output/* user@your-server:/var/www/link-proxy/

# 方式二：使用 Git 在服务器上直接构建
git clone <your-repo> /var/www/link-proxy
cd /var/www/link-proxy
npm install
npm run build
```

#### 3. 使用 PM2 启动应用

Nuxt 构建后会自动生成 `ecosystem.config.cjs` 配置文件，位于 `.output/ecosystem.config.cjs`。

```bash
cd /var/www/link-proxy/.output

# 启动应用
pm2 start ecosystem.config.cjs

# 或直接指定配置文件启动
pm2 start ./server/index.mjs --name link-proxy
```

#### 4. PM2 常用命令

```bash
# 查看应用状态
pm2 status

# 查看日志
pm2 logs link-proxy

# 重启应用
pm2 restart link-proxy

# 停止应用
pm2 stop link-proxy

# 删除应用
pm2 delete link-proxy

# 设置开机自启
pm2 startup
pm2 save
```

#### 5. 配置 Nginx 反向代理

创建 Nginx 配置文件：

```bash
sudo nano /etc/nginx/sites-available/link-proxy
```

添加以下配置：

```nginx
server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或 IP

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}
```

#### 6. 启用 Nginx 配置

```bash
# 创建软链接
sudo ln -s /etc/nginx/sites-available/link-proxy /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx
```

#### 7. 配置 SSL (可选，推荐)

使用 Let's Encrypt 免费证书：

```bash
# 安装 Certbot
sudo apt install certbot python3-certbot-nginx

# 自动配置 SSL
sudo certbot --nginx -d your-domain.com

# Certbot 会自动修改 Nginx 配置，添加 SSL 支持
```

### 更新部署

当代码更新后，重新部署：

```bash
# 1. 拉取最新代码
cd /var/www/link-proxy
git pull

# 2. 安装依赖（如有更新）
npm install

# 3. 重新构建
npm run build

# 4. 重启 PM2 应用
pm2 restart link-proxy
```

### 自定义 PM2 配置

如需自定义 PM2 配置，可在项目根目录创建 `ecosystem.config.cjs`：

```javascript
module.exports = {
  apps: [{
    name: 'link-proxy',
    script: './server/index.mjs',
    instances: 1,
    exec_mode: 'fork',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    error_file: './logs/pm2-error.log',
    out_file: './logs/pm2-out.log',
    log_file: './logs/pm2-combined.log',
    time: true,
    autorestart: true,
    max_memory_restart: '1G',
    watch: false
  }]
}
```

然后使用：

```bash
pm2 start ecosystem.config.cjs
```

### 故障排查

#### 应用无法启动

```bash
# 查看详细日志
pm2 logs link-proxy --lines 100

# 检查端口占用
sudo lsof -i :3000

# 检查防火墙
sudo ufw status
sudo ufw allow 3000
```

#### Nginx 502 错误

- 检查 PM2 应用是否正在运行：`pm2 status`
- 检查 Nginx 配置中的端口是否正确
- 查看 Nginx 错误日志：`sudo tail -f /var/log/nginx/error.log`

---

## 许可证

MIT License