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
@@ -31,12 +31,12 @@
|
||||
标签底色： #EEF3F0（极浅墨绿底，胶囊标签用）
|
||||
标签文字色： #3D5046（深墨绿，胶囊标签文字）
|
||||
|
||||
正文字号： 15px
|
||||
正文字号： 16px
|
||||
行高： 1.9
|
||||
字间距： 0.3px
|
||||
段落间距： 26px+
|
||||
章节上下留白： 64px+
|
||||
内容区边距： 0 16px（左右各 16px，比红白系更宽）
|
||||
内容区边距： 0 10px（左右各 10px，留白气质靠行距与上下间距保持）
|
||||
|
||||
标题字体： 'Noto Serif SC', Georgia, 'Times New Roman', serif（衬线）
|
||||
正文字体： -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
|
||||
@@ -61,11 +61,11 @@
|
||||
> 纯白底，上下各一条 1px 细线（`#E8E8E8`），衬线字体大字金句居中，右下署名。无边框、无阴影、无色块——完全靠留白和细线传递气质。
|
||||
|
||||
```html
|
||||
<section style="margin: 32px 16px 48px;padding: 40px 24px;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: 19px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
|
||||
<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: 12px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
|
||||
<p style="font-size:13px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
|
||||
<span leaf="">—— 作者名（按文章作者/主题而定）</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -80,7 +80,7 @@
|
||||
> 无色块目录，用细线分隔，数字编号低调呈现。三列等宽，纯文字 + 细线底边。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px 48px;">
|
||||
<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>
|
||||
@@ -88,15 +88,15 @@
|
||||
<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: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第一个要点</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: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第二个要点</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: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第三个要点</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>
|
||||
@@ -110,7 +110,7 @@
|
||||
> 极细线 + 超大上下 margin，靠留白分层，不依赖视觉装饰。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px;">
|
||||
<section style="padding: 0 10px;">
|
||||
<section style="height: 1px;background: #E8E8E8;margin: 64px 0 0;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
@@ -124,11 +124,11 @@
|
||||
> 英文小标签（极小号，墨绿，大字间距）+ 衬线中文大标题 + 标题下方一条短细线（40px 宽，墨绿）。编号低调嵌入英文标签前。无色块，无粗边框。
|
||||
|
||||
```html
|
||||
<section style="margin-top: 64px;margin-bottom: 32px;padding: 0 16px;">
|
||||
<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: 22px;font-weight: 700;color: #2B2B2B;margin: 0 0 16px;letter-spacing: 0.5px;line-height: 1.4;">
|
||||
<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;">
|
||||
@@ -157,7 +157,7 @@
|
||||
**基础段落**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<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>
|
||||
```
|
||||
@@ -165,7 +165,7 @@
|
||||
**带关键词下划线标记的段落**（推荐默认使用）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<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>
|
||||
@@ -209,7 +209,7 @@
|
||||
> 极浅墨绿底 + 深墨绿字，低调不刺眼。用于核心概念（每篇 2~4 个）。
|
||||
|
||||
```html
|
||||
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size: 14px;"><span leaf="">关键词标签</span></span>
|
||||
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size:15px;"><span leaf="">关键词标签</span></span>
|
||||
```
|
||||
|
||||
### 7c. 留空（本风格不设此变体，保持克制）
|
||||
@@ -227,7 +227,7 @@
|
||||
**在段落中的实际效果**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<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>
|
||||
@@ -253,8 +253,8 @@
|
||||
> 纯白底，上下各一条 1px 细线，衬线字体居中，大留白。这是禅意风最具特色的引用形式——不用色块，靠留白和字体传递力量。
|
||||
|
||||
```html
|
||||
<section style="margin: 40px 16px;padding: 36px 20px;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: 17px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
|
||||
<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>
|
||||
@@ -265,8 +265,8 @@
|
||||
> 极细左竖条（`#4A5D52`，2px），无底色，大 padding，适合旁注和补充说明。
|
||||
|
||||
```html
|
||||
<section style="border-left: 2px solid #4A5D52;padding: 10px 20px 10px 20px;margin: 0 16px 30px;background: #FFFFFF;">
|
||||
<p style="font-size: 14px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
|
||||
<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>
|
||||
@@ -277,8 +277,8 @@
|
||||
> 仅左侧 1px 浅灰线，字号稍小，颜色略淡，用于最轻量的旁注或个人感想。
|
||||
|
||||
```html
|
||||
<section style="border-left: 1px solid #E8E8E8;padding: 8px 16px;margin: 0 16px 28px;">
|
||||
<p style="font-size: 13px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
|
||||
<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>
|
||||
@@ -291,11 +291,11 @@
|
||||
> 用墨绿左竖条 + 「提示」小标签区分，无色块底色。保持留白气质，不用醒目色块警示。
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 32px;padding: 18px 20px;border-left: 2px solid #4A5D52;">
|
||||
<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: 14px;color: #525252;margin: 0;line-height: 1.9;">
|
||||
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;">
|
||||
<span leaf="">这里是重要提示或核心结论，用小标签「NOTE」区分，不用色块。</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -306,7 +306,7 @@
|
||||
## 组件 10 图片容器
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 10px;border: 1px solid #E8E8E8;">
|
||||
<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>
|
||||
@@ -316,12 +316,12 @@
|
||||
图片 + 说明文字配合（说明文字用辅助色，居中，大留白）：
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 8px;border: 1px solid #E8E8E8;">
|
||||
<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: 12px;color: #A3A3A3;text-align: center;margin: 8px 16px 32px;letter-spacing: 0.5px;">
|
||||
<p style="font-size:13px;color: #A3A3A3;text-align: center;margin: 8px 10px 32px;letter-spacing: 0.5px;">
|
||||
<span leaf="">— 图片说明文字</span>
|
||||
</p>
|
||||
```
|
||||
@@ -331,7 +331,7 @@
|
||||
## 组件 11 加粗结论段落
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
|
||||
<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>
|
||||
```
|
||||
@@ -339,7 +339,7 @@
|
||||
结合荧光笔的变体：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
|
||||
<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>
|
||||
```
|
||||
@@ -351,13 +351,13 @@
|
||||
### 两列版（用细线边框替代色块）
|
||||
|
||||
```html
|
||||
<section style="display: flex;margin: 0 16px 32px;">
|
||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;margin-right: 12px;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
|
||||
<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: 24px 16px;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
|
||||
<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>
|
||||
@@ -366,18 +366,18 @@
|
||||
### 要点列表版（竖排，细线分隔）
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 32px;border-top: 1px solid #E8E8E8;">
|
||||
<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: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点一：简明扼要的核心内容</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: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点二：简明扼要的核心内容</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: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
|
||||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -405,7 +405,7 @@
|
||||
> 居中极细线 + 「END」字样，低调收尾。墨绿细线 + 小号字母，不用渐变装饰。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px;">
|
||||
<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>
|
||||
@@ -421,11 +421,11 @@
|
||||
## 组件 15 尾部作者签名区
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px 40px;">
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;">
|
||||
<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: 15px;line-height: 1.9;text-align: justify;color: #525252;">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user