877 lines
40 KiB
Markdown
877 lines
40 KiB
Markdown
# 公众号排版组件库 —— 摸鱼绿
|
||
|
||
> **使用说明**：本组件库为「摸鱼绿」主题（移植自摸鱼小李绿色杂志风），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||
>
|
||
> **设计风格**：绿色杂志风，卡片丰富、信息密度高。emerald 主色 + 黄色高亮点睛、杂志快讯封面、横向滚动目录、标签化章节。适合教程、测评、清单、工具盘点类文章。
|
||
>
|
||
> **公众号平台限制须知**：
|
||
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id、`position:fixed/absolute`、`float`、`@media`/`@keyframes`、`display:grid`
|
||
> - ✅ 支持内联 `style`、`display:flex`（有限）、`linear-gradient`、`border-radius`、`box-shadow`、`<section>/<p>/<span>/<strong>/<img>` 等基础标签
|
||
>
|
||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||
> - 所有"装饰性空元素"（圆点、渐变分割线、装饰短横、时间线竖线）**必须在内部放 `<span leaf=""><br></span>` 占位**，否则微信会剥掉样式
|
||
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**，也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法：拆成多个 `<p>`，每个 `<p>` 只有一个字号；高亮样式统一挂在外层 `<span>` 上
|
||
> - 不用 `position:absolute` 做划线/高亮，删除线用 `text-decoration:line-through`
|
||
> - 结构化区域（如作者头像、图片说明）没有内容时**整块删掉**，不留空 section
|
||
|
||
---
|
||
|
||
## 设计变量速查表
|
||
|
||
```
|
||
主色调： #059669（emerald-600）
|
||
辅色： #10B981（emerald-500）
|
||
浅绿装饰： #34D399 / #6EE7B7 / #A7F3D0
|
||
浅绿边框： #BBF7D0
|
||
浅绿背景： #ECFDF5 / #F0FDF4
|
||
黄色高亮： #FDE68A
|
||
黄色背景（警告）：#FFFBEB
|
||
黄色文字（警告）：#92400E
|
||
红色下划线： #FECACA（对比/否定专用）
|
||
警告橙色： rgb(255,76,0)
|
||
警告灰色： rgb(136,136,136)
|
||
标题色： #111827
|
||
正文色： #374151
|
||
次要文字： #4B5563
|
||
注释/标签： #6B7280
|
||
辅助文字： #9CA3AF
|
||
分隔线： #D1D5DB
|
||
浅边框： #E5E7EB
|
||
浅灰背景： #F3F4F6
|
||
极浅灰： #F9FAFB
|
||
正文字号： 15px（不可改）
|
||
正文行高： 1.9
|
||
全局行高： 1.75
|
||
字间距： 0.5px
|
||
最大宽度： 677px
|
||
内容区边距： 0 12px（卡片通栏为主，卡片侧边 12px，封面卡外边距 8px）
|
||
```
|
||
|
||
字体栈：`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||
|
||
---
|
||
|
||
## 组件 1 全局容器
|
||
|
||
```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;">
|
||
|
||
<!-- 所有组件放在这里 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 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: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>
|
||
<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>
|
||
<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;">
|
||
<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>
|
||
```
|
||
|
||
**可替换元素**：
|
||
- `{{顶部标签}}` → 如 `TUTORIAL · 品牌实战`、`AI VIDEO · 实战案例`、`BREAKING`（建议 10-15 字符以内）
|
||
- `{{日期}}` → 如 `2026.07`
|
||
- `{{划线旧认知}}` → 被颠覆的旧观念（例：`MV要专业团队？`）
|
||
- `{{开篇导语}}` → 一句话给出新认知/本篇看点，与外标题错开视角
|
||
- `{{底部左侧文字}}` → 产品/品牌名；`{{标签1/2}}` → 底部小标签
|
||
---
|
||
|
||
## 组件 3 目录 toc-scroll（横向滚动目录）
|
||
|
||
2 个及以上章节时生成。第一个卡片绿色高亮，最后一个固定为"写在最后"（PART ///）。
|
||
|
||
```html
|
||
<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>
|
||
</p>
|
||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||
<span leaf="">👉 滑动</span>
|
||
</p>
|
||
</section>
|
||
<section style="overflow-x:scroll;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:8px;">
|
||
<!-- 第一个（当前高亮，绿色背景） -->
|
||
<section style="display:inline-block;white-space:normal;vertical-align:top;width:110px;background:linear-gradient(135deg,#059669,#10B981);border-radius:12px;padding:12px;margin-right:8px;">
|
||
<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: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;">
|
||
<span leaf="">{{副标题}}</span>
|
||
</p>
|
||
</section>
|
||
<!-- 后续章节（白色背景），按需重复 -->
|
||
<section style="display:inline-block;white-space:normal;vertical-align:top;width:110px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:12px;margin-right:8px;box-shadow:0 2px 6px rgba(0,0,0,0.04);">
|
||
<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:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||
<span leaf="">{{章节名}}</span>
|
||
</p>
|
||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||
<span leaf="">{{副标题}}</span>
|
||
</p>
|
||
</section>
|
||
<!-- 最后一个（写在最后） -->
|
||
<section style="display:inline-block;white-space:normal;vertical-align:top;width:110px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,0.04);">
|
||
<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:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||
<span leaf="">写在最后</span>
|
||
</p>
|
||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||
<span leaf="">{{副标题}}</span>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 4 章节标题 chapter-title
|
||
|
||
第一个章节用 `margin-top:16px`，后续章节用 `margin-top:48px`。最后一章编号用 `///`，PART 改为 `LAST`。
|
||
|
||
```html
|
||
<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: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;">
|
||
<span leaf="">PART</span>
|
||
</p>
|
||
</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: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;">
|
||
<span leaf="">{{ENGLISH · 英文副标题}}</span>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
|
||
<!-- 本章节正文内容放在这里 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 5 正文段落 paragraph
|
||
|
||
```html
|
||
<p style="margin-bottom:16px;font-size:15px;line-height:1.9;text-align:justify;">
|
||
<span leaf="">{{正文内容}}</span>
|
||
</p>
|
||
```
|
||
|
||
段间距较大时用 `margin-bottom:24px`。
|
||
|
||
---
|
||
|
||
## 组件 6 行内样式（9 种 + 使用原则）
|
||
|
||
### 6a. 绿色加粗（核心概念、关键结论、品牌名/产品名）
|
||
|
||
```html
|
||
<strong style="color:#059669;"><span leaf="">文字</span></strong>
|
||
```
|
||
|
||
### 6b. 绿色背景标签
|
||
|
||
```html
|
||
<strong style="color:#059669;background:rgba(5,150,105,0.1);padding:0 4px;border-radius:2px;"><span leaf="">文字</span></strong>
|
||
```
|
||
|
||
### 6c. 黄色渐变高亮（一段话中最想让读者注意的短语，每段不超过 1-2 处）
|
||
|
||
```html
|
||
<span style="background:linear-gradient(120deg,#FDE68A 0%,rgba(255,255,255,0) 100%);padding:0 4px;border-radius:2px;font-weight:600;color:#111827;"><span leaf="">文字</span></span>
|
||
```
|
||
|
||
### 6d. 黄色底部高亮（下划线效果）
|
||
|
||
```html
|
||
<span style="color:#111827;font-weight:bold;border-bottom:3px solid #FDE68A;"><span leaf="">文字</span></span>
|
||
```
|
||
|
||
### 6e. 绿色下划线（次要强调，**正文关键词的默认标记**）
|
||
|
||
```html
|
||
<span style="border-bottom:2px solid #A7F3D0;font-weight:600;"><span leaf="">文字</span></span>
|
||
```
|
||
|
||
### 6f. 红色下划线（对比、否定、需要注意的内容）
|
||
|
||
```html
|
||
<span style="border-bottom:2px solid #FECACA;"><span leaf="">文字</span></span>
|
||
```
|
||
|
||
### 6g. 代码标签（行内代码）
|
||
|
||
```html
|
||
<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:14px;font-weight:700;"><span leaf="">「关键词」</span></span>
|
||
```
|
||
|
||
### 6i. 删除线灰色（旧的/被淘汰的概念）
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
**使用原则**：
|
||
1. 绿色加粗用于核心概念、关键结论、品牌名/产品名
|
||
2. 黄色高亮每段不超过 1-2 处
|
||
3. 绿色下划线用于次要强调（正文关键词逐段标记用它）
|
||
4. 红色下划线用于对比、否定
|
||
5. 删除线灰色用于被淘汰的概念
|
||
6. 一段文字中不要同时使用超过 2 种高亮效果
|
||
|
||
---
|
||
|
||
## 组件 7 内容标签组（STEP / CASE / SKILL / TOOL）
|
||
|
||
### 7a. step-label（STEP 步骤标签）
|
||
|
||
```html
|
||
<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:16px;font-weight:800;color:#111827;margin:0;">
|
||
<span leaf="">{{步骤标题}}</span>
|
||
</h4>
|
||
</section>
|
||
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
|
||
{{步骤内容}}
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 7b. case-label（CASE 案例标签）
|
||
|
||
```html
|
||
<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:16px;font-weight:800;color:#111827;margin:0;">
|
||
<span leaf="">{{案例标题}}</span>
|
||
</h4>
|
||
</section>
|
||
<!-- 案例内容 -->
|
||
</section>
|
||
```
|
||
|
||
### 7c. skill-label / tool-label（编号标签）
|
||
|
||
```html
|
||
<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:16px;font-weight:800;color:#111827;margin:0;">
|
||
<span leaf="">{{名称}}</span>
|
||
</h4>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
`SKILL 1` 可替换为 `TOOL 摄像机`、`TOOL 打光` 等。
|
||
|
||
---
|
||
|
||
## 组件 8 代码/命令/Prompt
|
||
|
||
### 8a. prompt-block（PROMPT 展示块）
|
||
|
||
```html
|
||
<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:13px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
|
||
</p>
|
||
```
|
||
|
||
### 8b. cmd-block（CMD 单行命令块）
|
||
|
||
```html
|
||
<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:14px;font-weight:600;"><span leaf="">{{命令内容}}</span></span>
|
||
</p>
|
||
```
|
||
|
||
### 8c. 多行代码块 → 用通用增量库
|
||
|
||
多行代码块**不设主题专属组件**，直接用 `common-components.md` 的 1a 深色代码块（每行一个 `<p style="margin:0">`，禁 `white-space:pre`）；浅色场景用 1b 并把左竖条换成 `#059669`。
|
||
|
||
---
|
||
|
||
## 组件 9 引用与亮点
|
||
|
||
### 9a. quote-box（灰色虚线引用框）
|
||
|
||
所有引用、补充说明的**默认组件**（虚线框是本主题的风格特征，仅此组件与 9b 保留 dashed）：
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
### 9b. oneliner-card（一句话亮点卡片）
|
||
|
||
> 兼容性关键规则：**不要把 `font-size` 打在 `<strong>` 上**，不要在同一个 `<p>` 里混多个字号；高亮样式统一挂在外层 `<span>` 上。
|
||
|
||
单行版（只有主金句）：
|
||
|
||
```html
|
||
<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:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
带前缀引导语版（两段式）：
|
||
|
||
```html
|
||
<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:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
带下方补充说明版：
|
||
|
||
```html
|
||
<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:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
|
||
</p>
|
||
<p style="font-size:14px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||
<span leaf="">{{补充说明}}</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 9c. subtitle-highlight（小节黄色下划线标题）
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
可加 `margin-top:32px` 增加上间距。
|
||
|
||
### 9d. center-divider（居中金句分隔）
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 10 提示与信息
|
||
|
||
### 10a. warn-tip（踩坑提示）
|
||
|
||
```html
|
||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||
<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: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>
|
||
```
|
||
|
||
标题可改为 `！真正的战场 🕳`、`！目前最大的槽点 🕳` 等。
|
||
|
||
### 10b. green-tip（绿色提示）
|
||
|
||
```html
|
||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||
<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:14px;color:#374151;margin:0;line-height:1.7;">
|
||
{{提示内容}}
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 10c. yellow-warning（黄色警告框）
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
### 10d. green-info（绿色信息框）
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 11 布局组件
|
||
|
||
### 11a. pill-list（绿色胶囊列表）
|
||
|
||
基本版：
|
||
|
||
```html
|
||
<section style="margin-bottom:14px;">
|
||
<p style="margin:0 0 6px;">
|
||
<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>
|
||
```
|
||
|
||
带说明文字版：
|
||
|
||
```html
|
||
<section style="margin-bottom:14px;">
|
||
<p style="margin:0 0 6px;">
|
||
<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:14px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||
<span leaf="">{{描述内容}}</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 11b. flow-cards（三步横排流程卡片）
|
||
|
||
```html
|
||
<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: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: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: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: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: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;">
|
||
<span leaf="">{{步骤3描述}}</span>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
|
||
<span leaf="">{{底部说明文字}}</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
箭头 `→` 可替换为 `×` 做对比型布局。
|
||
|
||
### 11c. three-col-cards（三列对比卡片）
|
||
|
||
```html
|
||
<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: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="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||
<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="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||
<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;">
|
||
<span leaf="">{{卡片3描述}}</span>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
### 11d. timeline（时间线列表）
|
||
|
||
```html
|
||
<section style="display:flex;margin-bottom:28px;">
|
||
<section style="display:flex;flex-direction:column;align-items:center;margin-right:16px;flex-shrink:0;">
|
||
<section style="width:14px;height:14px;border-radius:50%;border:3px solid #059669;background:#fff;margin-top:4px;box-shadow:0 0 0 2px #fff;">
|
||
<span leaf=""><br></span>
|
||
</section>
|
||
<section style="width:2px;background:#E5E7EB;flex:1;margin-top:4px;min-height:48px;">
|
||
<span leaf=""><br></span>
|
||
</section>
|
||
</section>
|
||
<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: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:15px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
|
||
{{内容}}
|
||
</p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
最后一个时间线节点去掉竖线部分。
|
||
|
||
### 11e. tool-card（工具说明卡片）
|
||
|
||
基本版：
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
居中高亮版（同 oneliner-card 规则：拆多个 `<p>`，不要 `<strong>` 带 font-size/border-bottom）：
|
||
|
||
```html
|
||
<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:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 11f. table（表格）
|
||
|
||
本主题保留 `<table>` 组件（摸鱼绿实测微信可用）；Markdown 表格优先用它，数据密度低时也可改用 11c 三列卡片。
|
||
|
||
```html
|
||
<section style="margin-bottom:24px;overflow-x:auto;">
|
||
<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>
|
||
<th style="background:#059669;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题2}}</span></th>
|
||
<th style="background:#059669;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题3}}</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:8px 12px;border-bottom:1px solid #E5E7EB;color:#374151;"><span leaf="">{{内容}}</span></td>
|
||
<td style="padding:8px 12px;border-bottom:1px solid #E5E7EB;color:#374151;"><span leaf="">{{内容}}</span></td>
|
||
<td style="padding:8px 12px;border-bottom:1px solid #E5E7EB;color:#374151;"><span leaf="">{{内容}}</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 12px;border-bottom:1px solid #E5E7EB;color:#374151;background:#F9FAFB;"><span leaf="">{{内容}}</span></td>
|
||
<td style="padding:8px 12px;border-bottom:1px solid #E5E7EB;color:#374151;background:#F9FAFB;"><span leaf="">{{内容}}</span></td>
|
||
<td style="padding:8px 12px;border-bottom:1px solid #E5E7EB;color:#374151;background:#F9FAFB;"><span leaf="">{{内容}}</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
```
|
||
|
||
偶数行自动带浅灰背景 `#F9FAFB`，列数按实际需求增减。
|
||
|
||
### 11g. ordered-list（数字编号列表）
|
||
|
||
```html
|
||
<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: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: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:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||
<span leaf="">{{列表项内容}}</span>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 12 媒体组件
|
||
|
||
### 12a. image（图片容器）
|
||
|
||
```html
|
||
<section style="text-align:center;margin-bottom:24px;border-radius:12px;overflow:hidden;">
|
||
<!-- 保留原始图片代码不修改 -->
|
||
</section>
|
||
```
|
||
|
||
### 12b. video-card（视频容器卡片）
|
||
|
||
```html
|
||
<section style="background:#fff;border-radius:16px;padding:12px;margin-bottom:32px;border:2px solid #059669;box-shadow:0 4px 12px rgba(5,150,105,0.1);">
|
||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||
<span style="width:8px;height:8px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
|
||
<span style="font-size:11px;color:#059669;font-weight:700;letter-spacing:1px;"><span leaf="">VIDEO 01</span></span>
|
||
<span style="flex:1;height:1px;background:linear-gradient(to right,rgba(5,150,105,0.2),transparent);"><span leaf=""><br></span></span>
|
||
<span style="font-size:11px;color:#9CA3AF;"><span leaf="">{{视频描述}}</span></span>
|
||
</section>
|
||
<section style="border-radius:10px;overflow:hidden;">
|
||
<!-- 保留原始视频代码不修改 -->
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 13 结尾组件
|
||
|
||
### 13a. footer-cta（互动三连区，即本主题的签名/CTA 区）
|
||
|
||
固定文案照写；SVG 图标微信支持，原样保留。
|
||
|
||
```html
|
||
<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;">
|
||
<section style="text-align:center;cursor:pointer;color:#4B5563;">
|
||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#fff;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,0.05);border:1px solid #F3F4F6;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
|
||
</section>
|
||
<span style="font-size:10px;font-weight:600;"><span leaf="">点赞</span></span>
|
||
</section>
|
||
<section style="text-align:center;cursor:pointer;color:#4B5563;">
|
||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#fff;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,0.05);border:1px solid #F3F4F6;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"></circle><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path></svg>
|
||
</section>
|
||
<span style="font-size:10px;font-weight:600;"><span leaf="">在看</span></span>
|
||
</section>
|
||
<section style="text-align:center;cursor:pointer;color:#059669;">
|
||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#ECFDF5;border-radius:12px;box-shadow:0 2px 4px rgba(5,150,105,0.15);border:1px solid #A7F3D0;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18v-4a8 8 0 0 1 8-8h8"></path><polyline points="16 2 20 6 16 10"></polyline></svg>
|
||
</section>
|
||
<span style="font-size:10px;font-weight:600;"><span leaf="">转发</span></span>
|
||
</section>
|
||
</section>
|
||
<p style="font-size:10px;color:#9CA3AF;letter-spacing:1px;margin:0;">
|
||
<span leaf="">THANKS FOR READING</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
**签名文案适配**：SKILL.md 的作者签名（"我是 {{作者名}}…"两段，默认占位、由用户替换）以正文段落（组件 5）形式放在 footer-cta **之前**；footer-cta 内部文案保持上面的固定句式，两者不重复出现"三连"字样时可将签名第二段并入 footer-cta 顶部文字。
|
||
|
||
### 13b. brand-card（品牌尾图）
|
||
|
||
```html
|
||
<section style="text-align:center;" nodeleaf="">
|
||
<!-- 保留原始品牌尾图代码不修改 -->
|
||
</section>
|
||
```
|
||
|
||
有品牌尾图素材时放在 footer-cta 之后，无素材整块省略。
|
||
|
||
---
|
||
|
||
## 完整文章模板骨架
|
||
|
||
```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）——划线旧认知 + 一句话导语 -->
|
||
|
||
<!-- 2. 目录（组件3 toc-scroll，2+ 章节时生成，紧跟封面之下） -->
|
||
|
||
<!-- 3. 开头引言（组件9b oneliner-card，文章有开头金句时） -->
|
||
|
||
<!-- 4. 前言正文（开场白，组件5 段落 × N，放 0 20px 边距的 section 内） -->
|
||
|
||
<!-- 5. 第一章（组件4 chapter-title，margin-top:16px） -->
|
||
<!-- 章内：组件5 正文 + 组件6 行内样式 + 组件7 标签 + 组件8 代码 + 组件9 引用亮点 + 组件10 提示 + 组件11 布局 + 组件12 媒体 -->
|
||
|
||
<!-- 6. 第二章…第N章（组件4，margin-top:48px） -->
|
||
|
||
<!-- 7. 结语章（组件4 变体：编号 ///，PART 改 LAST，章名"写在最后"） -->
|
||
|
||
<!-- 8. 互动三连（组件13a footer-cta，前面放固定签名段落） -->
|
||
|
||
<!-- 9. 品牌尾图（组件13b，有素材才加） -->
|
||
|
||
</section>
|
||
```
|
||
|
||
**骨架顺序铁律**：目录 toc-scroll **必须紧跟封面之下**，在开头引言和前言正文之前——读者先看全文地图再进入内容。
|
||
|
||
---
|
||
|
||
## 视觉层级（3 层递进）
|
||
|
||
| 层级 | 样式 | 用途 | 频率 |
|
||
|------|------|------|------|
|
||
| **锚点层** | 绿色加粗 6a / 黄底下划线 6d / oneliner-card 9b | 核心概念、产品名、关键结论 | 全文 ≤5 处 |
|
||
| **标记层** | 绿色下划线 6e（默认）/ 黄色渐变高亮 6c | 正文关键词强调 | 每段 1~3 处 |
|
||
| **容器层** | quote-box 9a / 提示 10x / 胶囊 11a / 卡片 11x | 引用、旁注、提示、结构化信息 | 按需 |
|
||
|
||
**克制原则**：
|
||
- 黄色高亮每段不超过 1-2 处；一段内不超过 2 种高亮效果
|
||
- 红色下划线只用于对比/否定，不做普通强调
|
||
- 渐变绿仅出现在封面底条、目录首卡、流程首卡等结构位
|
||
|
||
---
|
||
|
||
## 文章类型 → 组件组合配方
|
||
|
||
按 SKILL.md 第 3 步判定的文章类型选配方；核心组件构成本篇的排版主旋律，点缀组件按内容出现处使用，一篇文章点缀组件种类 ≤3，避免花哨。
|
||
|
||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||
|---|---|---|
|
||
| 教程/操作指南 | step-label 7a + cmd/prompt 8a/8b + 代码块（通用库1a） | warn-tip 10a、green-tip 10b、flow-cards 11b |
|
||
| 盘点/工具清单 | skill/tool-label 7c + tool-card 11e + pill-list 11a | table 11f、oneliner-card 9b |
|
||
| 观点/深度分析 | paragraph 5 + quote-box 9a + oneliner-card 9b | center-divider 9d、subtitle-highlight 9c |
|
||
| 访谈/人物特稿 | paragraph 5 + quote-box 9a（引语）+ timeline 11d（经历脉络） | oneliner-card 9b、center-divider 9d |
|
||
| 数据复盘/报告 | three-col-cards 11c + table 11f + ordered-list 11g | green-info 10d、黄色渐变高亮 6c |
|
||
| 生活/情感随笔 | paragraph 5 + oneliner-card 9b + center-divider 9d | quote-box 9a（少量） |
|
||
| 案例实战 | case-label 7b / timeline 11d + step-label 7a | prompt-block 8a、yellow-warning 10c |
|
||
|
||
所有类型共用固定结构：封面 2 + 目录 3 + 章节标题 4 + 签名/三连 13。
|
||
|
||
---
|
||
|
||
## Markdown → 摸鱼绿排版 映射规则
|
||
|
||
| Markdown 元素 | 对应组件 | 说明 |
|
||
|---|---|---|
|
||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句（视角错开，不复述关键词） |
|
||
| 文章开头 `> 引言` | 组件 9b oneliner-card 或并入封面副标题 | 开头金句 |
|
||
| `## 章节标题` | 组件 4 chapter-title | PART 01/02/03…，末章 /// + LAST |
|
||
| `### 子标题` | 组件 9c subtitle-highlight | 黄色下划线小节标题 |
|
||
| 普通段落 | 组件 5 paragraph | 每段主动标 1~3 处绿色下划线 6e |
|
||
| `**加粗文字**` | 组件 6a 绿色加粗 | 核心概念/品牌名 |
|
||
| `==高亮文字==` | 组件 6c 黄色渐变高亮 | 每段 ≤2 处 |
|
||
| `<u>下划线</u>` / `++文字++` | 组件 6e 绿色下划线 | 次要强调 |
|
||
| `~~删除线~~` | 组件 6i 删除线灰色 | 被淘汰的概念 |
|
||
| `> 引用段落`（非开头） | 组件 9a quote-box | 灰色虚线框（本主题特征） |
|
||
| 核心金句 | 组件 9b oneliner-card / 9d center-divider | 视觉焦点 |
|
||
| 操作步骤 | 组件 7a step-label（+ 8a/8b） | STEP 01/02… |
|
||
| 案例/场景 | 组件 7b case-label 或 11d timeline | CASE 01/02… |
|
||
| 技能/工具清单 | 组件 7c skill/tool-label + 11e tool-card | |
|
||
| Prompt 提示词 | 组件 8a prompt-block（短）/ 通用库 1a（长多行） | |
|
||
| 单行命令 | 组件 8b cmd-block | |
|
||
| ` ``` 多行代码块 ``` ` | 通用库 1a 深色（默认）/ 1b 浅色（左竖条换 #059669） | 每行一个 `<p style="margin:0">` |
|
||
| 行内 `` `code` `` | 组件 6g 代码标签 | |
|
||
| 并列要点 | 组件 11a pill-list | |
|
||
| 流程（3 步） | 组件 11b flow-cards | 箭头可换 × 做对比 |
|
||
| 三项对比 | 组件 11c three-col-cards | |
|
||
| 递进/时间脉络 | 组件 11d timeline | |
|
||
| Markdown 表格 | 组件 11f table | 偶数行浅灰底 |
|
||
| `1. 2. 3.` 编号列表 | 组件 11g ordered-list | |
|
||
| 注意/警告 | 组件 10a warn-tip / 10c yellow-warning | |
|
||
| 亮点提示 | 组件 10b green-tip / 10d green-info | |
|
||
| `` | 组件 12a image | 原图代码保留 |
|
||
| 视频 | 组件 12b video-card | 原视频代码保留 |
|
||
| 文末 | 组件 13a footer-cta（+ 13b brand-card） | 签名段落放 footer-cta 前 |
|