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:
leroy
@@ -12,7 +12,7 @@
|
||||
> - 所有"装饰性空元素"（圆点、渐变分割线、装饰短横、时间线竖线）**必须在内部放 `<span leaf=""><br></span>` 占位**，否则微信会剥掉样式
|
||||
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**，也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法：拆成多个 `<p>`，每个 `<p>` 只有一个字号；高亮样式统一挂在外层 `<span>` 上
|
||||
> - 不用 `position:absolute` 做划线/高亮，删除线用 `text-decoration:line-through`
|
||||
> - 结构化区域（如封面右侧图片槽位）没有内容时**整块删掉**，不留空 section
|
||||
> - 结构化区域（如作者头像、图片说明）没有内容时**整块删掉**，不留空 section
|
||||
|
||||
---
|
||||
|
||||
@@ -39,12 +39,12 @@
|
||||
浅边框： #E5E7EB
|
||||
浅灰背景： #F3F4F6
|
||||
极浅灰： #F9FAFB
|
||||
正文字号： 14px（不可改）
|
||||
正文字号： 15px（不可改）
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 20px（模块左右各 20px）
|
||||
内容区边距： 0 12px（卡片通栏为主，卡片侧边 12px，封面卡外边距 8px）
|
||||
```
|
||||
|
||||
字体栈：`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||
@@ -63,93 +63,35 @@
|
||||
|
||||
---
|
||||
|
||||
## 组件 2 封面 cover-breaking（杂志快讯封面）
|
||||
## 组件 2 封面 cover-breaking（快讯导语条）
|
||||
|
||||
> **文案策略（先读，比代码重要）**：
|
||||
> - 封面标题和公众号外标题是**两层标题**，必须视角错开——外标题卖"为什么点开"，封面卖"里面讲什么"
|
||||
> - 已知外标题时，主标题**禁止原样复述**其核心关键词（产品名/功能名/场景词）；未知外标题时从五个视角（**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**）自选一个直出，不停下来问
|
||||
> - 产品名/功能名只允许出现在**底部品牌条**或**副标题关键词条**，不出现在大字主标题
|
||||
> - 公众号后台已承担标题、封面图、账号名，开篇不再重复——本组件**不放大字主标题、不放头图**；开篇导语和外标题是**两层**，视角错开——外标题卖"为什么点开"，导语卖"里面讲什么、读完得到什么"
|
||||
> - 已知外标题时，导语**禁止原样复述**其核心关键词（产品名/功能名/场景词）；未知外标题时从五个视角（**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**）自选一个直出，不停下来问
|
||||
> - 认知翻转签名保留：划线旧认知在上，导语一句话给出新认知
|
||||
> - 产品名/功能名只允许出现在**底部品牌条**
|
||||
> - 仅当用户要求"帮我定封面方向"时才列 3-5 个方向让用户选
|
||||
|
||||
**有右侧图片版**：
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 32px;background:#fff;border:1.5px solid rgba(5,150,105,0.15);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);width:100%;">
|
||||
<section style="padding:32px 28px 28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
|
||||
<section style="padding:20px 12px 18px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
|
||||
<span style="width:6px;height:6px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
|
||||
<span style="font-size:11px;font-weight:700;letter-spacing:3px;color:#059669;"><span leaf="">{{顶部标签}}</span></span>
|
||||
<section style="flex:1;height:1px;overflow:hidden;background:linear-gradient(to right,rgba(5,150,105,0.12),transparent);"><span leaf=""><br></span></section>
|
||||
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;gap:20px;">
|
||||
<section style="flex:1;min-width:0;">
|
||||
<p style="font-size:15px;color:#D1D5DB;margin:0 0 6px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||
<span leaf="">{{划线旧认知}}</span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#111827;margin:0;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行1}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{绿色高亮词}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#059669;margin:0 0 16px;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行2}}</span>
|
||||
</p>
|
||||
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">{{副标题关键词}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="flex-shrink:0;width:110px;height:110px;border-radius:16px;overflow:hidden;border:1px solid rgba(5,150,105,0.1);box-shadow:0 4px 12px rgba(0,0,0,0.06);">
|
||||
<!-- 封面右侧图片，保留原图代码 -->
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<p style="font-size:12px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
|
||||
<span leaf="">{{底部左侧文字}}</span>
|
||||
<p style="font-size:16px;color:#D1D5DB;margin:0 0 10px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||
<span leaf="">{{划线旧认知}}</span>
|
||||
</p>
|
||||
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
|
||||
<span leaf=""><br></span></section>
|
||||
<p style="font-size:14px;color:#6B7280;margin:0;line-height:1.8;letter-spacing:0.5px;">
|
||||
<span leaf="">{{开篇导语}}</span>
|
||||
</p>
|
||||
<section style="display:flex;gap:4px;">
|
||||
<span style="background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:8px;color:#fff;font-weight:600;"><span leaf="">{{标签1}}</span></span>
|
||||
<span style="background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:8px;color:#fff;font-weight:600;"><span leaf="">{{标签2}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
**无右侧图片版**（文章没有封面头像图时用这个，标题区满宽）：
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 32px;background:#fff;border:1.5px solid rgba(5,150,105,0.15);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);width:100%;">
|
||||
<section style="padding:32px 28px 28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
|
||||
<span style="width:6px;height:6px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
|
||||
<span style="font-size:11px;font-weight:700;letter-spacing:3px;color:#059669;"><span leaf="">{{顶部标签}}</span></span>
|
||||
<section style="flex:1;height:1px;overflow:hidden;background:linear-gradient(to right,rgba(5,150,105,0.12),transparent);"><span leaf=""><br></span></section>
|
||||
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
|
||||
</section>
|
||||
<section>
|
||||
<p style="font-size:15px;color:#D1D5DB;margin:0 0 6px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||
<span leaf="">{{划线旧认知}}</span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#111827;margin:0;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行1}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{绿色高亮词}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#059669;margin:0 0 16px;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行2}}</span>
|
||||
</p>
|
||||
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">{{副标题关键词}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<p style="font-size:12px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
|
||||
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<p style="font-size:13px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
|
||||
<span leaf="">{{底部左侧文字}}</span>
|
||||
</p>
|
||||
<section style="display:flex;gap:4px;">
|
||||
@@ -164,10 +106,8 @@
|
||||
- `{{顶部标签}}` → 如 `TUTORIAL · 品牌实战`、`AI VIDEO · 实战案例`、`BREAKING`（建议 10-15 字符以内）
|
||||
- `{{日期}}` → 如 `2026.07`
|
||||
- `{{划线旧认知}}` → 被颠覆的旧观念（例：`MV要专业团队？`）
|
||||
- `{{主标题行1}}` → 标题前半段（黑色）；`{{绿色高亮词}}` → 标题中的绿色强调词；`{{主标题行2}}` → 标题第二行（全绿色）
|
||||
- `{{副标题关键词}}` → 简短关键词，用 `·` 分隔
|
||||
- `{{开篇导语}}` → 一句话给出新认知/本篇看点，与外标题错开视角
|
||||
- `{{底部左侧文字}}` → 产品/品牌名；`{{标签1/2}}` → 底部小标签
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 目录 toc-scroll（横向滚动目录）
|
||||
@@ -175,7 +115,7 @@
|
||||
2 个及以上章节时生成。第一个卡片绿色高亮，最后一个固定为"写在最后"（PART ///）。
|
||||
|
||||
```html
|
||||
<section style="margin:0 20px 32px;">
|
||||
<section style="margin:0 8px 32px;">
|
||||
<section style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;text-transform:uppercase;letter-spacing:2px;font-weight:600;">
|
||||
<span leaf="">📦 {{N}} Parts + Conclusion</span>
|
||||
@@ -190,7 +130,7 @@
|
||||
<p style="font-size:9px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:1px;margin:0 0 5px;">
|
||||
<span leaf="">PART 01</span>
|
||||
</p>
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<span leaf="">{{章节名}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.7);margin:0;">
|
||||
@@ -202,7 +142,7 @@
|
||||
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
|
||||
<span leaf="">PART 02</span>
|
||||
</p>
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{章节名}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||||
@@ -214,7 +154,7 @@
|
||||
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
|
||||
<span leaf="">PART ///</span>
|
||||
</p>
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">写在最后</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||||
@@ -232,10 +172,10 @@
|
||||
第一个章节用 `margin-top:16px`，后续章节用 `margin-top:48px`。最后一章编号用 `///`，PART 改为 `LAST`。
|
||||
|
||||
```html
|
||||
<section style="margin-top:48px;margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-top:48px;margin-bottom:32px;padding:0 12px;">
|
||||
<section style="display:flex;align-items:center;gap:16px;margin-bottom:24px;">
|
||||
<section style="text-align:center;flex-shrink:0;">
|
||||
<p style="margin:0;font-size:28px;font-weight:900;color:#059669;line-height:1;letter-spacing:-2px;">
|
||||
<p style="margin:0;font-size:29px;font-weight:900;color:#059669;line-height:1;letter-spacing:-2px;">
|
||||
<span leaf="">{{01}}</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:8px;font-weight:700;color:#D1D5DB;letter-spacing:2px;">
|
||||
@@ -244,7 +184,7 @@
|
||||
</section>
|
||||
<span style="width:1px;height:36px;background:#E5E7EB;flex-shrink:0;"><span leaf=""><br></span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 1px;font-size:17px;font-weight:900;color:#111827;letter-spacing:0.3px;">
|
||||
<p style="margin:0 0 1px;font-size:18px;font-weight:900;color:#111827;letter-spacing:0.3px;">
|
||||
<span leaf="">{{中文标题}}</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1.5px;">
|
||||
@@ -263,7 +203,7 @@
|
||||
## 组件 5 正文段落 paragraph
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:16px;font-size:14px;line-height:1.9;text-align:justify;">
|
||||
<p style="margin-bottom:16px;font-size:15px;line-height:1.9;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -313,19 +253,19 @@
|
||||
### 6g. 代码标签（行内代码）
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">code</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">code</span></span>
|
||||
```
|
||||
|
||||
### 6h. 获取方式标签（黄色背景）
|
||||
|
||||
```html
|
||||
<span style="background:#FDE68A;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:700;"><span leaf="">「关键词」</span></span>
|
||||
<span style="background:#FDE68A;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:700;"><span leaf="">「关键词」</span></span>
|
||||
```
|
||||
|
||||
### 6i. 删除线灰色（旧的/被淘汰的概念）
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#6B7280;padding:2px 6px;border-radius:4px;font-size:13px;text-decoration:line-through;font-weight:600;"><span leaf="">旧词</span></span>
|
||||
<span style="background:#F3F4F6;color:#6B7280;padding:2px 6px;border-radius:4px;font-size:14px;text-decoration:line-through;font-weight:600;"><span leaf="">旧词</span></span>
|
||||
```
|
||||
|
||||
**使用原则**：
|
||||
@@ -346,11 +286,11 @@
|
||||
<section style="margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">STEP 01</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{步骤标题}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
<p style="font-size:14px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
|
||||
{{步骤内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -362,7 +302,7 @@
|
||||
<section style="margin-bottom:28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#E5E7EB;color:#6B7280;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">CASE 01</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{案例标题}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
@@ -376,7 +316,7 @@
|
||||
<section style="margin-bottom:28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">SKILL 1</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{名称}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
@@ -392,18 +332,18 @@
|
||||
### 8a. prompt-block（PROMPT 展示块）
|
||||
|
||||
```html
|
||||
<p style="font-size:13px;color:#374151;margin:0 0 16px;line-height:1.8;">
|
||||
<p style="font-size:14px;color:#374151;margin:0 0 16px;line-height:1.8;">
|
||||
<span style="display:inline-block;background:#059669;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:3px;margin-right:6px;vertical-align:middle;letter-spacing:0.5px;"><span leaf="">PROMPT</span></span>
|
||||
<span style="font-size:12px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
|
||||
<span style="font-size:13px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 8b. cmd-block（CMD 单行命令块）
|
||||
|
||||
```html
|
||||
<p style="font-size:13px;color:#374151;margin:0 0 24px;line-height:1.8;">
|
||||
<p style="font-size:14px;color:#374151;margin:0 0 24px;line-height:1.8;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:3px;margin-right:6px;vertical-align:middle;letter-spacing:0.5px;"><span leaf="">CMD</span></span>
|
||||
<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>
|
||||
</p>
|
||||
```
|
||||
|
||||
@@ -420,8 +360,8 @@
|
||||
所有引用、补充说明的**默认组件**（虚线框是本主题的风格特征，仅此组件与 9b 保留 dashed）：
|
||||
|
||||
```html
|
||||
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 16px;margin-bottom:24px;text-align:justify;">
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.6;">
|
||||
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 12px;margin-bottom:24px;text-align:justify;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.6;">
|
||||
{{引用内容，可嵌入绿色加粗等内联样式}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -434,9 +374,9 @@
|
||||
单行版（只有主金句）：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
|
||||
<p style="margin:0;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -444,12 +384,12 @@
|
||||
带前缀引导语版（两段式）：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:12px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<span leaf="">{{引导语}}</span>
|
||||
</p>
|
||||
<p style="margin:0;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -457,11 +397,11 @@
|
||||
带下方补充说明版：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
|
||||
<p style="margin:0 0 6px;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<p style="font-size:14px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<span leaf="">{{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -470,7 +410,7 @@
|
||||
### 9c. subtitle-highlight（小节黄色下划线标题）
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;font-weight:900;color:#111827;margin-bottom:16px;">
|
||||
<p style="font-size:16px;font-weight:900;color:#111827;margin-bottom:16px;">
|
||||
<span style="background:linear-gradient(180deg,transparent 65%,#FDE68A 65%);padding:0 4px;"><span leaf="">{{小节标题}}</span></span>
|
||||
</p>
|
||||
```
|
||||
@@ -480,7 +420,7 @@
|
||||
### 9d. center-divider（居中金句分隔）
|
||||
|
||||
```html
|
||||
<p style="font-size:14px;margin-bottom:20px;text-align:center;color:#059669;font-weight:700;letter-spacing:1px;border-top:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;padding:12px 0;">
|
||||
<p style="font-size:15px;margin-bottom:20px;text-align:center;color:#059669;font-weight:700;letter-spacing:1px;border-top:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;padding:12px 0;">
|
||||
<span leaf="">{{居中金句}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -493,10 +433,10 @@
|
||||
|
||||
```html
|
||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||||
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<span style="color:rgb(255,76,0);"><span leaf="">！踩坑提示 🕳</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
|
||||
<span style="color:rgb(136,136,136);font-weight:bold;"><span leaf="">{{提示内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -508,10 +448,10 @@
|
||||
|
||||
```html
|
||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||||
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<span style="color:#059669;"><span leaf="">✦ {{提示标题}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
|
||||
{{提示内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -520,8 +460,8 @@
|
||||
### 10c. yellow-warning（黄色警告框）
|
||||
|
||||
```html
|
||||
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 16px;margin-bottom:20px;">
|
||||
<p style="font-size:13px;color:#92400E;margin:0;font-weight:700;">
|
||||
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 12px;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#92400E;margin:0;font-weight:700;">
|
||||
<span leaf="">{{警告内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -530,8 +470,8 @@
|
||||
### 10d. green-info（绿色信息框）
|
||||
|
||||
```html
|
||||
<section style="background:#F0FDF4;padding:12px 16px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
|
||||
<section style="background:#F0FDF4;padding:12px 12px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
|
||||
{{信息内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -548,7 +488,7 @@
|
||||
```html
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:13px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{列表项文字}}</span></span>
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{列表项文字}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -558,9 +498,9 @@
|
||||
```html
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:13px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{标题}}</span></span>
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{标题}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||||
<p style="font-size:14px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||||
<span leaf="">{{描述内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -572,29 +512,29 @@
|
||||
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:stretch;justify-content:center;gap:6px;">
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:linear-gradient(135deg,#059669,#10B981);border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<span leaf="">{{步骤1标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
||||
<span leaf="">{{步骤1描述}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:14px;padding:0 4px;">
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:15px;padding:0 4px;">
|
||||
<span leaf="">→</span>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{步骤2标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<span leaf="">{{步骤2描述}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:14px;padding:0 4px;">
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:15px;padding:0 4px;">
|
||||
<span leaf="">→</span>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #A7F3D0;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#059669;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#059669;margin:0 0 3px;">
|
||||
<span leaf="">{{步骤3标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
@@ -602,7 +542,7 @@
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
|
||||
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
|
||||
<span leaf="">{{底部说明文字}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -616,7 +556,7 @@
|
||||
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:28px;">
|
||||
<section style="display:flex;align-items:stretch;justify-content:center;gap:6px;">
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:linear-gradient(135deg,#059669,#10B981);border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<span leaf="">{{卡片1标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
||||
@@ -624,7 +564,7 @@
|
||||
</p>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{卡片2标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
@@ -632,7 +572,7 @@
|
||||
</p>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{卡片3标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
@@ -658,14 +598,14 @@
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">{{CASE 01}}</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{标题}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
<p style="font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1px;margin:0 0 12px;">
|
||||
<span leaf="">{{英文副标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:14px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
|
||||
{{内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -679,8 +619,8 @@
|
||||
基本版：
|
||||
|
||||
```html
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;">
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.8;">
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 12px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||
{{说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -689,12 +629,12 @@
|
||||
居中高亮版（同 oneliner-card 规则：拆多个 `<p>`，不要 `<strong>` 带 font-size/border-bottom）：
|
||||
|
||||
```html
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 12px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:14px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<span leaf="">{{小字}}</span>
|
||||
</p>
|
||||
<p style="margin:0;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -705,7 +645,7 @@
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:13px;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="background:#059669;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题1}}</span></th>
|
||||
@@ -737,19 +677,19 @@
|
||||
<section style="margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<span leaf="">{{列表项内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<span leaf="">{{列表项内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<span leaf="">{{列表项内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -793,8 +733,8 @@
|
||||
固定文案照写；SVG 图标微信支持，原样保留。
|
||||
|
||||
```html
|
||||
<section style="background:radial-gradient(circle at center,#F9FAFB 0%,#FFFFFF 100%);border:1px solid #E5E7EB;border-radius:16px;padding:32px 20px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin:0 0 24px;">
|
||||
<p style="font-size:13px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
|
||||
<section style="background:radial-gradient(circle at center,#F9FAFB 0%,#FFFFFF 100%);border:1px solid #E5E7EB;border-radius:16px;padding:28px 12px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin:0 0 24px;">
|
||||
<p style="font-size:14px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
|
||||
<span leaf="">既然看到这里了，如果觉得有用，随手点个赞、在看、转发三连吧。</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||
@@ -842,7 +782,7 @@
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;color:#374151;line-height:1.75;letter-spacing:0.5px;overflow-x:hidden;">
|
||||
|
||||
<!-- 1. 封面（组件2 cover-breaking，有图/无图二选一） -->
|
||||
<!-- 1. 开篇导语条（组件2 cover-breaking）——划线旧认知 + 一句话导语 -->
|
||||
|
||||
<!-- 2. 目录（组件3 toc-scroll，2+ 章节时生成，紧跟封面之下） -->
|
||||
|
||||
@@ -905,7 +845,7 @@
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；封面主标题从中提炼（视角错开） |
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句（视角错开，不复述关键词） |
|
||||
| 文章开头 `> 引言` | 组件 9b oneliner-card 或并入封面副标题 | 开头金句 |
|
||||
| `## 章节标题` | 组件 4 chapter-title | PART 01/02/03…，末章 /// + LAST |
|
||||
| `### 子标题` | 组件 9c subtitle-highlight | 黄色下划线小节标题 |
|
||||
|
||||
Reference in New Issue
Block a user