Html_Wechat公众号文案转换

概述

微信公众号文案兼容改造工作流

本 Skill 用于把普通 HTML 文案改造为微信公众号可识别的安全格式，并支持将 MP4 视频转换为 GIF 后替换文案中的图片。

前置依赖

运行环境需要 Python 3.10+，并安装以下包（建议在项目内建 venv）：

python3 -m venv .venv
.venv/Scripts/pip install beautifulsoup4 lxml imageio imageio-ffmpeg pillow

脚本还需要 Google Chrome 来完成一件事：

1. 把正文 SVG 插画渲染为 PNG（微信编辑器粘贴时不保留 SVG）。

底部联系卡片不再渲染为 GIF，而是直接嵌入项目内已验证微信兼容的 contact_card.html（整体缩放 90%），保留其 base64 GIF 动效。旧版 智银长河公众号联系方式卡片.html 仍兼容。

脚本会自动查找常见安装路径下的 chrome.exe。

核心规范（来自《公众号文案编码规范》）

1. HTML 标签白名单：<section>、<p>、<h3>–<h6>、<ul>/<ol>/<li>、<strong>/<em>、<img>、<a>、<hr>、<mpvoice>/<mpvideo>。
   • 避免使用 <div> 与 <span>，可用 <section>、<strong> 替代。
   • <h1>、<h2> 发布后可能被转为 <p>，建议改用 <h3> 并加内联样式。
2. CSS 必须内联：所有样式写在 style="..." 中；<style>、class、id 选择器均会被微信过滤。
3. 安全 CSS 属性：color、font-size、line-height、margin、padding、background-color、width、height、text-align、border-radius、border、display 等。
   • 颜色必须使用 #RRGGBB，不使用 RGB/HSL；渐变会被过滤，需用近似纯色替换。
   • 单位统一使用 px；内容最大宽度 677px。
4. 布局替代：flex / grid 在微信中不稳定，应改为 table 或 inline-block 布局。
5. 动态效果：CSS 动画会被过滤，应使用 SVG 白名单动画：<animate>（x/y/width/height/opacity/d/points/stroke-dashoffset/fill/stroke）、<set>（visibility）、<animateTransform>（translate）。
6. 全文背景：使用“零高容器”实现：height:0;overflow:visible + 内部 position:absolute 的 <div> 铺满背景色。
7. 图片资源：
   • 本脚本会把所有图片（含生成的 GIF、本地 PNG/JPG、以及 Chrome 渲染出的 SVG 插画）转为 base64 内联，这样从浏览器全选复制再粘贴到微信编辑器时，图片可以一起被粘贴进去。
   • 最终发布前，仍建议在微信后台把图片重新上传，换成 mmbiz.qpic.cn 域名链接，以获得更稳定的 CDN 分发。

免责声明（重要，务必按此执行）

本 skill 已内置免责声明功能，无需也不允许自行实现：

• 命令行开关：--disclaimer（见 transform.py 的 build_disclaimer()）。
• 标准文案与样式的唯一来源：skill 目录下的 disclaimer.html 文件。

触发规则：用户提出「添加免责声明」「加上免责声明」「文末加声明」等任何在文章中加入免责声明的需求时，必须在调用 transform.py 时追加 --disclaimer 参数，让脚本自动生成并插入。禁止自行手写免责声明文案或样式，禁止修改 transform.py 或新建其他声明内容，不要声称本 skill 没有免责声明功能。

标准命令：

.venv/Scripts/python transform.py ${html_path} --disclaimer

免责声明块会被插入在正文与联系卡片之间（正文容器 → 免责声明 → 联系卡片），样式为：顶部灰色分隔线 + 居中灰色「免责声明」标题 + 4 条灰色小字条款。

仅在脚本完全无法执行时，才允许读取 skill 目录下的 disclaimer.html，把其中的内容原样插入正文容器末尾、联系卡片之前（一个字都不要改，包括文案、颜色、字号）：

<section style="margin: 35px 0 0 0; padding: 25px 10px 0 10px; border-top: 1px solid #e5e5e5;">
<p style="text-align: center; margin: 0;"><strong style="color: #666666; font-size: 16px;">免责声明</strong></p>
<p style="color: #7f7f7f; font-size: 14px; line-height: 2; margin: 10px 0 0 0;">1.本公众号部分转载的文章、图文、视频来自网络，其版权和文责属原作者所有，若来源标注错误或侵犯到您的权益，烦请告知，我们将立即删除。</p>
<p style="color: #7f7f7f; font-size: 14px; line-height: 2; margin: 10px 0 0 0;">2.本公众号的原创文章，其版权属于我们微信公众号所属主体。</p>
<p style="color: #7f7f7f; font-size: 14px; line-height: 2; margin: 10px 0 0 0;">3.本公众号特约稿原创文章，其版权和文责属作者所有。</p>
<p style="color: #7f7f7f; font-size: 14px; line-height: 2; margin: 10px 0 0 0;">4.若要转载原创文章用于商业用途，请联系我们，未经同意不得转载。任何转载请注明文章来源。如有问题，请联系我们，谢谢!</p>
</section>

交付前自检（必须执行）：用户要求添加免责声明时，处理完成后、交付前必须确认输出 HTML 中包含标准文案首句「1.本公众号部分转载的文章」。可用：

grep -c "1.本公众号部分转载的文章" 输出文件.html

• 结果为 0：禁止交付，必须重跑（确认带 --disclaimer）或按上方兜底块修复后再交付。
• 输出中若出现「不构成任何投资建议」「最终解释权」等非标准文案：说明免责声明被错误地自行生成了，必须整段删除，替换为 disclaimer.html 的标准块后再交付。

工作步骤

1. 备份原文案：若输入文件不是 .bak，脚本会先复制 ${html_path}.bak 作为备份。
2. 两种模式（二选一）：
   • 全量转换模式（默认）：对全文做微信安全化改造（步骤 3 的全部内容），适合来源是普通网页/复杂 HTML 的文章。
   • 仅追加模式（--append-only）：不改动正文任何格式，只把免责声明和/或联系卡片插入正文容器末尾（免责声明在联系卡片之前），并保持原文档结构（不剥 <html>/<body>/<head>、不外包 section）。适合本身已是微信兼容格式的手写/已处理文章。
3. MP4 转 GIF（如提供了 $mp4_path，仅全量转换模式执行）：
   • 使用 imageio + imageio-ffmpeg 读取视频。
   • 按 $gif_width 等比缩放，按目标 fps 采样帧，量化到 128 色调色板。
   • 生成 $gif_path（默认 demo.gif）。
4. 修改 HTML 兼容微信（仅全量转换模式执行）：
   • 提取所有 data:image base64 图片为临时本地 PNG/JPG 文件，便于后续统一处理。
   • 若通过 --replace-img-alt 或 --replace-img-index 指定了目标，才把生成的 GIF 替换到对应图片位置；未指定则不替换，仅生成 GIF。
   • 用 Chrome headless 把正文 SVG 插画渲染为 PNG，并替换为 <img> 标签（微信编辑器粘贴时不支持 SVG）。
   • 仅当输入文件名包含「智银长河」时，才读取项目内已验证微信兼容的 contact_card.html（或旧版 智银长河公众号联系方式卡片.html），对其所有内联 px 尺寸整体缩放 90%（边框 1px 保持不变），将缩放后的卡片直接替换原版 <div class="wx-card">。卡片内已包含 base64 GIF 动效（顶部闪光条、分隔点、红心、二维码扫描线），无需再生成整体 GIF。非智银长河文章会直接移除 <div class="wx-card">。
• 免责声明：当用户要求添加免责声明时，必须在命令行加 --disclaimer（见上文「免责声明（重要，务必按此执行）」专节），脚本会把固定文案的免责声明块（顶部灰色分隔线 + 居中标题 + 4 条灰色小字条款）插入正文与联系卡片之间；禁止自行手写免责声明；未加 --disclaimer 则不插入。
  • 删除 <style>、<script> 及所有 class/id。
  • 将 <div> 改为 <section>；<span class="brand"> 改为 <strong>；<h1>/<h2> 改为 <h3> 并内联样式。
  • 将 .compare 的 grid 改为 <table>。
  • 所有颜色转为十六进制，渐变用近似纯色替代，样式全部内联。
  • 最后生成一个 base64 内联版，带标准 <!DOCTYPE html> 文档骨架（防止浏览器按 quirks 模式渲染导致排版异常），可直接浏览器打开并从微信编辑器粘贴。
5. 追加免责声明/联系卡片（两种模式都会执行）：将免责声明（如要求）与联系卡片（智银长河文章）插入正文容器末尾，免责声明在联系卡片之前，并移除正文容器底部 padding 避免大空隙。
6. 验证：用 Chrome headless 或打开浏览器检查渲染效果，确保排版、背景、尺寸、动态效果与原文案一致；--append-only 模式下须确认正文区域与原文逐像素一致。
7. 交付：返回修改后的 HTML 文件、GIF 动图、以及落地的图片文件。

快速调用

在项目目录下执行：

# 1. 创建虚拟环境并安装依赖
python3 -m venv .venv
.venv/Scripts/pip install beautifulsoup4 lxml imageio imageio-ffmpeg pillow

# 2. 运行转换脚本（默认参数对应本项目）
.venv/Scripts/python transform.py

脚本默认处理：

• 输入：智银长河公众号文章1(1).html.bak
• 输出：智银长河公众号文章1(1).html（base64 内联版，带标准文档骨架，推荐复制粘贴到微信编辑器时使用）
• 视频：dbeb33c26f2cb68f9636cff14095ea0d.mp4 → demo.gif（宽度 677px）
• 替换：默认不替换图片；如需替换，通过 --replace-img-alt 指定 alt，或通过 --replace-img-index 1 指定第几张图
• 免责声明：默认不插入；当用户明确要求添加免责声明时，加 --disclaimer，将免责声明块插入正文与联系卡片之间
• 底部：若输入文件名包含「智银长河」，则读取 contact_card.html（或旧版中文名），整体缩放 90% 后直接嵌入文章末尾，保留 base64 GIF 动效

如需处理其他文件，使用命令行参数：

.venv/Scripts/python transform.py 你的文章.html 你的视频.mp4 --gif-width 677 --gif-path demo.gif
# 如需替换某张图为 GIF
.venv/Scripts/python transform.py 你的文章.html 你的视频.mp4 --gif-width 677 --gif-path demo.gif --replace-img-alt "数据导入界面"
# 或者直接按图片序号替换（从 1 开始）
.venv/Scripts/python transform.py 你的文章.html 你的视频.mp4 --replace-img-index 1
# 如需在正文与联系卡片之间插入免责声明
.venv/Scripts/python transform.py 你的文章.html --disclaimer
# 文章已是微信兼容格式、只想追加免责声明/联系卡片而不改动正文格式时
.venv/Scripts/python transform.py 你的文章.html --append-only --disclaimer

注意事项

• 由于微信编辑器会再次过滤/重写样式，最终发布前务必在公众号助手 APP 或第三方编辑器（如壹伴助手、小墨鹰）中预览。
• 本脚本已将所有图片转为 base64 内联。从浏览器全选复制 → 粘贴到微信编辑器时，静态 PNG/JPG 通常可正常带入，GIF 也能作为图片带入。
• 底部联系卡片现在是一段完整的内联 HTML，直接复制粘贴到微信编辑器即可。卡片内的顶部闪光条、分隔点、红心、二维码扫描线均为 base64 GIF，动效会被保留；微信编辑器预览区有时不自动播放 GIF，发布后在手机端查看通常可正常播放。
• 微信编辑器对浏览器直接粘贴的图片支持不稳定，若粘贴后图片不显示，最可靠的方式是：先粘贴 HTML 结构，再在微信编辑器中手动上传 demo.gif、svg_illustration.png、screenshot2.png、screenshot3.png 替换对应位置。
• 复杂的 CSS 动画（如卡片整体入场、悬停）无法在微信内保留，已以静态样式替代。

参考文件

• 本 Skill 目录：${KIMI_SKILL_DIR}
• 转换脚本：${KIMI_SKILL_DIR}/transform.py
• 免责声明标准块：${KIMI_SKILL_DIR}/disclaimer.html（文案与样式的唯一标准来源）
• 联系卡片：${KIMI_SKILL_DIR}/contact_card.html
• 规则摘要：${KIMI_SKILL_DIR}/wechat-rules.md