le-wechat-article v1.5.1:版式基线落地——①开篇轻量化:四张封面卡(暖橙/摸鱼绿/摸鱼票据/橄榄)瘦身为导语条,去大字主标题/头图/公司落款(公众号后台已承担),补齐「导语与外标题错层」文案策略;②侧边距:微信 App 自带边距为主边距,HTML 每侧合计 ≤16px(容器/模块 ≤6px、卡片 10~14px、嵌套 ≤12px),全 7 主题合计 156 处收紧,正文列宽占屏 69~76%→80%+;③字号阶梯整体 +1(≥12px 全升 414 处:正文 15→16px、moyu 系 14→15px,≤11px 装饰微标不动);ENGINE 新增「版式基线」三铁律(v1.5.1)+ theme-generator 生成钩子,未来新主题强制合规;新增暖橙主题 theme-warm-orange(36 组件,含预览资产)并入主题库,SKILL.md 主题计数 6→7;topic-facts 补「超级 AI 妈妈」客户事实卡
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
>
|
||||
> **WeChat 兼容铁律**(本主题组件全部已按此写好,改动时必须遵守):
|
||||
> - 所有"装饰性空元素"(撕票虚线、头像占位框)**没有真实内容时整块删掉**,不留空 section
|
||||
> - 正文字号固定 `14px`、行高 `1.9`——这是本主题的排版铁律,不与其它主题共用字号
|
||||
> - 正文字号固定 `15px`、行高 `1.9`——这是本主题的排版铁律,不与其它主题共用字号
|
||||
> - 不要把 `font-size`/`border-bottom` 打在 `<strong>` 上,高亮样式统一挂在外层 `<span>` 上
|
||||
> - `writing-mode:vertical-rl`(票据侧边竖排字)在个别老旧客户端可能渲染异常,如遇异常可退化为横排小字,不影响其余结构
|
||||
|
||||
@@ -30,12 +30,12 @@
|
||||
代码背景: #F3F4F6
|
||||
代码字色: #1F2937
|
||||
品牌紫色(AI 品牌专用,如 Claude/Obsidian/Gemini):#7C3AED
|
||||
正文字号: 14px(本主题铁律,不可改)
|
||||
正文字号: 15px(本主题铁律,不可改)
|
||||
正文行高: 1.9
|
||||
全局行高: 1.75
|
||||
字间距: 0.5px
|
||||
最大宽度: 677px
|
||||
内容区边距: 0 20px(正文区块左右各 20px)
|
||||
内容区边距: 0 10px(正文区块左右各 10px)
|
||||
章节间距: margin-bottom: 32px
|
||||
```
|
||||
|
||||
@@ -57,12 +57,13 @@
|
||||
|
||||
## 组件 2 票据封面 ticket-cover
|
||||
|
||||
**用途**:文章开头,适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字,营造"一张门票/凭证"的仪式感。
|
||||
**用途**:文章开头,适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字,营造"一张门票/凭证"的仪式感。开篇轻量形态:不放大字主标题、不放头图,导语职能由副标题 + 简介段落承担。
|
||||
|
||||
> **文案策略(先读,比代码重要)**:公众号后台已承担标题、封面图、账号名,开篇不再重复。副标题与简介段落合起来是开篇导语,和外标题**两层错开**——外标题卖"为什么点开",导语卖"里面讲什么";已知外标题时**禁止原样复述**其核心关键词。
|
||||
|
||||
**可替换字段**:
|
||||
- `{{头部标签}}` → 如 `AI DESIGN TOOLS`
|
||||
- `{{大标题}}` → 如 `STITCH vs PENCIL`
|
||||
- `{{副标题}}` → 如 `两款免费 AI 设计工具深度对比`
|
||||
- `{{副标题}}` → 开篇导语上半句,如 `两款免费 AI 设计工具深度对比`
|
||||
- `{{作者名}}` / `{{作者身份}}`
|
||||
- `{{简介段落}}` → 支持内嵌组件 6 的行内强调样式
|
||||
- `{{#标签1/2/3}}`
|
||||
@@ -72,24 +73,23 @@
|
||||
|
||||
```html
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;margin-bottom:32px;">
|
||||
<section style="background:#059669;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="background:#059669;padding:12px 12px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="color:#fffef8;font-size:11px;letter-spacing:4px;font-weight:600;"><span leaf="">{{头部标签}}</span></section>
|
||||
<section style="color:#fffef8;font-size:11px;letter-spacing:2px;"><span leaf="">★★★★★</span></section>
|
||||
</section>
|
||||
<section style="display:flex;">
|
||||
<section style="flex:1;padding:24px 20px;border-right:2px dashed #A7F3D0;">
|
||||
<section style="font-size:24px;font-weight:900;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:4px;text-shadow:0.5px 0 0 #1a1a1a;"><span leaf="">{{大标题}}</span></section>
|
||||
<section style="font-size:14px;color:#666;letter-spacing:1px;margin-bottom:20px;"><span leaf="">{{副标题}}</span></section>
|
||||
<section style="flex:1;padding:18px 12px;border-right:2px dashed #A7F3D0;">
|
||||
<section style="font-size:15px;color:#1a1a1a;letter-spacing:1px;margin-bottom:20px;font-weight:700;"><span leaf="">{{副标题}}</span></section>
|
||||
<section style="border-top:1px dashed #A7F3D0;margin-bottom:16px;"><span leaf=""><br></span></section>
|
||||
<section style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
|
||||
<!-- 有作者头像图时插入 <img> 到下面这个圆框里;无头像时整块删除该 section -->
|
||||
<section style="width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #059669;flex-shrink:0;"><span leaf=""><br></span></section>
|
||||
<section>
|
||||
<section style="font-size:15px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
||||
<section style="font-size:12px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
||||
<section style="font-size:16px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
||||
<section style="font-size:13px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="font-size:13px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
|
||||
<section style="font-size:14px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
|
||||
<span leaf="">{{简介段落}}</span>
|
||||
</section>
|
||||
<section style="display:flex;gap:8px;margin-top:16px;">
|
||||
@@ -101,12 +101,12 @@
|
||||
<section style="width:48px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#F0FDF4;">
|
||||
<section style="text-align:center;">
|
||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">NO.</span></section>
|
||||
<section style="font-size:18px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:19px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
|
||||
</section>
|
||||
<section style="writing-mode:vertical-rl;font-size:9px;color:#888;letter-spacing:2px;"><span leaf="">{{竖排文字}}</span></section>
|
||||
<section style="text-align:center;">
|
||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">GRADE</span></section>
|
||||
<section style="font-size:14px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
|
||||
<section style="font-size:15px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -115,7 +115,7 @@
|
||||
<section style="padding:0 8px;font-size:10px;color:#A7F3D0;"><span leaf="">✂</span></section>
|
||||
<section style="flex:1;border-top:2px dashed #A7F3D0;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="padding:10px 20px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="padding:10px 12px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">VALID FOR ONE READ</span></section>
|
||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">ADMIT ONE 🎫</span></section>
|
||||
</section>
|
||||
@@ -131,11 +131,11 @@
|
||||
**可替换字段**:`{{编号}}` `{{标题}}` `{{副标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid #1a1a1a;">
|
||||
<section style="background:#059669;color:#fff;font-size:12px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:18px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
|
||||
<section style="font-size:12px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
|
||||
<section style="background:#059669;color:#fff;font-size:13px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:19px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
|
||||
<section style="font-size:13px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
|
||||
</section>
|
||||
|
||||
<!-- 本章节正文内容放在这里 -->
|
||||
@@ -152,10 +152,10 @@
|
||||
**可替换字段**:`{{小节标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
|
||||
<section style="width:4px;height:16px;background:#059669;"><span leaf=""><br></span></section>
|
||||
<section style="font-size:15px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
|
||||
<section style="font-size:16px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -169,8 +169,8 @@
|
||||
**可替换字段**:`{{正文内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<p style="font-size:14px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<p style="font-size:15px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -203,7 +203,7 @@
|
||||
### 6d. 代码标签 —— 技术名词/模型名/命令
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">{{文字}}</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
### 6e. 品牌紫色 —— Claude / Obsidian / Gemini 等 AI 品牌名专用
|
||||
@@ -223,8 +223,8 @@
|
||||
**可替换字段**:`{{case编号}}` `{{案例名称}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<p style="font-size:13px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<p style="font-size:14px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
||||
<span leaf="">case{{case编号}}: {{案例名称}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -237,7 +237,7 @@
|
||||
**用途**:包裹图片,票据纸感边框(米黄底 + 细灰边)。**规则**:`<img>` 标签及其 `src`/`data-src` 原封不动复制,只套外层容器。
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#fffef8;border:1px solid #eee;padding:6px;margin-bottom:0;">
|
||||
<figure style="margin:0;">
|
||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
@@ -255,9 +255,9 @@
|
||||
**可替换字段**:`{{前缀}}` `{{结论内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 16px;margin-bottom:0;">
|
||||
<p style="font-size:14px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 12px;margin-bottom:0;">
|
||||
<p style="font-size:15px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
||||
<span leaf="">{{前缀}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{结论内容}}</span></span>
|
||||
</p>
|
||||
@@ -274,11 +274,11 @@
|
||||
**可替换字段**:`{{序号}}` `{{小标题}}` `{{描述}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#fffef8;border:1px solid #eee;margin-bottom:12px;">
|
||||
<section style="display:flex;align-items:stretch;">
|
||||
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;"><span leaf="">{{序号}}</span></section>
|
||||
<section style="flex:1;padding:12px 16px;font-size:13px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
|
||||
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;"><span leaf="">{{序号}}</span></section>
|
||||
<section style="flex:1;padding:12px 12px;font-size:14px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
|
||||
<span style="font-weight:600;color:#1a1a1a;"><span leaf="">{{小标题}}</span></span>
|
||||
<span leaf="">:{{描述}}</span>
|
||||
</section>
|
||||
@@ -298,21 +298,21 @@
|
||||
**可替换字段**:`{{金句前半}}` `{{大数字}}`(可选)`{{金句后半}}` `{{补充说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;padding:20px;margin-bottom:0;">
|
||||
<p style="font-size:15px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
|
||||
<p style="font-size:16px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
|
||||
<span leaf="">{{金句前半}}</span>
|
||||
<span style="color:#059669;font-size:24px;"><span leaf="">{{大数字}}</span></span>
|
||||
<span style="color:#059669;font-size:25px;"><span leaf="">{{大数字}}</span></span>
|
||||
<span leaf="">{{金句后半}}</span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#555;line-height:1.8;margin:0;text-align:justify;">
|
||||
<p style="font-size:15px;color:#555;line-height:1.8;margin:0;text-align:justify;">
|
||||
<span leaf="">{{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
无大数字时去掉中间那个 `font-size:24px` 的 `<span>`,整句金句合并放第一行 `<p>` 即可。
|
||||
无大数字时去掉中间那个 `font-size:25px` 的 `<span>`,整句金句合并放第一行 `<p>` 即可。
|
||||
|
||||
---
|
||||
|
||||
@@ -323,7 +323,7 @@
|
||||
**可替换字段**:`{{#标签}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签1}}</span></section>
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签2}}</span></section>
|
||||
@@ -344,8 +344,8 @@
|
||||
|
||||
```html
|
||||
<section style="padding:0 0 32px;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:24px 20px;text-align:center;">
|
||||
<p style="font-size:13px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:22px 14px;text-align:center;">
|
||||
<p style="font-size:14px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
||||
<span leaf="">{{互动文案}}</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||
@@ -384,7 +384,7 @@
|
||||
**用途**:文章最末尾收尾,放在外层容器(组件 1)内最后,footer-cta 之后。
|
||||
|
||||
```html
|
||||
<p style="text-align:center;color:#D1D5DB;font-size:14px;margin:24px 0 0 0;">
|
||||
<p style="text-align:center;color:#D1D5DB;font-size:15px;margin:24px 0 0 0;">
|
||||
<span leaf="">/</span>
|
||||
</p>
|
||||
```
|
||||
@@ -477,7 +477,7 @@
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置;票据封面大标题从中提炼 |
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置;开篇导语(副标题+简介段落)从中提炼,视角错开 |
|
||||
| 文章开头 `> 引言` | 并入封面简介段落 | 票据封面无独立引言卡组件 |
|
||||
| `## 章节标题` | 组件 3 chapter-title | 编号 01/02/03… |
|
||||
| `### 子标题` | 组件 4 subtitle | 左竖条小标题 |
|
||||
|
||||
Reference in New Issue
Block a user