Skip to content

导出到微信公众号草稿

🎉 重大更新（v2.1.0）

完整的 Markdown 渲染支持已恢复！ 本工具现在可以：

  • ✅ 完整渲染 Markdown 内容为微信公众号兼容的 HTML
  • ✅ 智能封面处理：支持 front matter 中的 banner_image
  • ✅ WAF 安全检测：自动检测并处理可能被微信拦截的内容
  • ✅ 自动重试机制：遇到 WAF 拦截时智能回退
  • ✅ 完善的日志系统：详细的处理过程追踪

不再需要手动到第三方网站渲染！ 工具可以直接处理您的 Markdown 内容并创建格式完美的微信草稿。

核心功能

1. Markdown 完整渲染

支持微信公众号的所有常用格式：

  • 标题层级：H1-H4 标题，带样式美化
  • 代码高亮：支持多种编程语言的语法高亮
  • 列表渲染：有序和无序列表，支持嵌套
  • 引用块：美化的引用样式
  • 表格：响应式表格布局
  • 链接和强调：粗体、斜体、行内代码
  • 图片处理：自动上传图片到微信素材库

2. 智能封面系统

封面图片处理优先级：

  1. 直接指定：thumb_media_id（已上传的微信素材 ID）
  2. Front Matter：banner_image URL（如 Hugo 博客的封面）
  3. 内容提取：自动从正文中提取第一张图片
  4. 默认生成：自动生成 900x500 像素的默认封面
---
title: "文章标题"
banner_image: "https://example.com/cover.jpg"  # 将被用作封面
---

3. WAF 安全防护

  • 自动检测：识别可能触发微信 WAF 的敏感内容
  • 智能修复：自动替换敏感词汇和技术术语
  • 回退机制：修复失败时使用占位符内容
  • URL 保护：确保图片链接在词汇替换时不被破坏

4. 多主题支持

  • 深色主题：适合代码展示的暗色主题
  • 浅色主题：经典的白色背景主题
  • GitHub 主题：类似 GitHub 的代码高亮
  • 自定义主题：支持自定义 CSS 样式

使用方式

1. 命令行脚本（推荐）

# 完整功能：渲染 Markdown 并创建草稿
node scripts/publish-wechat.js \
  --title "文章标题" \
  --digest "文章摘要" \
  --file "article.md" \
  --author "作者名称" \
  --source "https://jimmysong.io/blog/article" \
  --cover "https://example.com/cover.jpg"

参数说明：

  • --title：文章标题（必需）
  • --digest：文章摘要，用于微信卡片显示（必需）
  • --file：Markdown 文件路径（可选，也可通过 stdin 输入）
  • --author：作者名称（可选）
  • --source：原文链接（可选）
  • --cover：封面图片 URL（可选）

2. API 服务方式

启动服务：

npm run serve
# 服务运行在 http://localhost:3001

POST 请求示例：

curl -X POST http://localhost:3001/api/wechat/drafts \
  -H "Content-Type: application/json" \
  -d '{
    "title": "文章标题",
    "digest": "文章摘要",
    "markdown": "# 标题\n\n正文内容...",
    "author": "作者名称",
    "source": "https://jimmysong.io/blog/article",
    "cover": "https://example.com/cover.jpg"
  }'

3. 从 Hugo 博客发布

如果您使用 Hugo 博客，工具会自动提取 front matter 中的信息：

---
title: "Hugo Website MCP Server：打造智能博客内容生成脚手架"
date: 2025-09-01T11:27:39.658Z
tags: ["Hugo", "MCP", "VS Code"]
categories: ["AI"]
banner_image: "https://assets.jimmysong.io/images/blog/hugo-mcp-server/banner.webp"
description: "详细介绍如何开发一个 Hugo 网站的 MCP Server..."
---

# 正文内容...

使用 banner_image 作为封面，自动提取 title、description 等信息。

测试验证

工具提供简化的测试系统：

# 运行核心发布测试（使用 test-markdown.md）
npm test

# 运行传统的完整测试套件
npm run test:legacy

测试会自动：

  1. 加载 test-markdown.md 示例文档
  2. 渲染为微信公众号 HTML 格式
  3. 处理封面图片
  4. 创建微信草稿
  5. 验证整个流程的成功性

故障排查

常见问题

1. "body used already" 错误

  • ✅ 已修复：改进了 fetch API 的 Response body 处理

2. 封面图片不显示

  • ✅ 已修复：支持 front matter 中的 banner_image 字段
  • 确保图片 URL 可公开访问
  • 工具会自动将 WebP 格式转换为 JPEG

3. 内容被微信 WAF 拦截

  • ✅ 已修复：自动检测和处理敏感内容
  • 自动替换技术术语（如 "server" → "服务"）
  • 失败时自动回退到占位符内容

4. 图片上传失败

  • 检查图片 URL 是否可访问
  • 确保图片大小不超过微信限制（通常 2MB）
  • 工具会自动重试 3 次

日志分析

工具提供详细的结构化日志：

[2025-09-01T15:42:18.225Z] [INFO] ✅ 使用提供的 cover_url：https://example.com/cover.jpg
[2025-09-01T15:42:18.572Z] [INFO] ✅ 封面图片上传成功 { "media_id": "xxx" }
[2025-09-01T15:42:22.348Z] [INFO] 🎉 草稿创建成功！ { "media_id": "xxx" }
  • 🔍 DEBUG：详细的处理步骤
  • 📊 INFO：重要的操作结果
  • ⚠️ WARN：可能的问题提示
  • ❌ ERROR：失败的操作

环境变量

# 微信公众号 API 配置
WECHAT_MP_APPID=your_app_id
WECHAT_MP_APPSECRET=your_app_secret

# 可选：自定义主题
WECHAT_THEME=dark  # dark, light, github, monokai, ocean

技术架构

处理流程

graph TD
    A[Markdown 输入] --> B[前置处理]
    B --> C[WAF 安全检查]
    C --> D{安全检查通过?}
    D -->|是| E[渲染 HTML]
    D -->|否| F[自动修复]
    F --> G{修复成功?}
    G -->|是| E
    G -->|否| H[使用占位符]
    E --> I[处理封面图片]
    H --> I
    I --> J[上传到微信]
    J --> K[创建草稿]

关键组件

  • exporter.js：核心导出逻辑，WAF 检测
  • wechat-api.js：微信 API 交互，重试机制
  • server.js：HTTP API 服务
  • image-processor.js：图片处理和上传
  • themes.js：多主题支持

更新历史

  • v2.1.0 (2025-09-01)：恢复完整 Markdown 渲染，修复封面传递，简化测试
  • v2.0.0 (2025-08-16)：重构架构，添加 WAF 防护，智能封面处理
  • v1.x：基础版本，仅支持占位符内容