技能介绍

问题背景

微信公众号后台与浏览器里的 HTML 不是同一套渲染环境：<style>、class、flex/grid、RGB 渐变和多数 CSS 动画会在粘贴或发布时被过滤或改写；SVG 插画在编辑器里往往无法保留；外链图片全选复制时也容易丢失。若还要把演示 MP4 嵌进图文，微信侧通常只能以 GIF 形式展示。手工逐段改标签、内联样式、换布局，既慢又容易漏掉规范细节。

技能如何工作

本技能对应一套 Python 3.10+ 工作流（脚本 transform.py，规则摘要见 wechat-rules.md），在改造前自动备份原文（.bak），然后按《公众号文案编码规范》做结构化处理：

标签与样式：收敛到微信白名单标签；去掉 script、iframe 及所有 class/id；样式全部写入 style="..."，颜色统一为 #RRGGBB，渐变用近似纯色替代；不稳定布局（如 .compare 的 grid）改为 table 或 inline-block。
媒体处理：可选路径将 MP4 经 imageio 按宽度（如 677px）采样帧并量化调色板生成 GIF；用 Chrome headless 把正文 SVG 渲染为 PNG 再替换为 <img>；本地图、生成的 GIF 与渲染图一并转为 base64 内联，便于浏览器全选复制到微信编辑器。
品牌卡片：仅当输入文件名含「智银长河」时，用项目内已验证的 contact_card.html（整体缩放 90%，保留内嵌 base64 GIF 动效）替换原底部卡片；其它文章会移除对应区块。
交付物：生成 base64 内联主文件与 _local.html（推荐粘贴用），并保留落地的图片与 GIF 供手动上传兜底。

适用边界与注意

微信编辑器会二次过滤样式，发布前应在公众号助手或第三方编辑器中预览；粘贴后若 base64 图片不显示，需在微信后台重新上传并换成 mmbiz.qpic.cn 链接。复杂 CSS 动画（如卡片整体入场）无法保留，脚本已用静态样式替代。最终 CDN 稳定性仍建议走微信官方图床，而非长期依赖内联图。