夜雨聆风学习资料网

ARTICLE · 1195425

还在为公众号排版不好看发愁?点开! 下载安装即用

还在为公众号排版不好看发愁?点开! 下载安装即用
TUTORIAL · 排版实战2026.10

排版只能手工调?

6 套开源模板下载安装即用

一条命令直接抄

技能:gzh-design-skill · 6 套主题 · 自带校验脚本

星界锐评

TUTORIALTOOLS

📦 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 的话,下载就一条命令:

...bash

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

一个章节小标题

这是正文段落,关键词带下划线标记。

bash

ollama run qwen2.5:7b

红白色系 · 主色 #DC2626

01

一个章节小标题

这是正文段落,关键词带下划线标记。

bash

ollama run qwen2.5:7b

石墨极简 · 主色 #52525B

01

一个章节小标题

这是正文段落,关键词带下划线标记。

bash

ollama run qwen2.5:7b

留白禅意 · 主色 #4A5D52

01 · CHAPTER ONE

一个章节小标题

这是正文段落,关键词带下划线标记。

bash

ollama run qwen2.5:7b

摸鱼票据 · 主色 #059669

01
一个章节小标题

这是正文段落,关键词带下划线标记。

bash

ollama run qwen2.5:7b

橄榄手记 · 墨黑 #1e1f23 配橙 #ed7b2f

01

PART

一个章节小标题

这是正文段落,关键词带下划线标记。

bash

ollama run qwen2.5:7b

以上 6 套,是同一段内容在 6 套主题里的真实排版效果。挑一套顺眼的,命令抄走就能用。

04

PART

还不够挑?第二个开源项目有 34 套

34 MORE

觉得 6 套不够翻的,还有个叫 yituo-hub-studio 的,纯静态页面,零依赖零后端,浏览器打开就能用,不用装 Node 不用起服务。

它有两套主题库加一堆动效:

18 套基础主题

深海蓝、曙光橙、星穹紫、鎏金黑、青瓷、绯樱、摩卡、勃艮第、午夜靛蓝、芒果琥珀、湖水青、燕麦拿铁……

16 套高级排版

墨红社论、黑金刊读、松烟刊读、珊瑚杂志、瑞士信号、柑橘报告、蓝图网格、稻纸朱砂、暗夜编辑……

74 个动效组件

下载同样一条命令:

...bash

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费》做了实跑,摸鱼绿主题。

结果是这样:

1

校验脚本 0 ERROR / 0 WARNING,一次过,没返工

2

178 处文字包裹,脚本一个个数过,一处不漏

3

章节自动编号 01 到 05,末章用结语变体

4

每段关键词自动加绿色下划线,不用我手动标

5

5 处图片占位自动转成“待补素材”居中板块,没有编造图片链接

6

产物体积 35KB,粘进公众号直接能发

最让我意外的是那个校验脚本。它会一项项查:有没有用禁用标签、文字有没有被包裹、标点是不是半角、有没有渐变背景(渐变会触发公众号暗色模式弹窗)。

我手写 9 套模板从来没做过这种检查,所以篇篇踩坑。

06

PART

排版红线清单(建议截图存)

RED LINES

不管你用不用开源模板,这几条必须记住。我按踩坑频率排了序,越靠前越致命:

1

文字必须被包裹:最高频致命错,样式整片丢基本都是它

2

样式全内联:别用 style 标签,别用 class

3

代码块别用 white-space:pre:会把源码缩进和换行原样渲染成大左缩进加空行

4

图片不铺满:用 max-width:100%;height:auto,别用 width:100%,小图会被拉伸糊掉

5

渐变背景慎用:可能触发暗色模式弹窗,文字和卡片背景默认用纯色

6

强调要有层级:全文最强强调控制在 5 处以内,到处加粗等于没重点

7

章节编号按顺序:别跳号

8

半角标点要修:正文一律全角,代码块里保持原样

///

LAST

写在最后

THE END

排版这事,我绕的最大一个弯就是“自己写”。

前期直接使用别人写好的模板最方便了,自己左写右写真不哪有拿来主义快!

相信我,能用别人的轮子,就别自己造。

把省下来的时间写内容。内容才是读者真正收藏的东西,排版只是让内容被看见。

模板和命令都写在上面了,抄走就能用。

我是星界锐评,热衷于分享 AI 观察与干货。

如果你觉得今天这篇有收获,欢迎点赞、在看、转发三连,我们下篇见。

点赞
在看
转发

THANKS FOR READING

相关学习资料