公众号排版发布自动化工具，将Markdown文章一键转换为可复制到公众号编辑器的HTML，支持内联CSS样式、PicGo图床上传、SVG配图生成和自动替换占位符。包含完整6步工作流，适用于内容创作者快速完成公众号图文发布。
公众号文章排版发布管线：Markdown一键转可复制HTML并自动上传图床
【适用场景】
- 公众号运营者：将Markdown文章快速转换为公众号可用的HTML格式 - 内容创作者：自动化公众号排版、配图和发布全流程 - 自媒体工作者：批量管理选题、素材、草稿和发布记录 - 技术博主：用Markdown写技术文章，一键生成精美公众号排版
使用时机：当需要"公众号排版"、"一键复制"、"图文排版"、"公众号配图"、"PicGo图床上传"时使用。
【操作步骤】
步骤0：健康检查（首次使用必做）
运行配置检查脚本，确认环境就绪：
```bash python3 scripts/doctor.py ```
检查6项配置：PicGo安装 / Server监听 / 图床配置 / token有效 / 仓库可访问 / 存储路径就绪。
任何一项失败，脚本会输出修复指引，按指引修复后重跑直到全绿。
步骤1：撰写或获取文章
准备好需要发布的Markdown文章，存入草稿目录。建议包含YAML frontmatter：
```markdown
title: 文章标题 type: 技术/生活/产品 status: draft tags: 标签
文章正文... ```
步骤2：生成排版HTML
将Markdown文章转换为公众号兼容的HTML格式：
核心约束： - 所有CSS必须写进`style=""`属性，不用`<style>`标签或class - 不用CSS渐变（易被公众号过滤） - 正文宽677px，字号14-15px，行高1.85-1.9 - 图片占位符统一用`__IMAGE_N__`
```html <img src="__IMAGE_N__" alt="描述" style="width:100%;border-radius:6px;display:block;" /> ```
步骤3：生成配图
如需生成封面图或插图：
SVG手绘配图（推荐）： - 手绘SVG尺寸900px宽 - 用`rsvg-convert`转换：`rsvg-convert -w 900 in.svg -o out.png`
封面裁剪（命令行）： ```bash
裁剪为2.35:1比例
ffmpeg -i in.png -vf "crop=900:383:0:0" out.png缩放到指定尺寸
sips -z 383 900 in.png ```文字溢出检测（必须做）： - 用macOS Vision OCR定位每段文字边界 - 判断文字是否超出画布范围 - OCR误报时用Pillow像素级复核
步骤4：上传图床并替换占位符
确认环境就绪后，运行自动发布脚本：
```bash python3 scripts/auto-publish.py --html 排版.html --images image1.png image2.png ```
脚本自动完成： 1. 上传图片到配置的图床 2. 获取图片URL 3. 替换HTML中的`__IMAGE_N__`占位符 4. 输出`_final.html`
若无可用PicGo：手动上传图片到公众号素材库，获取`mmbiz.qpic.cn`链接后手动替换。
步骤5：复制发布
1. 用浏览器打开`_final.html` 2. 全选复制：`Cmd+A` → `Cmd+C` 3. 粘贴到公众号编辑器 4. 微信自动转存外链图片 5. 发布后更新发布记录
步骤6：归档到例文库
发布完成后归档到`references/examples/`目录，作为同类文章的参考：
```bash python3 scripts/manage-examples.py add 2026-09-25-文章slug ```
归档内容： - `排版.html`（最终成品） - `meta.md`（文章类型、视觉主题、踩坑记录） - `assets/`（可选，配图文件）
【代码模板】
完整工作流模板
```bash
Step 0: 检查环境
python3 scripts/doctor.pyStep 1: 文章已准备好在 03_草稿/ 目录
Step 2: 生成排版HTML（需配合 frontend-design skill）
输出到 03_草稿/文章名_final.html
Step 3: 生成配图
rsvg-convert -w 900 assets/cover.svg -o assets/cover.pngStep 4: 上传图床
python3 scripts/auto-publish.py --html 03_草稿/文章名_final.html --images assets/cover.pngStep 5: 复制发布
浏览器打开 _final.html → Cmd+A → Cmd+C → 粘贴到公众号
Step 6: 归档
python3 scripts/manage-examples.py add 2026-09-25-文章slug ```目录结构建议
``` <内容根目录>/ ├── 01_选题库/ 选题卡片 ├── 02_素材收集/ 素材卡片 ├── 03_草稿/ 草稿 + 排版HTML ├── 04_发布记录/ 发布记录 ├── 06_素材库/ 配图SVG + PNG ├── 99_模板/ 各类卡片模板 └── references/ ├── layout-guide.md 排版方法论 └── examples/ 例文库 ```
【复盘要点】
公众号排版红线（必知）
| 约束 | 说明 |
|---|---|
| 内联样式 | 所有CSS写进`style=""`，不用`<style>` |
| 图片URL | 必须用`https://`外链，不用本地路径 |
| 占位符 | 统一`__IMAGE_N__`，交给脚本替换 |
| 渐变禁用 | CSS渐变易被公众号过滤，用色块拼接替代 |
环境依赖
- PicGo：图床上传工具，需开启Server（默认`127.0.0.1:36677`） - rsvg-convert：SVG转PNG工具 - ffmpeg：视频/图片处理 - headless Chromium：渲染验证（可选）
常见问题处理
- PicGo未运行：`doctor.py`会自动启动（`open -a PicGo`） - 图片显示异常：检查图片URL是否为外链，公众号不支持本地路径 - 文字溢出：用OCR工具检测并调整SVG尺寸 - 样式被过滤：确保所有样式为内联，不用class和渐变
来源：GitHub https://github.com/786262170/wechat-publish
技能文件：SKILL.md