溯光公众号组件库 V1.47 适合自己的才是最好的。何必想太多呢。
温馨提示:
公众号：溯光笔记 本站仅为个人兴趣爱好而创立 并不会收费，感谢大家的支持.如有冒犯请联系我.
最近一直在找一些公众号排版工具，总感觉很多都解决不了图片排版的问题，用起来真是麻烦 ，加上又多个平台，写法排版都不一样，用着真是不方便 。一直还没有找到最好的解决方案，所以溯光暂时还是不全完依靠AI排版，打造一个组件库，来自己排版，排版这个东西真是适合自己的才是最好的，大家可能会有更好的选择.
公众号组件库｜开发日志
项目名称：公众号图文 HTML 组件库
当前版本：v1.47
整理：溯光笔记
适用场景：微信公众号图文编辑器、个人博客 HTML 素材
一、项目初衷
长期做公众号图文排版，经常需要好看的标题栏、提示卡片、分割组件。
网上很多组件存在几个痛点：
- 粘贴到公众号编辑器容易变形、多出多余边框；
- 嵌套层级过多，微信编辑器自动包裹容器，样式错乱；
- 颜色不能自由切换，复用性差；
- 缺少可视化预览，调试麻烦。
于是独立开发这套可视化组件库，实现「一键复制、自由换色、兼容公众号」。
二、整体技术设计规范（核心重点）
- 标签约束只允许使用公众号支持的基础标签：
<p> <span> <table> <strong>，尽可能减少多层嵌套 div，降低微信编辑器自动追加容器的概率。 - 样式规范所有样式写在行内 style，不依赖外部 CSS；纯色背景、圆角、阴影全部内联；
放弃复杂渐变、过度动画，保证移动端兼容。
- 两套复制模式
- 复制样式：带
text/html富文本，直接粘贴公众号编辑器； - 复制代码：原始纯 HTML，适合博客、自建网页平台。
- 兼容目标微信公众平台图文编辑器（电脑端）、手机公众号预览；WordPress 博客 HTML 区块。
三、版本迭代开发记录
v1.0～v1.42 基础搭建阶段
- 搭建网页基础框架：布局、颜色选择器、分类筛选按钮；
- 首批组件开发：竖线标题、下划线标题、渐变标题条、序号标题、各类提示卡片、引用块、列表组件；
- 实现颜色拾取功能，实时预览组件效果；
- 开发「复制样式」「复制代码」两套复制逻辑；
- 修复基础交互 bug，组件渲染、筛选切换、弹窗提示。
v1.43 新增胶囊按钮标题（左对齐）
需求：制作圆角长条胶囊标题栏，用于文章大标题。
问题：初期使用双层 table 嵌套，粘贴到公众号编辑器自动生成外围灰色边框。
尝试方案：
- 双层 table：出现多余外框，废弃；
- div 嵌套容器：公众号 HTML 解析自动包裹容器，依然存在边框；最终方案：单层
<p>标签承载全部样式，零嵌套。
<p style="margin:12px 0;background:颜色; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:12px 28px;font-size:16px;font-weight:bold;color:#fff;text-align:left;">标题文字</p>
结论：单层 p 标签结构最大限度规避公众号自动生成外围容器边框。
v1.45 胶囊标题稳定性终极修复
持续测试发现：只要存在多层容器，编辑器大概率追加外围边框。
规范落地：所有新标题组件优先使用单层 p 标签，禁止多层嵌套。
同时提醒：编辑器预览界面的虚线框属于编辑器 UI，手机最终发布预览才是真实效果。
v1.46 新增【居中版胶囊按钮标题】
在左对齐胶囊标题基础上，新增同风格居中版本，仅增加 text-align:center；
两套组件结构完全统一，方便读者按需切换使用。
v1.47 页面布局完善（当前最终版）
- 优化顶部说明文案，清晰区分两种复制功能用途；
- 页面底部新增和顶部 header 同款圆角版权栏；底部文案：
公众号 溯光笔记 整理 | 更多优质工具请关注溯光笔记博客 www.suguang999.cn； - 页面整体视觉统一：白色圆角卡片、柔和阴影，风格简约；
- 全部组件、交互逻辑保持不变，仅调整页面头部、底部静态展示区域。
四、现存已知注意事项（发布务必写上，减少读者咨询）
- 粘贴操作规范粘贴组件前，光标放在公众号图文最顶部空白位置，不要粘贴到已有模板、容器内部，降低样式异常概率。
- 编辑器虚线框说明电脑公众号编辑页面看到的灰色虚线外框，是编辑器自身画布 UI；发送预览链接，手机微信打开无此边框，属于正常现象。
- 阴影兼容性少数老旧安卓手机对 box-shadow 渲染有细微差异，追求极致兼容可手动删除阴影样式。
- 组件文字修改方法复制粘贴完成后，直接在公众号编辑器双击文字修改，不要删除外层标签结构。
五、后续规划（可选，写进文章增加期待）
- 新增分割线、标签栏、左右两栏图文组件；
- 优化移动端网页预览布局；
- 组件模板文字自定义输入框，不用粘贴后再改文字；
- 导出组件预览截图功能。
六、使用简易教程（可直接放在公众号文末）
- 打开组件库网页，顶部分类选择需要的组件；
- 点击底部色块自由切换主题色；
- 两种复制方式：✅ 📋 复制样式 → 直接 Ctrl+V 粘贴【微信公众号图文】
✅ 📄 复制代码 → 获取原始 HTML，粘贴【个人博客、网页】
- 粘贴完成后直接修改文字，发布预览查看手机最终效果。
THE END
