539 lines
23 KiB
Markdown
539 lines
23 KiB
Markdown
# 公众号排版组件库 —— 留白禅意风（Zen）
|
||
|
||
> **使用说明**：本组件库为「留白禅意风」主题，所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||
>
|
||
> **设计风格**：极简超大留白 + 东方禅意气质、衬线大字金句、细线分层、几乎无色块。靠留白和 1px 细线建立层次，克制、沉静、高级。
|
||
>
|
||
> **公众号平台限制须知**：
|
||
> - ❌ 不支持 `<style>` 标签、`<script>` 标签、CSS class
|
||
> - ❌ 不支持 `position: fixed/absolute`、`float`
|
||
> - ❌ 不支持 `@media` 媒体查询、`@keyframes` 动画
|
||
> - ❌ 不支持 `display: grid`
|
||
> - ✅ 支持内联 `style` 属性
|
||
> - ✅ 支持 `display: flex`（有限支持）
|
||
> - ✅ 支持 `linear-gradient`
|
||
> - ✅ 支持 `border-radius`、`box-shadow`
|
||
> - ✅ 支持 `<section>`、`<p>`、`<span>`、`<strong>`、`<img>` 等基础标签
|
||
|
||
---
|
||
|
||
## 设计变量速查表
|
||
|
||
```
|
||
主色调（墨绿）： #4A5D52（点缀/强调专用，克制使用）
|
||
标题色： #2B2B2B（近黑，衬线大字）
|
||
正文色： #525252（中深灰）
|
||
辅助文字色： #A3A3A3（小字/说明/署名）
|
||
细线色： #E8E8E8（1px 分隔线，贯穿全文）
|
||
底色： #FFFFFF（纯白）
|
||
下划线标记色： #B5C8BC（低饱和墨绿，正文关键词专用）
|
||
荧光笔色： #D6E4DC（极浅墨绿，底部半高亮，偶尔用）
|
||
标签底色： #EEF3F0（极浅墨绿底，胶囊标签用）
|
||
标签文字色： #3D5046（深墨绿，胶囊标签文字）
|
||
|
||
正文字号： 16px
|
||
行高： 1.9
|
||
字间距： 0.3px
|
||
段落间距： 26px+
|
||
章节上下留白： 64px+
|
||
内容区边距： 0 10px（左右各 10px，留白气质靠行距与上下间距保持）
|
||
|
||
标题字体： 'Noto Serif SC', Georgia, 'Times New Roman', serif（衬线）
|
||
正文字体： -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: #525252;line-height: 1.9;letter-spacing: 0.3px;overflow-x: hidden;">
|
||
|
||
<!-- 所有组件放在这里 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 2 开头引言卡片（纯白 + 居中细线上下边 + 衬线大字金句）
|
||
|
||
> 纯白底，上下各一条 1px 细线（`#E8E8E8`），衬线字体大字金句居中，右下署名。无边框、无阴影、无色块——完全靠留白和细线传递气质。
|
||
|
||
```html
|
||
<section style="margin: 32px 10px 48px;padding: 28px 14px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:20px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
|
||
<span leaf="">这里放开篇金句，衬线字体自带书卷气，</span><span leaf="">留白让文字自己呼吸。</span>
|
||
</p>
|
||
<p style="font-size:13px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
|
||
<span leaf="">—— 作者名（按文章作者/主题而定）</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
**效果**：纯白无色块，细线框定空间，衬线大字在大留白中极有质感。署名占位不写死品牌名。
|
||
|
||
---
|
||
|
||
## 组件 3 前言导读区域（极简目录）
|
||
|
||
> 无色块目录，用细线分隔，数字编号低调呈现。三列等宽，纯文字 + 细线底边。
|
||
|
||
```html
|
||
<section style="padding: 0 10px 48px;">
|
||
<p style="font-size: 11px;color: #A3A3A3;margin: 0 0 20px;letter-spacing: 2px;text-transform: uppercase;">
|
||
<span leaf="">本文脉络</span>
|
||
</p>
|
||
<section style="border-top: 1px solid #E8E8E8;">
|
||
<section style="display: flex;">
|
||
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
|
||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">01</span></p>
|
||
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第一个要点</span></p>
|
||
</section>
|
||
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
|
||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">02</span></p>
|
||
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第二个要点</span></p>
|
||
</section>
|
||
<section style="flex: 1;padding: 18px 0 18px 0;border-bottom: 1px solid #E8E8E8;">
|
||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">03</span></p>
|
||
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第三个要点</span></p>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 4 章节分割线（1px 极细线，超大留白）
|
||
|
||
> 极细线 + 超大上下 margin，靠留白分层，不依赖视觉装饰。
|
||
|
||
```html
|
||
<section style="padding: 0 10px;">
|
||
<section style="height: 1px;background: #E8E8E8;margin: 64px 0 0;">
|
||
<span leaf=""><br></span>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 5 章节标题组件（小号墨绿英文 + 大号衬线中文 + 短细线）
|
||
|
||
> 英文小标签（极小号，墨绿，大字间距）+ 衬线中文大标题 + 标题下方一条短细线（40px 宽，墨绿）。编号低调嵌入英文标签前。无色块，无粗边框。
|
||
|
||
```html
|
||
<section style="margin-top: 64px;margin-bottom: 32px;padding: 0 10px;">
|
||
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 4px;margin: 0 0 10px;text-transform: uppercase;">
|
||
<span leaf="">01 · CHAPTER ONE</span>
|
||
</p>
|
||
<h3 style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:23px;font-weight: 700;color: #2B2B2B;margin: 0 0 16px;letter-spacing: 0.5px;line-height: 1.4;">
|
||
<span leaf="">中文章节大标题</span>
|
||
</h3>
|
||
<section style="width: 40px;height: 2px;background: #4A5D52;">
|
||
<span leaf=""><br></span>
|
||
</section>
|
||
|
||
<!-- 本章节正文内容放在这里 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
**结语章节变体**（编号改 ∞，英文改 POSTSCRIPT）：
|
||
|
||
```html
|
||
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 4px;margin: 0 0 10px;text-transform: uppercase;">
|
||
<span leaf="">∞ · POSTSCRIPT</span>
|
||
</p>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 6 正文段落
|
||
|
||
> **关键规则**：每个正文段落中，应主动识别 1~3 个**关键语句或关键词**，用**低饱和墨绿下划线（7d）**进行标记。这是本风格的核心视觉特征——在克制中让读者快速锁定每段重点。
|
||
|
||
**基础段落**：
|
||
|
||
```html
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
|
||
<span leaf="">正文内容，15px 字号，1.9 倍行高，两端对齐。段落间距 26px+，字里行间充满呼吸感。</span>
|
||
</p>
|
||
```
|
||
|
||
**带关键词下划线标记的段落**（推荐默认使用）：
|
||
|
||
```html
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
|
||
<span leaf="">正文内容的前半部分，引出核心概念，</span>
|
||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">这是需要强调的关键语句</span></span>
|
||
<span leaf="">，后半部分继续阐述。</span>
|
||
</p>
|
||
```
|
||
|
||
**标记原则**：
|
||
- 每段选 1~3 个关键短语加下划线，**不要整段都标**
|
||
- 优先标记：核心观点、结论性判断、关键数据、专有名词
|
||
- 标记的词组长度建议 4~15 个字
|
||
- 下划线色为低饱和墨绿 `#B5C8BC`，非常克制，不喧宾夺主
|
||
|
||
---
|
||
|
||
## 组件 7 正文高亮样式（4 种变体 + 使用策略）
|
||
|
||
> **核心设计理念**：克制留白，墨绿只在真正需要的锚点出现。整体气质冷静，避免一切鲜艳色彩。
|
||
>
|
||
> **使用优先级**（从最常用到偶尔使用）：
|
||
> 1. **7d 低饱和墨绿下划线** —— 正文默认标记方式，每段都应考虑使用
|
||
> 2. **7a 普通加粗 / 墨绿加粗** —— 普通加粗为主，墨绿加粗仅用于极少数锚点
|
||
> 3. **7b 浅墨绿底深色字标签** —— 核心概念标签（每篇 2~4 个）
|
||
> 4. **7e 极浅墨绿荧光笔** —— 偶尔用于长句强调
|
||
|
||
### 7a. 加粗强调
|
||
|
||
> **普通加粗**为默认，绝大部分加粗使用此样式。**墨绿加粗**仅用于极少数关键锚点（如核心概念首次出现、步骤编号、CTA），全文不超过 5 处。
|
||
|
||
普通加粗（默认）：
|
||
```html
|
||
<strong style="color: #2B2B2B;"><span leaf="">普通加粗强调</span></strong>
|
||
```
|
||
|
||
墨绿加粗（仅限关键锚点）：
|
||
```html
|
||
<strong style="color: #4A5D52;"><span leaf="">墨绿加粗，仅用于核心概念/步骤/CTA</span></strong>
|
||
```
|
||
|
||
### 7b. 浅墨绿底深字标签
|
||
|
||
> 极浅墨绿底 + 深墨绿字，低调不刺眼。用于核心概念（每篇 2~4 个）。
|
||
|
||
```html
|
||
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size:15px;"><span leaf="">关键词标签</span></span>
|
||
```
|
||
|
||
### 7c. 留空（本风格不设此变体，保持克制）
|
||
|
||
> 本风格不设浅色背景高亮块——色块与禅意留白气质相悖。需要次要强调时，优先用 7d 下划线或 7a 普通加粗。
|
||
|
||
### 7d. 低饱和墨绿下划线 —— 最常用
|
||
|
||
> **本风格的标志性标记方式**。颜色为低饱和墨绿 `#B5C8BC`，1.5px 实线，温和克制，适合高频使用。
|
||
|
||
```html
|
||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">下划线标记的关键词</span></span>
|
||
```
|
||
|
||
**在段落中的实际效果**：
|
||
|
||
```html
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
|
||
<span leaf="">这个时代的竞争，拼的不是速度，而是</span>
|
||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">深度思考的能力</span></span>
|
||
<span leaf="">。真正的高手，往往在别人仰望风口时，已经悄悄</span>
|
||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">找到了下一片旷野</span></span>
|
||
<span leaf="">。</span>
|
||
</p>
|
||
```
|
||
|
||
### 7e. 极浅墨绿荧光笔效果
|
||
|
||
> 底部 40% 极浅绿色高亮，偶尔用于长句强调，仍保持克制。
|
||
|
||
```html
|
||
<span style="background: linear-gradient(180deg, transparent 60%, #D6E4DC 60%);font-weight: 600;color: #2B2B2B;"><span leaf="">荧光笔效果的重要长句</span></span>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 8 引用块（3 种变体）
|
||
|
||
### 8a. 居中衬线大字引用（核心金句，视觉焦点最强）
|
||
|
||
> 纯白底，上下各一条 1px 细线，衬线字体居中，大留白。这是禅意风最具特色的引用形式——不用色块，靠留白和字体传递力量。
|
||
|
||
```html
|
||
<section style="margin: 40px 10px;padding: 32px 14px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:18px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
|
||
<span leaf="">「这里是核心金句，衬线字体 + 大留白 + 细线框定。」</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 8b. 左竖条轻量引用（次要旁注 / 补充说明）
|
||
|
||
> 极细左竖条（`#4A5D52`，2px），无底色，大 padding，适合旁注和补充说明。
|
||
|
||
```html
|
||
<section style="border-left: 2px solid #4A5D52;padding: 10px 14px 10px 14px;margin: 0 10px 30px;background: #FFFFFF;">
|
||
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
|
||
<span leaf="">旁注或补充说明内容，左侧细竖线划定边界，无色块，保持呼吸感。</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 8c. 极细线旁注（最轻量，几乎无存在感）
|
||
|
||
> 仅左侧 1px 浅灰线，字号稍小，颜色略淡，用于最轻量的旁注或个人感想。
|
||
|
||
```html
|
||
<section style="border-left: 1px solid #E8E8E8;padding: 8px 10px;margin: 0 10px 28px;">
|
||
<p style="font-size:14px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
|
||
<span leaf="">极轻量旁注，颜色浅、字号小，几乎不打扰主文节奏。</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 9 提示块（左竖条 + 小标签 + 大留白）
|
||
|
||
> 用墨绿左竖条 + 「提示」小标签区分，无色块底色。保持留白气质，不用醒目色块警示。
|
||
|
||
```html
|
||
<section style="margin: 0 10px 32px;padding: 18px 14px;border-left: 2px solid #4A5D52;">
|
||
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 2px;margin: 0 0 8px;text-transform: uppercase;">
|
||
<span leaf="">NOTE</span>
|
||
</p>
|
||
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;">
|
||
<span leaf="">这里是重要提示或核心结论，用小标签「NOTE」区分，不用色块。</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 10 图片容器
|
||
|
||
```html
|
||
<section style="margin: 0 10px 10px;border: 1px solid #E8E8E8;">
|
||
<section style="margin: 0;overflow: hidden;">
|
||
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
图片 + 说明文字配合（说明文字用辅助色，居中，大留白）：
|
||
|
||
```html
|
||
<section style="margin: 0 10px 8px;border: 1px solid #E8E8E8;">
|
||
<section style="margin: 0;overflow: hidden;">
|
||
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
||
</section>
|
||
</section>
|
||
<p style="font-size:13px;color: #A3A3A3;text-align: center;margin: 8px 10px 32px;letter-spacing: 0.5px;">
|
||
<span leaf="">— 图片说明文字</span>
|
||
</p>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 11 加粗结论段落
|
||
|
||
```html
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 10px;">
|
||
<span leaf="">加粗的结论性短句，字色加深到近黑，靠字重而非色彩传达重量。</span>
|
||
</p>
|
||
```
|
||
|
||
结合荧光笔的变体：
|
||
|
||
```html
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 10px;">
|
||
<span style="background: linear-gradient(180deg, transparent 60%, #D6E4DC 60%);"><span leaf="">荧光笔标记的结论句，极浅墨绿底，克制温柔。</span></span>
|
||
</p>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 12 数据/要点卡片组
|
||
|
||
### 两列版（用细线边框替代色块）
|
||
|
||
```html
|
||
<section style="display: flex;margin: 0 10px 32px;">
|
||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 22px 12px;margin-right: 12px;text-align: center;">
|
||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:33px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
|
||
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">覆盖用户</span></p>
|
||
</section>
|
||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 22px 12px;text-align: center;">
|
||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:33px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
|
||
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">快速接入</span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
### 要点列表版（竖排，细线分隔）
|
||
|
||
```html
|
||
<section style="margin: 0 10px 32px;border-top: 1px solid #E8E8E8;">
|
||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
|
||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">01</span></p>
|
||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点一：简明扼要的核心内容</span></p>
|
||
</section>
|
||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
|
||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">02</span></p>
|
||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点二：简明扼要的核心内容</span></p>
|
||
</section>
|
||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
|
||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">03</span></p>
|
||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 13 标签胶囊
|
||
|
||
### 浅墨绿底深字（默认）
|
||
|
||
```html
|
||
<span style="display: inline-block;background: #EEF3F0;color: #3D5046;font-size: 11px;font-weight: 600;padding: 2px 10px;border-radius: 2px;margin-right: 6px;letter-spacing: 0.5px;"><span leaf="">标签名</span></span>
|
||
```
|
||
|
||
### 细线描边（轻量，更透气）
|
||
|
||
```html
|
||
<span style="display: inline-block;border: 1px solid #B5C8BC;color: #4A5D52;font-size: 11px;font-weight: 500;padding: 2px 10px;border-radius: 2px;margin-right: 6px;letter-spacing: 0.5px;"><span leaf="">标签名</span></span>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 14 END 结尾分割线
|
||
|
||
> 居中极细线 + 「END」字样，低调收尾。墨绿细线 + 小号字母，不用渐变装饰。
|
||
|
||
```html
|
||
<section style="padding: 0 10px;">
|
||
<section style="text-align: center;margin: 48px 0 40px;">
|
||
<section style="display: flex;align-items: center;justify-content: center;">
|
||
<span style="height: 1px;width: 48px;background: #E8E8E8;margin-right: 16px;"></span>
|
||
<span style="font-size: 10px;color: #A3A3A3;letter-spacing: 4px;font-weight: 400;"><span leaf="">END</span></span>
|
||
<span style="height: 1px;width: 48px;background: #E8E8E8;margin-left: 16px;"></span>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 组件 15 尾部作者签名区
|
||
|
||
```html
|
||
<section style="padding: 0 10px 40px;">
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;">
|
||
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
|
||
</p>
|
||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;">
|
||
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
|
||
<strong style="color: #4A5D52;"><span leaf="">点赞、在看、转发</span></strong>
|
||
<span leaf="">三连，我们下篇见。</span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 完整文章模板骨架
|
||
|
||
```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: #525252;line-height: 1.9;letter-spacing: 0.3px;overflow-x: hidden;">
|
||
|
||
<!-- 1. 开头引言卡片（纯白 + 上下细线 + 衬线大字） -->
|
||
<!-- 组件 2 -->
|
||
|
||
<!-- 2. 前言正文（开场白） -->
|
||
<section style="padding: 0 0 20px;">
|
||
<!-- 组件 6 正文段落 × N -->
|
||
</section>
|
||
|
||
<!-- 3. 目录导读 -->
|
||
<!-- 组件 3 极简目录 -->
|
||
|
||
<!-- 4. 章节分割线 -->
|
||
<!-- 组件 4 1px 极细线 -->
|
||
|
||
<!-- 5. 第一章 -->
|
||
<!-- 组件 5（编号 01 · CHAPTER ONE + 衬线大标题 + 短墨绿线） -->
|
||
<!-- 组件 6 正文 + 组件 7 高亮 + 组件 8 引用 + 组件 9 提示 + 组件 10 图片 + 组件 12 数据卡片 -->
|
||
|
||
<!-- 6. 章节分割线 -->
|
||
|
||
<!-- 7. 第二章 -->
|
||
<!-- 组件 5（02） -->
|
||
|
||
<!-- ... 更多章节 ... -->
|
||
|
||
<!-- 8. 章节分割线 -->
|
||
|
||
<!-- 9. 结语章节 -->
|
||
<!-- 组件 5（∞ · POSTSCRIPT 变体） -->
|
||
|
||
<!-- 10. END 分割线 -->
|
||
<!-- 组件 14 -->
|
||
|
||
<!-- 11. 尾部签名 -->
|
||
<!-- 组件 15 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 视觉层级设计（3 层递进）
|
||
|
||
| 层级 | 样式 | 用途 | 频率 |
|
||
|------|------|------|------|
|
||
| **锚点层** | 墨绿加粗 `color:#4A5D52` | 核心概念首次出现、步骤编号、CTA | 全文 ≤5 处 |
|
||
| **标记层** | 低饱和墨绿下划线 `#B5C8BC` | 正文关键词强调 | 每段 1~3 处 |
|
||
| **容器层** | 细线 + 大留白 / 左竖条 / 小标签 | 引用、旁注、提示 | 按需 |
|
||
|
||
**克制原则**：
|
||
- 墨绿色（`#4A5D52`）**全文出现频率极低**：仅用于编号小字、章节短线、竖条、加粗锚点、CTA
|
||
- 不用色块底色——引用/提示统一用细线 + 大留白 + 类型小标签，无背景色
|
||
- 数据卡片用细线边框而非色块，数字用衬线字体提气质
|
||
- 所有圆角极小（2px）或不用圆角——方形细线更符合禅意气质
|
||
|
||
---
|
||
|
||
## 文章类型 → 组件组合配方
|
||
|
||
按 SKILL.md 第 3 步判定的文章类型选配方。本主题以留白为魂：**核心组件之外尽量少加东西**，一篇文章点缀组件种类 ≤2。
|
||
|
||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||
|---|---|---|
|
||
| 观点/深度随笔（本主题最佳场景） | 正文 6 + 居中衬线引用 8a + 加粗结论段 11 | 极细线旁注 8c |
|
||
| 生活/情感/禅意冥想 | 正文 6 + 居中衬线引用 8a | 左竖条引用 8b |
|
||
| 读书笔记/知识整理 | 正文 6 + 要点列表 12 + 浅墨绿标签 7b | 提示块 9 |
|
||
| 教程/清单（弱契合，建议换主题） | 正文 6 + 要点列表 12 + 提示块 9 | 数据卡片 12 |
|
||
| 访谈/人物特稿 | 正文 6 + 左竖条引用 8b（引语）+ 居中衬线引用 8a（金句） | 极细线旁注 8c |
|
||
| 数据复盘 | 正文 6 + 数据卡片组 12 | 加粗结论段 11 |
|
||
|
||
所有类型共用固定结构：引言卡 2 + 目录 3 + 章节标题 5 + 分割线 4 + END 14 + 签名 15。教程、盘点、强运营类内容与本主题气质不符，选主题时应主动提示用户换摸鱼绿等信息密度更高的主题。
|
||
|
||
---
|
||
|
||
## Markdown → 留白禅意风排版映射规则
|
||
|
||
| Markdown 元素 | 对应组件 | 说明 |
|
||
|---|---|---|
|
||
| `# 标题` | 不使用 | 公众号文章标题在平台设置 |
|
||
| `> 引言金句` | 组件 2 纯白细线引言卡片 | 文章开头，衬线大字居中 |
|
||
| `## 章节标题` | 组件 5 章节标题 | 小号墨绿英文 + 衬线中文 + 短细线，编号 01/02/03，结语用 ∞ |
|
||
| 普通段落 | 组件 6 正文段落 | 默认样式，主动标记关键词下划线 |
|
||
| `**加粗文字**` | 组件 7a 普通加粗（默认）或墨绿加粗（锚点） | 普通加粗为主 |
|
||
| `==高亮文字==` | 组件 7b 浅墨绿底深字标签 | 核心概念 |
|
||
| `<u>下划线</u>` | 组件 7d 低饱和墨绿下划线 | 1.5px `#B5C8BC` |
|
||
| `~~荧光笔~~` | 组件 7e 极浅墨绿荧光笔 | 底部半高亮，偶尔用 |
|
||
| `> 引用段落`（金句） | 组件 8a 居中衬线细线引用 | 核心金句，衬线居中最有力 |
|
||
| `> 引用段落`（旁注） | 组件 8b 左竖条轻量引用 | 补充说明 |
|
||
| 极轻量旁注 | 组件 8c 极细线旁注 | 个人感想，字色最浅 |
|
||
| `!> 提示文字` | 组件 9 提示块 | 墨绿左竖条 + NOTE 小标签 |
|
||
| `` | 组件 10 图片容器 | 细线边框，有说明才加说明 |
|
||
| 数据展示 | 组件 12 数据卡片组 | 衬线大号数字，细线边框 |
|
||
| 要点列表 | 组件 12 要点列表版 | 竖排，编号 + 细线分隔 |
|
||
| 行内标签 | 组件 13 标签胶囊 | 浅墨绿底为默认，描边为轻量 |
|
||
| `---` | 组件 4 章节分割线 | 1px 极细线 + 64px 留白 |
|
||
| 文末 | 组件 14 + 15 | END 细线 + 签名 |
|