# 公众号/百家号长文配图渲染方案

## 适用场景

需要为公众号长文或百家号文章生成横版配图（数据图、对比卡、流程图、清单图等）。

## 技术方案

**Playwright Chromium + HTML** — 唯一可靠的中文渲染方案。

WeasyPrint / wkhtmltoimage 在腾讯云 Lighthouse 上有中文渲染 bug（文字截断或不显示），不可用。

## 渲染命令

```bash
mkdir -p <output_dir>
/home/ubuntu/.cache/ms-playwright/chromium-1187/chrome-linux/chrome \
  --headless=new \
  --no-sandbox \
  --disable-gpu \
  --window-size=900,500 \
  --force-device-scale-factor=2 \
  --screenshot=<output_path> \
  <html_file>
```

## 尺寸规范

| 用途 | 尺寸 | 说明 |
|------|------|------|
| 公众号正文配图 | 900×500 | 横版，适合手机端阅读 |
| 公众号封面 | 900×383 | 微信官方推荐比例 |
| 百家号配图 | 900×500 | 同公众号 |

## 字体

- **标题**：优设标题黑 (`/home/ubuntu/project/brand/YouSheBiaoTiHei-2.ttf`)，通过 `@font-face` 引用
- **正文**：Noto Sans CJK SC Bold (`/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc`)

## 品牌色

| 用途 | 色值 | CSS变量建议 |
|------|------|------------|
| 主色（标题、强调边框） | `#1a6fb5` | `--brand-blue` |
| 强调色（数字、标签、CTA） | `#e67e22` | `--brand-orange` |
| 浅底（背景渐变起点） | `#e8f4fd` | `--brand-light` |
| 暖底（背景渐变终点） | `#fef9f0` | `--brand-warm` |

## HTML 模板要点

1. `body` 设置 `width: 900px; height: 500px`，内容不超出
2. 顶部 5px 品牌色条增强识别度
3. 渐变背景 `linear-gradient(135deg, #e8f4fd, #fff, #fef9f0)`
4. 卡片式布局用 `border-radius: 12px` + `box-shadow`
5. 关键数字用橙色大字突出
6. 每张图一个核心信息 — 不塞太多内容

## 常见图片类型

| 类型 | 布局 | 示例 |
|------|------|------|
| 流程图 | 横向3列卡片 + 步骤编号 | 报名三步走 |
| 对比卡 | 横向3列卡片 + 推荐标签 | 科目对比 |
| 数据图 | 左分数分布条 + 右案例卡片 | 分数段院校 |
| 清单图 | 纵向4行卡片 + 右侧行动标签 | 行动清单 |