ARTICLE · 1195425
还在为公众号排版不好看发愁?点开! 下载安装即用
排版只能手工调?
6 套开源模板下载安装即用
一条命令直接抄
技能:gzh-design-skill · 6 套主题 · 自带校验脚本
星界锐评
📦 6 Parts + Conclusion
👉 滑动
PART 01
先说结论
排版不该你手工调
PART 02
gzh-design-skill
6 套主题带校验
PART 03
六套主题怎么选
这张表建议收藏
PART 04
第二个开源项目
还有 34 套
PART 05
实跑一遍
真实数据
PART 06
排版红线清单
建议截图存
PART ///
写在最后
别自己造轮子
前阵子我干了件特别蠢的事。
为了搞公众号排版,我自己写了 9 套模板。A 极简留白、B 教程卡片、C 深色科技、D 杂志大字……每套都调字号、调行距、调颜色值,光 HTML 就写了麻烦死了,还特么不好看。做完自己一看:两个字.......垃圾。
第二天突然想通了一件事:
别人早就写好了,而且写得比我好,我干嘛自己写?
于是我关了编辑器,直接去 GitHub 下了两套开源的。一条命令,6 套主题,还自带平台红线校验脚本。实跑了一遍,0 报错。
这篇就是把下载、安装、使用的全过程摊开写。你要是也不想自己调样式,命令直接抄。
01
PART
先说结论:排版不该你手工调
CONCLUSION
手工排版最大的坑不是麻烦,是你调好的样式,粘到公众号后台可能整片消失。
不是淡了,不是歪了,是整块没了。原因是微信编辑器有一套白名单,它不认的标签和属性,直接给你剥掉。我踩出来的死亡清单:
<style> 标签:剥
class / id 属性:剥
<div>:剥
float、position:fixed:剥
display:grid:剥
CSS 变量:剥
@media、@keyframes:剥
更阴的是文字包裹。你把文字写在一段里,只给外层容器加样式,粘过去大概率文字样式全丢,微信要求每个文字节点也要被包住。开源模板里每段文字都套 <span leaf="">,我那篇稿子一共 178 处,一处不落,脚本一个个数过去。
对号入座一下:如果你也遇到过“预览里明明是好的,发出去就散架”,别怀疑自己,是规则问题。这套坑多到你必须一边踩一边记,而记笔记的时间,够你下三套模板了。
02
PART
第一个:gzh-design-skill,6 套主题带校验
TOOLKIT
GitHub 上的开源项目,MIT 协议,1.7k star。核心能力一句话:把 Markdown 排成能直接粘进公众号的 HTML,还自带平台红线校验脚本。
Windows 装了 git 的话,下载就一条命令:
git clone --depth 1 https://github.com/isjiamu/gzh-design-skill.git
装完你会看到这么个结构:
gzh-design-skill/
├── SKILL.md # 工作流主文档
├── references/ # 6 套主题组件库,一套一个文件
├── scripts/
│ ├── validate_gzh_html.py # 平台红线校验
│ └── wrap_preview.py # 生成带复制按钮的预览页
└── docs/gallery/ # 6 套主题完整长图预览
用起来三步:选主题 → 按组件库装配 → 跑校验。
它最值得学的设计思路叫约束而非自由:不让你现场发挥,而是给 6 套定死的主题,每套的标题、正文、引用、代码块、签名区全配好,你只管填内容。
这跟我自己写模板的路线正好相反,也正好是对的。同类文章排版气质稳定,不会今天极简明天花哨,读者刷到你主页也认得出是你。
03
PART
六套主题怎么选(这张表建议收藏)
THEME PICKER
摸鱼绿
#059669 · 教程、测评、清单、工具盘点
红白色系
#DC2626 · 深度分析、观点、力量感话题
石墨极简
#52525B · 科技评论、专业观点
留白禅意
#4A5D52 · 深度随笔、禅意生活
摸鱼票据
#059669 · 横评、工具对比(带星级评分)
橄榄手记
#1e1f23 配橙 · 案例复盘、深度评测
翻译成人话:
摸鱼绿
是默认款,卡片多、信息密度高。教程类直接上它,别犹豫。
红白
是观点款。你要骂人、要表态、要写“我为什么劝你别 XXX”,用它。
石墨极简
全灰阶,一个字不带颜色,适合装专业。
摸鱼票据
把内容做成门票的样子,横评类用它,星级评分组件直接抄。
橄榄手记
是编辑部内刊质感,案例复盘用它最像回事。
我自己是 AI 工具实操号,九成稿子摸鱼绿,偶尔观点稿切红白。
下面是 6 套主题的同一段内容实排小样,你直接看效果挑:
摸鱼绿 · 主色 #059669
01
PART
一个章节小标题
这是正文段落,关键词带下划线标记。
ollama run qwen2.5:7b
红白色系 · 主色 #DC2626
一个章节小标题
这是正文段落,关键词带下划线标记。
ollama run qwen2.5:7b
石墨极简 · 主色 #52525B
01
一个章节小标题
这是正文段落,关键词带下划线标记。
ollama run qwen2.5:7b
留白禅意 · 主色 #4A5D52
01 · CHAPTER ONE
一个章节小标题
这是正文段落,关键词带下划线标记。
ollama run qwen2.5:7b
摸鱼票据 · 主色 #059669
这是正文段落,关键词带下划线标记。
ollama run qwen2.5:7b
橄榄手记 · 墨黑 #1e1f23 配橙 #ed7b2f
01
PART
一个章节小标题
这是正文段落,关键词带下划线标记。
ollama run qwen2.5:7b
以上 6 套,是同一段内容在 6 套主题里的真实排版效果。挑一套顺眼的,命令抄走就能用。
04
PART
还不够挑?第二个开源项目有 34 套
34 MORE
觉得 6 套不够翻的,还有个叫 yituo-hub-studio 的,纯静态页面,零依赖零后端,浏览器打开就能用,不用装 Node 不用起服务。
它有两套主题库加一堆动效:
18 套基础主题
深海蓝、曙光橙、星穹紫、鎏金黑、青瓷、绯樱、摩卡、勃艮第、午夜靛蓝、芒果琥珀、湖水青、燕麦拿铁……
16 套高级排版
墨红社论、黑金刊读、松烟刊读、珊瑚杂志、瑞士信号、柑橘报告、蓝图网格、稻纸朱砂、暗夜编辑……
74 个动效组件
下载同样一条命令:
git clone --depth 1 https://github.com/roshanca/yituo-hub-studio.git
然后双击 index.html。选主题、填内容、导出 HTML,全在浏览器里完成。
我的用法是分工:日常稿走 gzh-design-skill,因为它有校验脚本,稳;要搞特殊视觉的选题,去 yituo 里挑一套。
🖼
待补素材
此处插入:图片(原文标记 [IMG1],无说明文字)
05
PART
实跑一遍,给你看真实数据
REAL RUN
光说不练假把式。我拿自己一篇稿《本地模型砍API费》做了实跑,摸鱼绿主题。
结果是这样:
校验脚本 0 ERROR / 0 WARNING,一次过,没返工
178 处文字包裹,脚本一个个数过,一处不漏
章节自动编号 01 到 05,末章用结语变体
每段关键词自动加绿色下划线,不用我手动标
5 处图片占位自动转成“待补素材”居中板块,没有编造图片链接
产物体积 35KB,粘进公众号直接能发
最让我意外的是那个校验脚本。它会一项项查:有没有用禁用标签、文字有没有被包裹、标点是不是半角、有没有渐变背景(渐变会触发公众号暗色模式弹窗)。
我手写 9 套模板从来没做过这种检查,所以篇篇踩坑。
06
PART
排版红线清单(建议截图存)
RED LINES
不管你用不用开源模板,这几条必须记住。我按踩坑频率排了序,越靠前越致命:
文字必须被包裹:最高频致命错,样式整片丢基本都是它
样式全内联:别用 style 标签,别用 class
代码块别用 white-space:pre:会把源码缩进和换行原样渲染成大左缩进加空行
图片不铺满:用 max-width:100%;height:auto,别用 width:100%,小图会被拉伸糊掉
渐变背景慎用:可能触发暗色模式弹窗,文字和卡片背景默认用纯色
强调要有层级:全文最强强调控制在 5 处以内,到处加粗等于没重点
章节编号按顺序:别跳号
半角标点要修:正文一律全角,代码块里保持原样
///
LAST
写在最后
THE END
排版这事,我绕的最大一个弯就是“自己写”。
前期直接使用别人写好的模板最方便了,自己左写右写真不哪有拿来主义快!
相信我,能用别人的轮子,就别自己造。
把省下来的时间写内容。内容才是读者真正收藏的东西,排版只是让内容被看见。
模板和命令都写在上面了,抄走就能用。
我是星界锐评,热衷于分享 AI 观察与干货。
如果你觉得今天这篇有收获,欢迎点赞、在看、转发三连,我们下篇见。
THANKS FOR READING















































































