le-wechat-article v1.2：融合 gzh-design-skill 主题排版引擎（6 主题组件库 / 合规校验 / 复制预览页，AGPL 隔离于 themes/），md2wechat 降为轻稿快档
This commit is contained in:
leroy
@@ -18,7 +18,7 @@
|
||||
|
||||
## 交付物
|
||||
|
||||
`article.md`（终稿）+ `article.html`（粘贴公众号用，3 骨架 × 4 色板可选）+ 审读报告摘要（含合规清零）+ 3 个标题候选与摘要 + 封面 brief（七步推导，可联动 ckm-banner-design 直接出图）。
|
||||
`article.md`（终稿）+ `article.html`（干净正文）+ `article_预览.html`（带「复制到公众号」按钮的预览页）+ 审读报告摘要（含合规清零）+ 3 个标题候选与摘要 + 封面 brief（七步推导，可联动 ckm-banner-design 直接出图）。排版默认走主题引擎（6 套实战主题组件库，HTML 过平台合规校验），轻稿可用 md2wechat 快档。
|
||||
|
||||
可选收尾：经官方 API 同步到公众号草稿箱（`scripts/publish_draft.py`，需已认证公众号 + `WECHAT_APP_ID`/`WECHAT_APP_SECRET` 环境变量 + IP 白名单；自动提交 2.35:1 与 1:1 封面裁剪框；首次用 `--check` 验证，`--dry-run` 预览计划）。
|
||||
|
||||
@@ -29,3 +29,5 @@
|
||||
## 致谢
|
||||
|
||||
方法融合自两个开源项目（仅借机制与方法，未复制表达）：[mp-article-writor](https://github.com/balabalabalading/huuuuuuho-skills/tree/main/skills/mp-article-writor)（MIT）的类型路由、去模板化审读与语义保真；[wechat-article-skills](https://github.com/aiworkskills/wechat-article-skills)（Apache-2.0）的产出配额、AI 味指纹阈值与机器自检思想。
|
||||
|
||||
排版主题库（`references/themes/` 与配套校验/预览脚本）**直接引入**自 [gzh-design-skill](https://github.com/isjiamu/gzh-design-skill)（AGPL-3.0，甲木 Jiamu × 摸鱼小李）——该部分适用其原协议，本 skill 其余部分为 MIT，边界与修改声明见 [themes/README.md](references/themes/README.md)。
|
||||
|
||||
@@ -49,7 +49,7 @@ description: >
|
||||
|
||||
画像还是空模板、或所选账号没有分节时，用其中的「首访问题」问用户一次，把答复写回该文件（此文件随本 skill 存放，属于个人资产）；每个账号首次使用各问一次，之后不再重复问。事实卡留空则跳过，用户随时可补。画像与事实卡都不能覆盖类型路由、事实核查和真实性底线。
|
||||
|
||||
**校准结果是固定停点（轻量）**：展示本次将采用的约束——该账号画像要点（定位/声音/文末块/排版骨架与主题色）、将取用的事实卡条目、敏感词要求——用户确认或调整后进第 3 步。画像早已填好、无新信息时也要展示：给用户当场临时调整的机会（如本文换主题色、跳过文末块），展示可精简为几行。
|
||||
**校准结果是固定停点（轻量）**：展示本次将采用的约束——该账号画像要点（定位/声音/文末块/排版主题）、将取用的事实卡条目、敏感词要求——用户确认或调整后进第 3 步。画像早已填好、无新信息时也要展示：给用户当场临时调整的机会（如本文换排版主题、跳过文末块），展示可精简为几行。
|
||||
|
||||
### 第 3 步：大纲与图位
|
||||
|
||||
@@ -102,19 +102,26 @@ python3 scripts/check_article.py <文章目录>/article.md --type <主类型>
|
||||
|
||||
### 第 7 步：交付
|
||||
|
||||
0. **图片生产（默认执行，用户明确不要图时才跳过）**：正文图位与封面按 [visual-production.md](references/visual-production.md) 生产——交给 ckm-banner-design，或 SVG 自绘 + 浏览器截图均可，满足 brief 验收点即可。信息位图上的文字**逐字取自文章**，主题色与排版骨架一致；可编辑源文件（SVG/HTML）随 PNG 一起保留在 `imgs/src/`。生成后把正文图位占位替换为 `imgs/<文件名>.png` 真实路径——**终稿不得残留 placeholder**（此时 check_article 不再加 `--allow-placeholder`）。
|
||||
0. **图片生产（默认执行，用户明确不要图时才跳过）**：正文图位与封面按 [visual-production.md](references/visual-production.md) 生产——交给 ckm-banner-design，或 SVG 自绘 + 浏览器截图均可，满足 brief 验收点即可。信息位图上的文字**逐字取自文章**，配色与所选排版主题一致；可编辑源文件（SVG/HTML）随 PNG 一起保留在 `imgs/src/`。生成后把正文图位占位替换为 `imgs/<文件名>.png` 真实路径——**终稿不得残留 placeholder**（此时 check_article 不再加 `--allow-placeholder`）。
|
||||
|
||||
1. 排版转换（纯本地，零依赖）。骨架按文章类型选：工程（技术/教程）、杂志（叙事/访谈）、简报（更新/快讯）；骨架与色板以**该账号**画像的「排版偏好」为默认：
|
||||
1. 排版转换。默认走**主题引擎**——6 套实战主题组件库，融合自 gzh-design-skill（AGPL，见 [themes/README.md](references/themes/README.md)）。主题以**该账号**画像的「排版偏好」为默认，按文章类型对照 [themes/theme-index.md](references/themes/theme-index.md) 的适用场景校准（教程/测评→摸鱼绿、深度观点→红白色系、设计科技→石墨极简、随笔→留白禅意、对比评测→摸鱼票据、内刊复盘→橄榄手记）；选定后按 [themes/ENGINE.md](references/themes/ENGINE.md) 读该主题组件库 + 通用组件库装配 HTML，装配完**校验到全绿才算完成**：
|
||||
|
||||
```bash
|
||||
python3 scripts/md2wechat.py <文章目录>/article.md --skeleton <工程|杂志|简报> --palette <靛蓝|松绿|黛紫|绛红> -o <文章目录>/article.html
|
||||
# 不确定选哪个时先看对照页：--preview 生成三骨架 375px 样张，让用户挑
|
||||
python3 scripts/validate_gzh_html.py <文章目录>/article.html
|
||||
# ERROR 与半角标点 WARNING 都要清零；不过则回装配修
|
||||
python3 scripts/wrap_preview.py <文章目录>/article.html <文章目录>/article_预览.html
|
||||
```
|
||||
|
||||
输出的 HTML 全内联样式，全文复制粘贴进公众号编辑器即可用。
|
||||
为账号定制全新风格：走 [themes/theme-generator.md](references/themes/theme-generator.md) 生成并登记（生成后跑 component_lint 到 0 ERROR）。
|
||||
|
||||
**轻稿快档**（简报类 <1500 字或用户明确要快时）：用 md2wechat 确定性转换，跳过装配环节：
|
||||
|
||||
```bash
|
||||
python3 scripts/md2wechat.py <文章目录>/article.md --skeleton 简报 --palette <靛蓝|松绿|黛紫|绛红> -o <文章目录>/article.html
|
||||
```
|
||||
|
||||
2. 交付清单（一次给全）：
|
||||
- `article.md`（终稿）+ `article.html`（粘贴用）+ 审读报告摘要（采纳/驳回计数 + 合规清零 + 遗留风险）
|
||||
- `article.md`（终稿）+ `article.html`（干净正文）+ `article_预览.html`（浏览器打开点「复制到公众号」即可粘贴）+ 审读报告摘要（采纳/驳回计数 + 合规清零 + 遗留风险）
|
||||
- **3 个标题候选**（混两种以上风格，注明各自打法，避开 style-rules 的禁用套路）+ digest 摘要（80–120 字）
|
||||
- **封面 brief**：按 [visual-production.md](references/visual-production.md) 七步推导产出——2.35:1 规格、主标题 4–7 字且在中央 1:1 安全区、短标题（分享卡用）、张力一句话、形态与媒介、避雷项。需要直接出图时把 brief 交给 ckm-banner-design 执行，产出按「345px 缩略回看」验收
|
||||
- 图片状态：信息位/节奏位/实证位图是否就位；未生成的列出建议
|
||||
@@ -162,6 +169,7 @@ python3 scripts/publish_draft.py <文章目录> --title "标题" --digest "摘
|
||||
- 五类型路由与各类型结构：[article-types.md](references/article-types.md)
|
||||
- 公众号排版硬规则、标点规范、产出配额、标题规范：[style-rules.md](references/style-rules.md)
|
||||
- 审读手册（去模板化 + AI 味指纹 + 平台合规 + 语义保真）：[review-playbook.md](references/review-playbook.md)
|
||||
- 排版主题库与装配规则（6 主题 + 通用组件 + 引擎规则，AGPL 来源与协议边界）：[themes/README.md](references/themes/README.md) · [theme-index.md](references/themes/theme-index.md) · [ENGINE.md](references/themes/ENGINE.md)
|
||||
- 作者画像（风格；个人层 + 分账号层，渐进填充）：[author-profile.md](references/author-profile.md)
|
||||
- 常用事实卡（作者本人事实，渐进填充）：[topic-facts.md](references/topic-facts.md)
|
||||
- 封面与插图生产方法（七步推导 + ckm-banner-design 联动）：[visual-production.md](references/visual-production.md)
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{TITLE}} · 公众号排版预览</title>
|
||||
<style>
|
||||
body{margin:0;background:#eef0f2;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;-webkit-text-size-adjust:100%;}
|
||||
.gzh-toolbar{position:fixed;top:0;left:0;right:0;height:54px;background:#ffffff;box-shadow:0 1px 10px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:99;}
|
||||
.gzh-hint{font-size:13px;color:#6b7280;line-height:1.4;}
|
||||
.gzh-hint b{color:#111827;}
|
||||
.gzh-copy{background:#059669;color:#fff;border:0;border-radius:9px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(5,150,105,.28);white-space:nowrap;transition:transform .08s,background .15s;}
|
||||
.gzh-copy:hover{background:#047857;}
|
||||
.gzh-copy:active{transform:translateY(1px);}
|
||||
.gzh-toast{position:fixed;top:66px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:88vw;text-align:center;}
|
||||
.gzh-toast.show{opacity:1;}
|
||||
.gzh-stage{max-width:700px;margin:78px auto 64px;padding:0 8px;}
|
||||
@media(max-width:520px){.gzh-hint{max-width:150px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gzh-toolbar">
|
||||
<span class="gzh-hint">👇 下方是排版效果 · 点右侧 <b>复制</b> 直接粘到公众号</span>
|
||||
<button class="gzh-copy" id="gzhCopyBtn" onclick="gzhCopy()">📋 复制到公众号</button>
|
||||
</div>
|
||||
<div class="gzh-toast" id="gzhToast"></div>
|
||||
<div class="gzh-stage">
|
||||
<div id="gzh-content">
|
||||
<!--GZH_CONTENT-->
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function gzhShowToast(msg){
|
||||
var t=document.getElementById('gzhToast');
|
||||
t.textContent=msg;t.classList.add('show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer=setTimeout(function(){t.classList.remove('show');},2800);
|
||||
}
|
||||
function gzhCopy(){
|
||||
var el=document.getElementById('gzh-content');
|
||||
var html=el.innerHTML;
|
||||
var text=el.innerText;
|
||||
var btn=document.getElementById('gzhCopyBtn');
|
||||
var ok=false;
|
||||
var handler=null;
|
||||
var ta=document.createElement('textarea');
|
||||
try{
|
||||
// Write the original HTML directly to avoid browser range serialization
|
||||
// injecting values such as text-align:start into the copied markup.
|
||||
handler=function(e){
|
||||
if(!e.clipboardData)return;
|
||||
e.clipboardData.setData('text/html',html);
|
||||
e.clipboardData.setData('text/plain',text);
|
||||
e.preventDefault();
|
||||
};
|
||||
document.addEventListener('copy',handler,{once:true});
|
||||
ta.value=text;
|
||||
ta.setAttribute('readonly','');
|
||||
ta.style.position='fixed';
|
||||
ta.style.left='-9999px';
|
||||
ta.style.top='0';
|
||||
document.body.appendChild(ta);
|
||||
ta.focus();
|
||||
ta.select();
|
||||
ok=document.execCommand('copy');
|
||||
}catch(e){
|
||||
ok=false;
|
||||
}finally{
|
||||
if(ta.parentNode)ta.parentNode.removeChild(ta);
|
||||
if(handler)document.removeEventListener('copy',handler);
|
||||
}
|
||||
if(ok){
|
||||
gzhShowToast('✅ 已复制！去公众号编辑器按 Ctrl/⌘+V 粘贴即可');
|
||||
var old=btn.textContent;btn.textContent='✅ 已复制';
|
||||
setTimeout(function(){btn.textContent=old;},2200);
|
||||
}else{
|
||||
gzhShowToast('⚠ 浏览器阻止复制，请换 Edge/Chrome 后重试');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,7 +16,7 @@
|
||||
3. 希望读者记住这是一个什么样的号？（声音与气质）
|
||||
4. 有没有特别喜欢/不能接受的表达方式？（口语化程度、能否用梗、第一人称习惯）
|
||||
5. 文末固定要加什么？（关注引导/签名/往期推荐/什么都不加）
|
||||
6. 排版偏好？（骨架：工程/杂志/简报；主题色：靛蓝/松绿/黛紫/绛红）
|
||||
6. 排版偏好？（从 themes/theme-index.md 的 6 套主题选默认：摸鱼绿 / 红白色系 / 石墨极简 / 留白禅意 / 摸鱼票据 / 橄榄手记；简报类默认走 md2wechat 轻稿快档）
|
||||
|
||||
## 个人层（全账号通用）
|
||||
|
||||
@@ -66,6 +66,6 @@
|
||||
|
||||
### 排版偏好
|
||||
|
||||
默认排版骨架：**工程**（色条标题，适合技术文）
|
||||
默认主题色：**靛蓝 #1A5CFF**
|
||||
默认排版主题：**摸鱼绿**（教程/测评向默认推荐，信息密度高）
|
||||
轻稿快档：简报类沿用 md2wechat 简报骨架 · 靛蓝
|
||||
默认字号：16px（公众号正文标准）
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
# ENGINE —— 主题排版装配规则
|
||||
|
||||
> 本文件由 gzh-design-skill 的 SKILL.md 提炼适配（AGPL-3.0，见同目录 LICENSE 与 README）。融合改动已用「融合」标注。装配 HTML 时**具体代码一律从主题组件库取，不凭记忆手写**。
|
||||
|
||||
## 装配流程
|
||||
|
||||
1. **读两份库**：所选主题的 `theme-{标识}.md`（设计变量、组件 HTML、模板骨架、配方表、映射规则）+ `common-components.md`（代码块 / 图片·GIF / 小标签标题，所有主题共用）。一篇文章只用一套主题，不跨主题混组件。
|
||||
2. **判定文章类型**（取主导类型，可复合）：教程/操作指南、盘点/工具清单、观点/深度分析、访谈/人物特稿、数据复盘/报告、生活/情感随笔、案例实战——直接沿用第 1 步已选定的主类型，不重复判定。
|
||||
3. **查配方表**：按文章类型在该主题库「文章类型 → 组件组合配方」表选核心组件组合与点缀组件，保证同类文章排版气质稳定；配方外元素按主题库映射规则表补充。
|
||||
4. **装配**：按主题库「完整文章模板骨架」的顺序，把 article.md 的每个元素替换为对应组件。每个段落、每张图都要转换，不得遗漏，不增删实质内容。
|
||||
|
||||
## 行内标记映射
|
||||
|
||||
- `**加粗**` → 主题主色加粗（锚点层）
|
||||
- `==高亮==` → 渐变背景高亮；`<u>文字</u>` / `++文字++` → 下划线；`~~文字~~` → 荧光笔
|
||||
- `> 引用` → 引用高亮块（开头引言用主题引言卡）
|
||||
- 代码/命令/Prompt → common-components 1a/1b 代码块（**必须**，塞普通段落会丢缩进）；行内 code → 1c
|
||||
- 图片 → 2a（只有 `` 真有说明文字才加说明行，不编造）；**融合**：本地 `imgs/*.png` 路径原样保留，草稿箱同步时由 publish_draft.py 替换为微信域名
|
||||
|
||||
## 智能处理（装配时必须做）
|
||||
|
||||
1. **章节自动编号**：按 `##` 顺序编 01/02/03…；末章为结语/总结时用主题库指定的结语编号变体（如 `∞`）。
|
||||
2. **英文标签**：据中文章节标题生成（实测→TEST、教程→TUTORIAL、总结→SUMMARY…），主题库有槽位才用。
|
||||
3. **正文关键词下划线（核心特色）**：对每个正文段落主动挑 1–3 个最重要短语（4–15 字），用 theme-index「正文下划线 CSS」列的值标记——优先核心观点、结论、关键数据、专有名词。原文没有加粗也要标；与写作侧「加粗是扫读落点」互补：md 里的加粗进锚点层，下划线在装配时补标。不整段划线。
|
||||
4. **引言关键词高亮**：开头金句的核心词用高亮组件。
|
||||
5. **目录**：主题库有目录组件时，从全部 `##` 挑最重要的 3 个作精选导读，不是全量章节列表。
|
||||
6. **签名区**：「融合」只在**该账号画像配置了文末固定块**时渲染（对应 style-rules「不自动追加关注引导」红线），文案逐字取自画像；画像没配就不生成签名区。原文末尾已有的签名/引导段并入这唯一一处，不在中间或多处出现。
|
||||
7. **中文全角标点**：正文标点全角（，。！？：；""''（）——…），生成时直接写弯引号；代码块/行内代码/URL/英文标识符内保持原样。
|
||||
8. **列表**：按主题库映射规则；无专属组件时转带缩进正文段。
|
||||
|
||||
## 视觉层级（3 层，防滥用）
|
||||
|
||||
| 层级 | 作用 | 频率 | 手段 |
|
||||
|------|------|------|------|
|
||||
| 锚点层 | 最强锚点：产品名/步骤/CTA/核心金句 | 全文 ≤5 处 | 主色加粗、深底白字引用 |
|
||||
| 标记层 | 正文关键词 | 每段 1–3 处 | 下划线 |
|
||||
| 容器层 | 引用块、标签、长句强调 | 按需 | 浅底引用、荧光笔、徽章 |
|
||||
|
||||
## 平台红线（校验脚本兜底，但装配时就该守）
|
||||
|
||||
- **禁止**：`<style>`/`<script>`/`<div>`、`class`/`id`、`position:fixed|absolute|sticky`、`float`、`@media`/`@keyframes`、`display:grid`、CSS 变量、外部字体/CSS。
|
||||
- **必须**：样式全内联；所有文字节点用 `<span leaf="">文字</span>` 包裹（漏包是粘贴丢样式的头号原因）。
|
||||
- **可用**：有限 `display:flex`、`linear-gradient`、`border-radius`、`box-shadow`、`<section>/<p>/<span>/<strong>/<img>/<h3>`。
|
||||
|
||||
## Gotchas（实战踩坑，高频返工点）
|
||||
|
||||
- 代码块每行一个 `<p style="margin:0">`，**绝不用 `white-space:pre`**（会渲染出大缩进+空行）；缩进用全角空格 ` `。
|
||||
- 半角标点（中文后的 `, ; ! ?`、英文直引号）是最高频返工点，校验 WARNING 也要清零；但代码内不「全角化」。
|
||||
- 图片用 `max-width:100%;height:auto;display:block;margin:0 auto`，**不用 `width:100%`**（小图拉伸变糊）；只有表格/封面卡/流程图布局元素才铺满。
|
||||
- 强调/小标题用左竖条、药丸标签，**不用四周虚线框**（主题库自己定义的虚线组件除外）。
|
||||
- 产物是纯 `<section>` 正文片段，**不包** `<!DOCTYPE>`/`<html>`/`<head>`/`<body>`（编辑器只接受正文片段）。
|
||||
- 占位图/名片图没有真实 URL 时整行删掉，不留占位符。
|
||||
|
||||
## 校验与输出（融合）
|
||||
|
||||
```bash
|
||||
# 1. 合规校验：ERROR 与半角标点 WARNING 都清零才算完成
|
||||
python3 scripts/validate_gzh_html.py <文章目录>/article.html
|
||||
# 2. 预览页：浏览器打开 → 右上角「复制到公众号」→ 编辑器粘贴
|
||||
python3 scripts/wrap_preview.py <文章目录>/article.html <文章目录>/article_预览.html
|
||||
```
|
||||
|
||||
「融合」产物命名固定：干净正文 `article.html`（草稿箱同步与校验用），预览页 `article_预览.html`（人工粘贴用）——不用原工程的 `{名}_排版_{主题}.html` 命名。校验不过回到装配修，不带着 ERROR 交付。
|
||||
@@ -0,0 +1,671 @@
|
||||
gzh-design-skill — 微信公众号排版技能
|
||||
Copyright (C) 2026 甲木 (Jiamu) × 摸鱼小李 (Moyu Xiaoli)
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version. See the full text below.
|
||||
|
||||
================================================================================
|
||||
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
@@ -0,0 +1,31 @@
|
||||
# themes/ —— 公众号排版主题库（融合自 gzh-design-skill）
|
||||
|
||||
## 来源与协议
|
||||
|
||||
本目录的主题组件库、`ENGINE.md` 及配套脚本（`scripts/validate_gzh_html.py`、`scripts/wrap_preview.py`、`scripts/component_lint.py`、`assets/preview-template.html`）来自 [isjiamu/gzh-design-skill](https://github.com/isjiamu/gzh-design-skill)（作者：甲木 Jiamu × 摸鱼小李），原仓库与本项目快照均见 `LICENSE`（**AGPL-3.0**）。
|
||||
|
||||
**协议边界**：本目录及上述脚本适用 AGPL-3.0；MetaSkill 仓库其余部分保持 MIT。对本目录的修改处已在此声明：
|
||||
|
||||
- `component_lint.py`：扫描路径从 `references/*.md` 改为 `references/themes/*.md`（适配本仓库结构）
|
||||
- `ENGINE.md`：从原仓库 SKILL.md 提炼适配的装配规则（输出文件名、签名区与账号画像对齐等融合改动见文内标注）
|
||||
- 主题组件库文件（theme-*.md、common-components.md、theme-generator.md、theme-index.md）原样导入，未修改
|
||||
|
||||
## 在 le-wechat-article 中的角色
|
||||
|
||||
- **主排版引擎**：第 7 步排版转换默认走主题制——按 [theme-index.md](theme-index.md) 选主题，按 [ENGINE.md](ENGINE.md) 装配，产物过 `validate_gzh_html.py` 校验
|
||||
- `scripts/md2wechat.py` 保留为**轻稿快档**（简报类 <1500 字或用户明确要快时）
|
||||
- 主题选择由**该账号画像的「排版偏好」**决定默认值（多账号各配各的），第 2 步校准停点展示、可当场改
|
||||
|
||||
## 主题清单
|
||||
|
||||
6 套已注册主题见 [theme-index.md](theme-index.md)（摸鱼绿 / 红白色系 / 石墨极简 / 留白禅意 / 摸鱼票据 / 橄榄手记）；为账号定制全新风格走 [theme-generator.md](theme-generator.md) 生成后登记。
|
||||
|
||||
## 维护
|
||||
|
||||
改动或新增主题组件库后跑：
|
||||
|
||||
```bash
|
||||
python3 scripts/component_lint.py <skill 根目录>
|
||||
```
|
||||
|
||||
确认 0 ERROR。
|
||||
@@ -0,0 +1,191 @@
|
||||
# 通用增量组件库 —— 代码块 · 图片/GIF · 小标签标题
|
||||
|
||||
> **跨所有主题通用**。主题专属组件（引言卡、章节标题、签名等）读各自主题库；本文件提供三类**所有主题都需要**的组件：代码块、图片/GIF、小标签标题。
|
||||
>
|
||||
> **配色占位**：下面用红白色系（主色 `#DC2626`、浅底 `#FEF2F2`、浅标 `#FEE2E2`、深字 `#991B1B`）做示例。换其它主题时，把这几个值替换为该主题"设计变量速查表"里的对应色；代码块深色版各主题可共用，浅色版用主题主色做左竖条。
|
||||
>
|
||||
> **平台限制**：同主题库——禁 `<style>/<script>/class/id/div/position/float/@media/grid`，只用内联 + `flex`，文字全部 `<span leaf="">` 包裹。
|
||||
|
||||
---
|
||||
|
||||
## 一、代码块组件（Markdown ``` 围栏 → 这里）
|
||||
|
||||
文章里的代码、命令、Prompt 提示词、配置等，**必须用代码块组件**，不要塞进普通段落或引用块。代码块内的英文、半角符号、缩进都要原样保留（代码不适用"中文全角标点"规则）。
|
||||
|
||||
### 1a. 深色代码块（默认，技术感强，适配所有主题）
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 20px;border-radius:8px;overflow:hidden;background:#1E293B;box-shadow:0 4px 16px -8px rgba(15,23,42,0.4);">
|
||||
<section style="display:flex;align-items:center;padding:9px 14px;background:#0F172A;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FF5F56;margin-right:7px;font-size:0;line-height:0;overflow:hidden;">.</span>
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FFBD2E;margin-right:7px;font-size:0;line-height:0;overflow:hidden;">.</span>
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#27C93F;font-size:0;line-height:0;overflow:hidden;">.</span>
|
||||
<span style="margin-left:12px;font-size:12px;color:#64748B;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">python</span></span>
|
||||
</section>
|
||||
<section style="padding:11px 14px;">
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">def make_skill(name):</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf=""> return f"已生成 {name}"</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">print(make_skill("gzh-design"))</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
要点（**关键，避免大段空白**）：① 顶栏三色圆点 + 语言名（无语言可删该 span）；② **每行代码用一个 `<p style="margin:0;...">`，不要用 `white-space:pre`**——否则 HTML 源码里 span 前的缩进和行间换行会被原样渲染成大左缩进 + 空行；③ 需要缩进时在 span 文字里用全角空格 ` `（不要靠源码空格）；④ 行距只靠 `line-height:1.6` 控制，padding 用 `11px 14px`，保持紧凑；⑤ 长行会自动换行，不溢出。
|
||||
|
||||
### 1b. 浅色代码块（适配浅色温和主题，如玫瑰粉/天蓝/焦糖棕）
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 20px;border-radius:8px;overflow:hidden;background:#F6F8FA;border:1px solid #E5E7EB;border-left:3px solid #DC2626;">
|
||||
<section style="padding:7px 14px;border-bottom:1px solid #E5E7EB;">
|
||||
<span style="font-size:12px;color:#9CA3AF;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">bash</span></span>
|
||||
</section>
|
||||
<section style="padding:11px 14px;">
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#24292F;"><span leaf="">npx skills add gzh-design</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（左竖条 `#DC2626` 换成当前主题主色；多行同 1a：每行一个 `<p style="margin:0">`，不用 `white-space:pre`，缩进用全角空格 ` `。）
|
||||
|
||||
### 1c. 行内代码（正文中的 `code` 短片段）
|
||||
|
||||
```html
|
||||
<span style="background:#F1F5F9;color:#DC2626;padding:1px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;"><span leaf="">SKILL.md</span></span>
|
||||
```
|
||||
|
||||
（文字色 `#DC2626` 换主题主色；底色保持中性浅灰。）
|
||||
|
||||
---
|
||||
|
||||
## 二、图片 / GIF 组件（Markdown `` → 这里）
|
||||
|
||||
文章里**每一处图片、GIF、截图占位都要保留并转成下面的组件**，不得遗漏；`src` 原样保留用户给的 URL 或相对路径。GIF 动图与普通图片都用 `<img>`（公众号原生支持 GIF 自动播放），区别只在加不加"动图"角标说明。
|
||||
|
||||
### 2a. 标准图片（带说明）
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border-radius:12px;padding:6px;border:1px solid #E5E7EB;box-shadow:0 4px 12px -2px rgba(0,0,0,0.08);margin-bottom:8px;">
|
||||
<section style="margin:0;border-radius:8px;overflow:hidden;">
|
||||
<span leaf=""><img src="图片URL" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
</section>
|
||||
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
|
||||
<span leaf="">— 图片说明文字</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
无说明文字时删掉下方 `<p>`，并把图片容器 `margin-bottom` 改回 `10px`。
|
||||
|
||||
> **图片尺寸自适应**：`<img>` 用 `max-width:100%;height:auto;display:block;margin:0 auto`——按图片自身尺寸显示并居中，大图缩到容器宽、小图保持原尺寸，**不用 `width:100%` 强制铺满**（小图被拉伸会糊）。
|
||||
|
||||
### 2b. GIF 动图（同图片，加"GIF 动图"角标）
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border-radius:12px;padding:6px;border:1px solid #E5E7EB;box-shadow:0 4px 12px -2px rgba(0,0,0,0.08);margin-bottom:8px;">
|
||||
<section style="margin:0;border-radius:8px;overflow:hidden;">
|
||||
<span leaf=""><img src="动图URL.gif" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
</section>
|
||||
<p style="text-align:center;margin:0 0 24px;">
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:11px;font-weight:700;padding:1px 8px;border-radius:4px;margin-right:6px;"><span leaf="">GIF 动图</span></span>
|
||||
<span style="font-size:12px;color:#9CA3AF;"><span leaf="">动图说明文字</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
（角标底色 `#FEE2E2` → 主题浅底色，字色 `#991B1B` → 主题深字色，取自该主题"设计变量速查表"；无色块的极简主题改用细线描边胶囊：边框与字色用主题主色、背景透明。）若原文只写了图片但没给 URL，用 `src="图片URL"` 占位并在交付时提醒用户补图，**不要凭空编造图床链接**。
|
||||
|
||||
---
|
||||
|
||||
### 2c. 待补素材占位（**居中板块**，用于 GIF / 录屏 / 视频 / 成果图待补处）
|
||||
|
||||
文章里 `【插入xxx】`、待录屏、待补 GIF/视频/截图等占位，一律用这个**居中**板块，不要用左对齐的提示块。所有排版风格通用，浅底柔虚线框 + 居中图标与说明，一眼看出"此处待补"。
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 24px;padding:30px 20px;border:1.5px dashed #DAD7D2;border-radius:14px;background:#FAFAF8;text-align:center;">
|
||||
<p style="margin:0 0 10px;font-size:26px;line-height:1;"><span leaf="">🎬</span></p>
|
||||
<p style="margin:0;font-size:14px;font-weight:700;color:#9CA3AF;letter-spacing:1px;"><span leaf="">待补素材</span></p>
|
||||
<p style="margin:8px 0 0;font-size:13px;color:#B8B5B0;line-height:1.7;"><span leaf="">此处插入：创建 skill 的录屏演示</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
- 图标按素材类型换：🎬 视频/录屏、🖼 图片、📊 信息图、📎 附件。
|
||||
- 这是**唯一允许用虚线框（dashed）的场景**——因为它表达"占位/待补"语义，与正文强调用的小标签不冲突。
|
||||
- 各主题可把虚线色/底色微调成主题中性色，但保持居中、留白、柔和。
|
||||
|
||||
---
|
||||
|
||||
## 三、小标签标题组件（突出标题/强调，**替代虚线框**）
|
||||
|
||||
> **设计取向**：强调一段内容或起一个小标题时，优先用下面的"小标签 / 左竖条"形式，**不要用四周虚线框（dashed）包一个标题**——虚线框笨重、抢戏。小标签更轻、更现代。
|
||||
>
|
||||
> **使用优先级**：先查所选主题库的映射规则——主题库有等价语义组件（自己的金句块/提示块/小标题）就用主题库版本保持气质一致；没有时才用本节组件并按下面规则换色。
|
||||
>
|
||||
> **换色规则**（示例为红白色值，按所选主题"设计变量速查表"替换）：
|
||||
> - 3a 左竖条 `#DC2626` → 主题主色；3b 药丸底 `#DC2626` → 主题主色（字保持白）
|
||||
> - 3c 序号药丸底 `#FEE2E2` → 主题浅底色，序号字 `#991B1B` → 主题深字色
|
||||
> - 3d/3e 块底 `#FEF2F2` → 主题浅底色，竖条/类型标签 `#DC2626` → 主题主色
|
||||
> - **无色块的极简主题**（留白禅意/石墨极简等）：3a 竖条细化为 `2–3px`，3d/3e 去掉底色、只留左竖条 + 大留白，贴合该主题气质。
|
||||
|
||||
### 3a. 左竖条小标题（最推荐，干净）
|
||||
|
||||
```html
|
||||
<p style="margin:28px 0 14px;font-size:16px;font-weight:800;color:#1C1917;line-height:1.5;border-left:4px solid #DC2626;padding-left:12px;">
|
||||
<span leaf="">小标题文字</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 3b. 药丸标签小标题（实色底，最醒目）
|
||||
|
||||
```html
|
||||
<p style="margin:28px 0 14px;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:14px;font-weight:700;padding:5px 16px;border-radius:6px;"><span leaf="">小标题文字</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 3c. 序号药丸 + 标题（清单/步骤）
|
||||
|
||||
```html
|
||||
<p style="margin:24px 0 12px;font-size:15px;font-weight:800;color:#1C1917;line-height:1.6;">
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;border-radius:5px;padding:1px 9px;margin-right:8px;font-weight:900;"><span leaf="">01</span></span>
|
||||
<span leaf="">要点标题</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 3d. 金句引用（左竖条版，取代旧的虚线框金句）
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 24px;background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:16px 20px;">
|
||||
<p style="font-size:16px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<span leaf="">「这里是核心观点或关键金句」</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 3e. 提示 / 旁注块（左竖条 + 类型小标签，取代旧的虚线提示框）
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 24px;background:#FEF2F2;border-radius:0 8px 8px 0;border-left:4px solid #DC2626;padding:14px 18px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:11px;font-weight:700;padding:2px 10px;border-radius:4px;letter-spacing:1px;"><span leaf="">提示</span></span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||
<span leaf="">提示或旁注的正文内容</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
类型小标签文字可换：`提示` / `注意` / `重点` / `Prompt` / `旁注` 等。整块**没有任何 dashed 边框**，靠左竖条 + 浅底 + 小标签区分层次。
|
||||
|
||||
---
|
||||
|
||||
## 选用速记
|
||||
|
||||
| 文章里出现 | 用哪个组件 |
|
||||
|---|---|
|
||||
| ` ``` 代码 / 命令 / Prompt 围栏 ``` ` | 1a 深色（默认）或 1b 浅色代码块 |
|
||||
| 行内 `` `code` `` | 1c 行内代码 |
|
||||
| `` | 2a 标准图片 |
|
||||
| `` 或注明动图 | 2b GIF 动图 |
|
||||
| 想给一段起小标题 / 强调 | 3a 左竖条（首选）/ 3b 药丸 / 3c 序号 |
|
||||
| `> 金句` | 3d 金句左竖条块 |
|
||||
| 提示 / 注意 / 旁注 | 3e 提示左竖条块（**不要用虚线框**） |
|
||||
@@ -0,0 +1,352 @@
|
||||
# 自定义主题生成器 —— 从偏好/参考图生成新主题并保存复用
|
||||
|
||||
用户想要内置主题之外的新风格时走本流程：收集偏好 → 用下方提示词生成 Block 区块库 HTML → 转换为本 skill 标准主题库 → 登记到 theme-index → 以后排版可直接选用。
|
||||
|
||||
## 触发场景
|
||||
|
||||
- 用户说「生成一套新主题 / 自定义风格 / 我想要 XX 风格的组件库」
|
||||
- 用户上传参考图并要求「按这个风格做一套排版主题」
|
||||
- 用户对现有主题都不满意，描述了想要的气质/配色/场景
|
||||
|
||||
## 第一步：收集偏好
|
||||
|
||||
按下表向用户收集；**只有"主题描述"必填**（或提供参考图），其余为空时按提示词规则自动补全。用户上传的参考图用 Read 工具读取后提取视觉特征。
|
||||
|
||||
| 字段 | 说明 | 为空时 |
|
||||
|---|---|---|
|
||||
| 主题名称 / 主题ID | 中文名 + `theme-` 开头的英文 ID | 自动生成 |
|
||||
| 主题描述 | 想要的气质、场景、感觉 | 必填（或由参考图推导） |
|
||||
| 参考图 | 图片文件/截图，可多张 | 可空 |
|
||||
| 主题色 / 背景色 / 正文色 / 强调色 / 装饰色 | 色值或口头描述 | 由描述/参考图推导；背景默认白/近白 |
|
||||
| 字体偏好 | 提示词允许列表内的值 | 按风格自动选 |
|
||||
| 设计技巧 / 风格特征 / 适用场景（TAG） | 各 2~4 个中文短语 | 自动生成 |
|
||||
| 圆角偏好 / 阴影偏好 | 如"大圆角/无阴影" | 按风格自动定 |
|
||||
|
||||
一次问全（用 AskUserQuestion 或让用户自由描述），不要逐字段追问。
|
||||
|
||||
## 第二步：生成 Block 区块库 HTML
|
||||
|
||||
用本文末尾的【生成提示词】+ 收集到的偏好，生成完整区块库 HTML，保存为：
|
||||
|
||||
```
|
||||
<SKILL_ROOT>/assets/theme-previews/{THEME-ID}.html
|
||||
```
|
||||
|
||||
该文件是**风格的单一预览源**：全部区块连续排布在同一个页面里，用户浏览器打开**一次性浏览整套风格**（不逐块展示、不逐块确认）。为方便对照，可在每个区块上方加一行浅灰小字的区块名标注（仅预览页用，转换进主题库时去掉）。用户整体确认/调整风格后再进第三步。
|
||||
|
||||
**本 skill 语境适配**（提示词中的外部指涉按此理解）：
|
||||
|
||||
- 提示词里的「wpwexin 主题文件 / theme-mono-magazine.html」在本 skill 中不存在；「输出格式参考」以本 skill `references/theme-*.md` 的占位文案规范和微信兼容约束为准，骨架照提示词要求由输入推导，禁止套用现有主题结构。
|
||||
- 生成结果如包含 `<a>` 模拟按钮，转换时改为 `<span>`（公众号正文外链受限）。
|
||||
|
||||
## 第三步：转换为标准主题库并登记
|
||||
|
||||
用户确认预览风格后，把区块库转换为本 skill 的标准主题文件 `references/theme-{标识}.md`，必须完成：
|
||||
|
||||
1. **补 `<span leaf="">` 包裹**：生成器输出不含 leaf 标记，转换时所有文字节点包 `<span leaf="">文字</span>`，装饰性空元素内放 `<span leaf=""><br></span>`——这是粘贴不丢样式的前提，不能省。
|
||||
2. **五个必备章节**（同 SKILL.md「添加新主题的规范」）：
|
||||
- 设计变量速查表（从 THEME-* 元信息注释提取）
|
||||
- 各组件完整 HTML（从 Block 区块转换，保留区块中文命名，编组为组件族；数量可从区块库中精选核心 20~35 个，预览 HTML 保留全量）
|
||||
- 完整文章模板骨架（按该主题的结构模型排定装配顺序，明确目录/导航相对封面的位置）
|
||||
- 文章类型 → 组件组合配方表
|
||||
- Markdown → 组件映射规则表
|
||||
3. **平台红线复查**：剔除任何 `class`/`id` 依赖（预览 HTML 里的 `id="block-*"` 仅用于预览定位，进主题库的组件 HTML 一律去掉 id）、禁用标签、`>24px` 字号；`table` 只保留真实表格语义的。
|
||||
4. **登记 theme-index.md**：主题名 / 主色（THEME-COLOR）/ 适用场景（THEME-SCENE-TAGS）/ 组件库文件 / 正文下划线 CSS（从强调色或装饰色推导一条 `border-bottom` 样式）。
|
||||
5. **跑检查**：`python3 scripts/component_lint.py .` 须 0 ERROR；有 ERROR 修完再交付。
|
||||
6. **交付汇报**：主题名 + ID + 预览文件路径 + 已可在排版流程中选用；提醒用户可随时说「用 XX 主题排版」。
|
||||
|
||||
## 维护
|
||||
|
||||
- 用户要改已生成主题：改 `theme-{id}.md`（和预览 HTML 同步），重跑 component_lint。
|
||||
- 用户要删主题：删 `theme-{id}.md` + 预览 HTML + theme-index 对应行。
|
||||
- 主题名/ID 冲突：提示用户换名或确认覆盖。
|
||||
|
||||
---
|
||||
|
||||
## 【生成提示词】（原样使用，填入收集到的偏好后执行）
|
||||
|
||||
你是一个专业的微信公众号文章主题 Block 设计生成器。
|
||||
|
||||
你的任务是：
|
||||
根据我提供的主题偏好信息，生成一份完整的 HTML 区块库文件。你可以参考现有的 wpwexin 主题文件理解输出格式、元信息结构、微信兼容约束与区块组织方式，但不能照搬任何现有主题文件的骨架、区块顺序、区块命名方式或版式组合。
|
||||
|
||||
目标不是生成一篇文章，而是生成一整套"可复用的主题 Block 样例 HTML"，用于文章排版、区块预览和主题选择。
|
||||
|
||||
你生成的"骨架"必须来自对以下信息的综合判断：主题描述、参考图、颜色系统、字体偏好、设计技巧 TAG、风格特征 TAG、适用场景 TAG、圆角偏好、阴影偏好。也就是说，区块体系、层级节奏、版式重心、信息密度、装饰方式、卡片形式、标题结构、流程表达、数据表达、媒体表达，都应由输入条件共同推导，而不是先套一个固定模板再换配色。
|
||||
|
||||
【骨架生成原则】
|
||||
1. 你必须先根据输入信息推导"主题结构模型"，再生成区块库；禁止先选一个现成主题文件作为母版再做改写。
|
||||
2. 所谓"主题结构模型"，至少要在内部完成以下判断：
|
||||
- 该主题更偏内容叙事、信息说明、目录组织、情绪表达，还是数据展示
|
||||
- 该主题适合高密度、多卡片、强分隔，还是低密度、大留白、弱分隔
|
||||
- 该主题的标题体系更适合刊头式、栏目条式、文档章节式、标签索引式、便签贴纸式，还是其他更匹配的形式
|
||||
- 该主题的媒体区、流程区、对比区、数据区、结尾区应采用什么视觉语法
|
||||
3. 区块集合的组成比例必须受主题结构模型影响，例如：
|
||||
- 杂志/ editorial 倾向：可增加刊头、摘要、编者按、拉页图文、引文页等骨架
|
||||
- 文档/教程倾向：可增加目录、参数表、步骤条、说明卡、FAQ、检查清单等骨架
|
||||
- 科技/系统倾向：可增加状态卡、指标条、终端式代码块、对照表、模块说明区等骨架
|
||||
- 品牌/叙事倾向：可增加价值主张、故事段落、关系卡、证言样式、收束总结等骨架
|
||||
- 手账/生活方式倾向：可增加便签、拼贴图、清单卡、日程条、碎片摘要等骨架
|
||||
4. 即使不同主题都必须覆盖通用语义类型，也不能让它们仅仅变成"同一套区块换皮肤"。
|
||||
5. 你可以参考现有主题文件的输出组织方式，但最终骨架必须在区块类型、区块命名、先后节奏、信息密度、容器形式、装饰语言上体现明显的主题差异。
|
||||
6. 若输入信息不足，也必须先从现有输入中推导一个合理的骨架方向，而不是默认回退到 `theme-mono-magazine` 或其他现成主题的结构。
|
||||
|
||||
【输入信息】
|
||||
我会提供以下字段，其中部分字段可能为空：
|
||||
|
||||
- 主题名称（可为空）
|
||||
- 主题ID（可为空）
|
||||
- 主题描述
|
||||
- 参考图（可为空；如果提供，需要提取其视觉特征）
|
||||
- 主题色
|
||||
- 背景色（如无特殊要求，优先使用白色或接近白色的浅色背景）
|
||||
- 正文色
|
||||
- 强调色
|
||||
- 装饰色
|
||||
- 字体偏好
|
||||
- 设计技巧（TAG，可为空，为空时需自动生成）
|
||||
- 风格特征（TAG，可为空，为空时需自动生成）
|
||||
- 适用场景（TAG，可为空，为空时需自动生成）
|
||||
- 圆角偏好
|
||||
- 阴影偏好
|
||||
|
||||
【主题名称与 ID 生成规则】
|
||||
|
||||
1. 如果用户没有提供"主题名称"，你必须根据整体风格自动生成一个中文主题名称。
|
||||
2. 如果用户没有提供"主题ID"，你必须自动生成合法 ID。
|
||||
3. `THEME-ID` 必须遵守以下规则：
|
||||
|
||||
- 必须以 `theme-` 开头
|
||||
- 只能包含小写英文字母、数字、连字符 `-`
|
||||
- 不允许包含空格、下划线、中文、特殊符号
|
||||
- 长度控制在 12~40 个字符之间
|
||||
- 要能体现主题特征，例如：
|
||||
- `theme-mono-magazine`
|
||||
- `theme-mist-tech`
|
||||
- `theme-olive-journal`
|
||||
- `theme-soft-editorial`
|
||||
|
||||
4. 如果用户已提供名称或 ID，优先使用用户提供值；只有缺失时才自动补全。
|
||||
|
||||
5. 主题名称、主题ID、主题描述三者要保持一致，不能互相冲突。
|
||||
6. 如果用户没有明确指定背景色，或只给出模糊背景倾向，你应优先将 `THEME-BACKGROUND-COLOR` 设为白色或接近白色的浅色值（如 `#FFFFFF`、`#FCFCFA`、`#F8F8F6`），仅在主题描述或参考图明确要求深底、重氛围、反白体系时才使用深色背景。
|
||||
7. 名称与 ID 可以参考现有主题的命名风格，但不能因此继承现有主题的结构骨架；命名相近不等于骨架相近。
|
||||
|
||||
【风格标签生成规则】
|
||||
1. 如果用户没有提供"设计技巧（TAG）""风格特征（TAG）"或"适用场景（TAG）"，你必须根据主题描述、颜色、字体、圆角和阴影偏好自动补全。
|
||||
2. 自动生成的标签应简洁、可读、可复用，优先使用 2~4 个中文短语，使用逗号分隔。
|
||||
3. 三类标签应各自聚焦不同维度，避免重复：
|
||||
- 设计技巧：偏版式、构图、装饰、信息呈现手法
|
||||
- 风格特征：偏气质、视觉语言、审美倾向
|
||||
- 适用场景：偏内容类型、行业场景、传播用途
|
||||
4. 如果用户已提供标签，则优先保留用户输入；仅在为空时自动生成。
|
||||
|
||||
【字体偏好约束】
|
||||
字体偏好只能从以下值中选择一个写入 `THEME-FONT-PREFERENCE`：
|
||||
|
||||
- `system`
|
||||
- `pingfang`
|
||||
- `microsoft-yahei`
|
||||
- `source-hans-sans`
|
||||
- `source-hans-serif`
|
||||
- `alibaba-puhuiti`
|
||||
- `youshe-titlehei`
|
||||
- `serif`
|
||||
- `monospace`
|
||||
- `kaiti`
|
||||
- `fangsong`
|
||||
- `stzhongsong`
|
||||
- `stfangsong`
|
||||
- `stkaiti`
|
||||
- `yuanti`
|
||||
|
||||
如果用户没有明确指定字体，或输入字体不在允许列表中，你必须根据主题风格从上面的列表中选择最合适的一项，不能输出列表之外的字体值。
|
||||
|
||||
【参考图使用规则】
|
||||
1. 如果用户提供参考图，你必须先提取参考图中的视觉特征，包括但不限于：主色/辅助色、背景氛围、留白比例、构图节奏、边框与圆角、阴影强度、材质肌理、装饰元素、图形语言、信息密度和整体情绪。
|
||||
2. 参考图只作为"风格参考"，不是内容复制来源。你必须将其转译为微信公众号 Block 区块库的配色、版式、装饰、卡片层级、提示框、标签、按钮、分隔线等设计语言。
|
||||
3. 禁止复刻参考图中的具体文字、Logo、商标、人物、可识别版权主体或完整画面构图。
|
||||
4. 如果参考图与用户文字偏好冲突，以用户明确填写的文字偏好为准；未填写的部分可由参考图补全。
|
||||
5. 如果用户提供参考图，则直接根据图像本身提取视觉特征，不需要额外补充说明。
|
||||
|
||||
【输出目标】
|
||||
请生成一份完整 HTML 内容，要求如下：
|
||||
|
||||
1. 文件开头必须输出主题元信息注释，格式严格如下：
|
||||
<!-- THEME-NAME: xxx -->
|
||||
<!-- THEME-ID: xxx -->
|
||||
<!-- THEME-DESCRIPTION: xxx -->
|
||||
<!-- THEME-COLOR: xxx -->
|
||||
<!-- THEME-BACKGROUND-COLOR: xxx -->
|
||||
<!-- THEME-TEXT-COLOR: xxx -->
|
||||
<!-- THEME-ACCENT-COLOR: xxx -->
|
||||
<!-- THEME-DECORATION-COLOR: xxx -->
|
||||
<!-- THEME-FONT-PREFERENCE: xxx -->
|
||||
<!-- THEME-DESIGN-TECHNIQUE-TAGS: 标签1, 标签2, 标签3 -->
|
||||
<!-- THEME-STYLE-FEATURE-TAGS: 标签1, 标签2, 标签3 -->
|
||||
<!-- THEME-SCENE-TAGS: 标签1, 标签2, 标签3 -->
|
||||
<!-- THEME-RADIUS-PREFERENCE: xxx -->
|
||||
<!-- THEME-SHADOW-PREFERENCE: xxx -->
|
||||
|
||||
2. 元信息之后，生成一整套完整的 Block 区块集合。
|
||||
每个区块必须遵守以下规则：
|
||||
|
||||
- 使用注释标记区块名称，例如：
|
||||
<!-- Block: 杂志头图信息卡 -->
|
||||
- 紧跟一个顶层 `<section>` / `<figure>` / `<hr>` 等结构
|
||||
- 顶层元素必须带有稳定的 id
|
||||
- id 命名统一采用：
|
||||
`block-主题缩写-语义名`
|
||||
例如：
|
||||
`block-mono-hero-card`
|
||||
`block-mono-numbered-chapter`
|
||||
`block-mono-code-block`
|
||||
- 主题缩写应与 `THEME-ID` 对应，保持一致性
|
||||
|
||||
3. 输出内容必须是"完整区块库"，而不是单一页面正文。
|
||||
也就是说，需要覆盖文章排版常见场景，但"覆盖全面"不等于"固定骨架"；你必须根据主题结构模型决定哪些类别更重、哪些类别更轻、哪些类别需要细分出更多变体。
|
||||
至少包含以下大类 Block：
|
||||
|
||||
- 头图 / Hero / 封面
|
||||
- 章节标题 / 小节标题 / 标签标题
|
||||
- 正文段落 / 强调段落 / 行内代码段落
|
||||
- 引用块 / 提示卡 / 警示卡 / 成功卡 / 信息卡
|
||||
- CTA 区块
|
||||
- 步骤卡 / 流程总览 / 时间线
|
||||
- 图片 / 图片占位 / 双图对比 / 视频占位
|
||||
- 代码块 / 浅色代码块
|
||||
- 数据表格 / 指标卡 / 进度条
|
||||
- 无序列表 / 有序列表 / 任务清单
|
||||
- FAQ / 作者信息 / 联系方式 / 下载引导 / 延伸阅读
|
||||
- 结尾总结区 / 末尾互动区
|
||||
|
||||
4. 区块内容必须是"展示型占位内容"，不要留空。
|
||||
每个 Block 中都要有示例标题、示例段落、示例标签、示例数字、示例按钮文案，让它可直接用于预览。
|
||||
|
||||
占位内容要求严格如下：
|
||||
- 只能生成"示意性占位文案"，用于展示版式结构，不要写成真实产品页面、真实宣传页、真实业务介绍或真实 UI 界面文案。
|
||||
- 文案风格请参考现有标准主题文件：应更像"排版占位语""结构说明语""版式演示语"，而不是一个真实产品、真实专题页、真实落地页或真实 App 界面。
|
||||
- 不要生成完整品牌名、产品名、城市名、国家名、机场名、人名、公司名、航班号、价格、日期、路线、站点、下载包名、功能模块名等真实感很强的具体信息。
|
||||
- 不要输出类似 `TRAVEL SERVICE UI`、`London`、`KMG`、`ISSUE 01`、`搜索航班`、`选座支付界面`、`资源下载` 这类像真实产品界面或真实业务页面的文案。
|
||||
- 不要把区块写成"首页界面、列表界面、支付界面、功能导航、业务入口、真实 CTA 落地页、真实下载页、真实产品卖点页"。
|
||||
- 允许使用抽象占位表达，例如：`主标题占位`、`章节标题占位`、`卡片标题占位`、`说明文字占位`、`按钮文案占位`、`标签占位`、`数字占位`、`图片说明占位`、`流程步骤占位`、`引用内容占位`。
|
||||
- 更推荐使用接近标准文件的写法，例如：`专题导语占位`、`结构说明占位`、`阶段标题占位`、`重点信息占位`、`正式说明占位`、`流程节点占位`、`案例说明占位`、`结尾引导占位`。
|
||||
- 如果需要模拟数据、按钮、标签、导航、章节、表格、流程或指标，请一律使用"结构占位 + 语义占位"的写法，而不是具体业务内容。
|
||||
- 所有占位内容都应服务于"看结构、看层级、看风格"，而不是让人误以为这是某个真实行业页面的成品文案。
|
||||
|
||||
5. 风格必须由输入偏好驱动：
|
||||
|
||||
- 颜色体系必须围绕主题色、背景色、正文色、强调色、装饰色展开；若用户未对背景提出明确要求，应默认采用白色或接近白色的浅背景，并通过边框、留白、浅色层、装饰色来建立层级，而不是依赖整页深色底
|
||||
- 字体偏好必须体现在 font-family 倾向上，但元信息中的字体值必须严格使用允许列表值
|
||||
- 设计技巧 TAG 必须影响排版手法，例如：杂志风、卡片化、几何、极简、文档站、终端感、票据感、拼贴等
|
||||
- 风格特征 TAG 必须影响具体视觉，例如：高对比、柔和、留白、纸感、科技感、拟物、活泼、理性、克制等
|
||||
- 适用场景 TAG 必须影响内容语气和组件语义，例如：杂志、教程、科技、金融、品牌、产品介绍、生活方式、手账、文档、作品集等
|
||||
- 圆角偏好必须影响 border-radius
|
||||
- 阴影偏好必须影响 box-shadow，若为"无"则尽量不用阴影
|
||||
|
||||
6. 生成的区块必须具备一致性：
|
||||
|
||||
- 所有区块应属于同一主题体系
|
||||
- 在无特殊要求时，整体版面应以白底或近白底为主，只在局部卡片、提示块、标签、强调区中使用主题色或浅色衬底，避免整套区块库大面积深色铺底
|
||||
- 相同视觉语言反复出现，例如边框、标签、分隔线、按钮、标题条、装饰符号
|
||||
- 不要出现风格冲突
|
||||
- 骨架层级也要一致：如果主题偏克制理性，就不要混入过多舞台化封面结构；如果主题偏杂志叙事，就不要全部退化为统一卡片列表；如果主题偏文档说明，就不要把所有区块都做成情绪化视觉海报
|
||||
|
||||
7. 必须大量使用 inline style，保持和现有 wpwexin 主题文件一致。
|
||||
|
||||
- 如果提供了参考图，需直接根据该图像本身的视觉气质转译到区块设计中，但不能照搬图片内容
|
||||
- 不要输出 `<style>` 大段样式表
|
||||
- 主要通过元素内 style 完成视觉表达
|
||||
- 可使用 section 嵌套、figure、figcaption 等方式增强微信兼容性，但不要把 `table` / `tr` / `td` 作为主要布局骨架
|
||||
- 所有文字相关元素的 `font-size` 必须控制在 `24px` 及以下，禁止出现大于 `24px` 的字号；即使是头图主标题、封面数字、强调数据、CTA 主文案也必须遵守该限制
|
||||
|
||||
7.1 生成结果必须以"复制到微信公众号编辑器后可最大程度 100% 还原"为最高优先级，所有结构与样式都必须优先服从微信编辑器兼容性，而不是服从网页语义完整性或现代 CSS 写法。
|
||||
|
||||
7.2 标签与结构兼容规则：
|
||||
- 优先使用：`section`、`p`、`span`、`img`、`figure`、`figcaption`、`hr`、`br`、`strong`、`em`、`code`、`a`。
|
||||
- 可以使用少量嵌套 `section` 作为容器。
|
||||
- 如需稳定的横向信息组织、双列内容感或并排对照，请优先通过"上下堆叠 + 明确分组 + 分隔线/留白/边框"的方式表达，而不是把 `table` / `tr` / `td` 当作页面布局工具。
|
||||
- `table` 仅可在"确实是数据表格"这一语义下使用，例如参数表、对照表、字段表；禁止用 `table`、`tr`、`td` 承担卡片栅格、按钮排布、图文并排、整体页面分栏等布局职责。
|
||||
- 顶层区块保持单一、稳定、可复制，不要依赖外层全局容器。
|
||||
|
||||
7.3 样式兼容规则：
|
||||
- 所有关键视觉必须写在元素自身的 `style` 中，不能依赖 class、外链样式或全局样式继承。
|
||||
- 优先使用稳定、常见、简单的 CSS 属性，例如：`margin`、`padding`、`color`、`background`、`background-color`、`font-size`、`line-height`、`font-weight`、`text-align`、`border`、`border-radius`、`display`、`width`、`height`、`max-width`、`min-width`、`box-sizing`。
|
||||
- 如非必要，不要使用复杂 CSS 缩写、变量、高级选择器或依赖浏览器完整实现的写法。
|
||||
- 阴影、渐变、圆角、边框都可以使用，但必须克制，并保证即使部分样式退化，结构依然成立。
|
||||
|
||||
7.4 禁止或谨慎使用的能力：
|
||||
- 不要使用 `<style>`、`<script>`、`form`、`input`、`button`、`textarea`、`select`、`video`、`audio`、`canvas`、`svg`、`iframe`。
|
||||
- 不要使用 JavaScript 事件、动画、悬停态、过渡、滤镜交互、粘性定位、固定定位。
|
||||
- 不要使用 CSS Grid、复杂 Flex 布局、`position: sticky`、`position: fixed`、`backdrop-filter`、CSS 变量、伪元素、媒体查询。
|
||||
- 不要把 `table`、`tr`、`td` 用作通用页面布局、分栏布局、按钮编排、卡片宫格或图片区块骨架；它们只应在真实表格语义下出现。
|
||||
- 不要依赖 `aspect-ratio`、`object-fit`、`gap`、`z-index`、复杂绝对定位层叠来完成核心布局；这些能力即使出现，也不能成为结构成立的前提。
|
||||
- 不要生成任何需要点击后才成立的交互式组件；所有区块都必须是静态内容即可成立。
|
||||
|
||||
7.5 图片与媒体兼容规则：
|
||||
- 图片必须使用标准 `img` 标签，并提供明确宽度语义，保证复制后仍能独立显示。
|
||||
- 图像占位必须使用 `https://placehold.orence.net/宽x高?text=占位文字（尽量使用英文）` 格式的占位 URL，支持通过 URL 配置占位图的尺寸（如 /600x400、/400、/600x400@2x.png）、格式（如 /600x400/png、/600x400.png）、颜色（如 /600x400/000000/FFFFFF、/600x400/orange/white、/600x400/transparent/F00）、文字（如 /600x400?text=你好+世界、/600x400?text=第一行\n第二行）和字体（如 /600x400?font=cn、/600x400?text=封面图&font=roboto），例如可直接使用 /600x400、/600x400/0f172a/e2e8f0?text=你好+世界、/600x400/0f172a/e2e8f0/png?text=商品主图&font=cn、/1200x630@2x.webp?text=社交分享图。
|
||||
- 图片标签应使用 `max-width:100%;height:auto;display:block;margin:0 auto;` 按图片自身尺寸自适应显示并居中（**不要用 `width:100%` 强制铺满**）。
|
||||
- 图片应使用固定高度或稳定比例思路来设计展示区域，避免复制到公众号编辑器后出现比例错乱；如需定高，可直接写 `height`；如需比例感，应通过稳定容器或占位图本身尺寸体现，而不要依赖复杂 CSS。
|
||||
- 每个图片都必须提供合适的 `alt` 属性，内容应与图片区块语义一致或语义接近，例如 `alt="头图占位"`、`alt="双图对比占位"`；允许 `alt` 使用中文。
|
||||
- 视频区块只能做"静态视频占位"，不要输出真实 `<video>`、`iframe` 播放器或交互控件。
|
||||
- 图表、可视化、流程图等内容必须降级为静态占位图/静态区块，不要依赖脚本或 SVG 渲染。
|
||||
|
||||
7.6 文案与组件兼容规则：
|
||||
- 按钮本质上应使用带样式的 `a` 或 `span` 模拟，不要使用真正的表单按钮组件。
|
||||
- 代码块、数据卡、流程条、目录卡、双栏对照、FAQ、作者卡、CTA、下载引导等，都必须在"纯静态 HTML + inline style"下成立。
|
||||
- 即使用户要求"像 App 界面""像网页组件"，你也只能输出适合微信公众号富文本粘贴的静态视觉模拟，而不能输出真实 Web 组件结构。
|
||||
|
||||
7.7 自检要求：输出前你必须在内部自检一次，确保生成结果满足以下条件：
|
||||
- 复制到微信公众号编辑器后，不依赖外部 CSS/JS 仍能保留主要视觉层级
|
||||
- 没有使用被明确禁止的标签或交互能力
|
||||
- 没有依赖复杂现代 CSS 才能成立的核心布局
|
||||
- 即使部分样式轻微退化，内容结构、阅读顺序、视觉重点依然完整
|
||||
|
||||
8. 输出必须是纯 HTML 内容，不要解释，不要加 Markdown 代码围栏，不要加"下面是生成结果"等说明。
|
||||
|
||||
9. 不要偷懒，不要只生成 10 个区块。
|
||||
请生成"完整主题区块库"，区块数量建议 45~75 个，覆盖一个成熟主题该有的层次。
|
||||
但这些区块不应表现为固定菜单式罗列；应根据主题结构模型形成有主次的区块谱系：有些主题更强调章节与引文，有些更强调流程与参数，有些更强调图文叙事与结尾收束。
|
||||
|
||||
10. 区块命名要具体，不要都叫"标题块""卡片块"。
|
||||
要根据风格命名，例如：
|
||||
|
||||
- 杂志风：封面刊头、栏目条、头版摘要、编辑按语
|
||||
- 科技风：状态面板、信号条、监控卡、终端日志
|
||||
- 文档风：横向目录、说明卡、流程条、参数表
|
||||
- 手账风：便签卡、胶带标题、拍立得图片、票据摘要
|
||||
- 品牌风：品牌叙事卡、Logo 墙、案例证言、资源下载条
|
||||
|
||||
11. 生成区块时遵守"语义优先"原则：
|
||||
|
||||
- hero
|
||||
- navigation
|
||||
- title hierarchy
|
||||
- paragraph
|
||||
- quote / notice
|
||||
- list
|
||||
- media
|
||||
- code
|
||||
- data
|
||||
- compare
|
||||
- process
|
||||
- faq / resource / author / cta / ending
|
||||
这些语义必须被完整覆盖。
|
||||
|
||||
11.1 语义完整覆盖不代表每一类都必须以完全相同的权重和标准件数量出现；你应根据主题结构模型分配重点，并让具体实现形式发生变化。
|
||||
例如同样是 title hierarchy，杂志风可偏刊头与栏目条，文档风可偏章节编号与横向目录，手账风可偏贴纸标题与便签页签。
|
||||
例如同样是 data，科技风可偏指标卡和状态表，品牌风可偏关系数据摘要，生活方式风可偏轻量信息条而不是厚重参数矩阵。
|
||||
|
||||
12. 输出中的占位文案，要符合该主题的语气，但仍然必须保持"占位文案"属性，不要写成真实业务页面内容。
|
||||
例如：
|
||||
|
||||
- 杂志风可以写成"专题导语占位 / 栏目说明占位 / 编辑按语占位 / 头版摘要占位"这类抽象表达，而不是某本真实刊物的内容
|
||||
- 科技风可以写成"能力说明占位 / 参数说明占位 / 状态信息占位 / 节点链路占位"，而不是具体产品功能页文案
|
||||
- 暖感品牌风可以写成"品牌叙事占位 / 价值说明占位 / 关系表达占位 / 结尾引导占位"，而不是具体品牌宣传语
|
||||
- 允许有风格气质，但不允许出现"真实行业页面感"过强的文案；最终效果应接近 `theme-mono-magazine.html` 中那种"结构化占位 + 风格化表达"的程度
|
||||
|
||||
13. 如果用户没有提供主题名称和主题 ID，你应先在内部完成命名，再输出最终 HTML，不要先输出解释文字。
|
||||
14. 再次强调：禁止把 `theme-mono-magazine.html` 或其他现有主题文件当作可替换文案的固定模板。你只能借鉴其"输出规范"，不能继承其"内容骨架"。最终结果必须让人看出它是由本次输入偏好专门推导出来的主题区块库。
|
||||
|
||||
请现在根据我提供的偏好，生成完整 HTML。
|
||||
@@ -0,0 +1,702 @@
|
||||
# 公众号排版组件库 —— 石墨极简
|
||||
|
||||
> **使用说明**：本组件库为「石墨极简（Graphite Minimal）」主题（经典编辑风的极简变体），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||||
>
|
||||
> **设计风格**：石墨灰 + 纯白 + 几何细线 + 超大留白。克制的现代极简排版，几乎无色块，以 1px 细线与大间距建立秩序感。正文关键词用石墨下划线（`border-bottom:2px solid #52525B;font-weight:600;`）标记，超大水印编号章节、上下细线引言卡、几何签名区的编辑骨架，气质极简克制、留白理性。适合设计、科技评论、专业观点、高端品牌类文章。
|
||||
>
|
||||
> **公众号平台限制须知**：
|
||||
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id/`<div>`、`position:fixed/absolute/sticky`、`float`、`@media`/`@keyframes`、`display:grid`、CSS 变量 `var(--x)`
|
||||
> - ✅ 支持内联 `style`、`display:flex`（有限）、`linear-gradient`、`border-radius`、`box-shadow`、`position:relative`、`<section>/<p>/<span>/<strong>/<img>` 等基础标签
|
||||
> - font-size ≤ 24px；正文强调用左竖条/石墨下划线/小标签，**不用四周虚线框**（dashed）
|
||||
>
|
||||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||||
> - 所有"装饰性空元素"（细线分割线、END 短线、水印编号旁装饰、数据卡分隔、时间线竖线）**必须在内部放 `<span leaf=""><br></span>` 占位**，否则微信会剥掉样式
|
||||
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**，也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法：拆成多个 `<p>`，每个 `<p>` 只有一个字号；高亮样式统一挂在外层 `<span>` 上
|
||||
> - 不用 `position:absolute` 做划线/高亮，删除线用 `text-decoration:line-through`
|
||||
> - 结构化区域（如引言卡右下署名、图片说明、水印编号旁标签）没有内容时**整块删掉**，不留空 section
|
||||
|
||||
---
|
||||
|
||||
## 设计变量速查表
|
||||
|
||||
```
|
||||
主色（石墨灰）： #52525B（正文色 / 下划线专用）
|
||||
标题色（深炭）： #27272A
|
||||
深灰强调： #3F3F46
|
||||
辅助文字色： #A1A1AA（署名 / 说明 / 编号小字）
|
||||
次要文字色： #71717A
|
||||
极细线色： #E4E4E7（分割线 / 边框 / 大号水印编号）
|
||||
标签底色： #F4F4F5（关键词标签底）
|
||||
极浅灰底： #FAFAFA（引用块 / 目录卡 / 提示块，正文底保持纯白）
|
||||
纯白底： #FFFFFF
|
||||
强调色（暖橙）： #F97316（全篇 ≤3 处，仅用于锚点点睛）
|
||||
正文字号： 15px（不可改）
|
||||
行高： 1.8
|
||||
字间距： 0.3px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 10px（左右各 10px）
|
||||
章节间距： 56px（后续章节 margin-top）
|
||||
```
|
||||
|
||||
字体栈：`-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:#52525B;line-height:1.8;letter-spacing:0.3px;overflow-x:hidden;">
|
||||
|
||||
<!-- 所有组件放在这里 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 2 开头引言卡片（纯白 + 上下细线 + 大字金句）
|
||||
|
||||
> **文案策略（先读，比代码重要）**：
|
||||
> - 引言卡金句和公众号外标题是**两层**，视角要错开——外标题卖"为什么点开"，引言卡卖"核心观点是什么"
|
||||
> - 已知外标题时，金句**禁止原样复述**其核心关键词；从文章第一段或核心论点提炼一句有张力的判断句
|
||||
> - 右下署名按文章实际作者填，未知则整行删掉，**不要固定写"甲木"**
|
||||
> - 纯白底 + 上下各 1px 石墨极细线框定 + 大号金句，无色块、无阴影、无圆角，完全依靠细线与留白产生质感
|
||||
|
||||
```html
|
||||
<section style="margin:10px 10px 40px;padding:32px 24px 24px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;background:#FFFFFF;">
|
||||
<p style="font-size:11px;color:#A1A1AA;letter-spacing:2px;margin:0 0 18px;font-weight:400;">
|
||||
<span leaf="">QUOTE</span>
|
||||
</p>
|
||||
<p style="font-size:18px;font-weight:700;color:#27272A;margin:0 0 8px;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">{{金句前段}}</span>
|
||||
<span style="border-bottom:2px solid #52525B;"><span leaf="">{{石墨下划线关键词}}</span></span>
|
||||
<span leaf="">{{金句收尾}}</span>
|
||||
</p>
|
||||
<p style="text-align:right;font-size:12px;color:#A1A1AA;margin:16px 0 0;letter-spacing:1px;">
|
||||
<span leaf="">—— {{作者名，未知则删整行}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
> **注意**：金句里默认用石墨下划线（`border-bottom:2px solid #52525B`）标记关键词。若要更强的橙色下划线点睛（`border-bottom:2px solid #F97316`），计入全篇 ≤3 处橙色配额，慎重使用。
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 前言导读区域（本文看点，三列极简线框目录卡）
|
||||
|
||||
> 3 个及以上章节时生成。上方极细线 + 极浅灰底，石墨灰编号 + 深炭标题，纯灰阶无橙色，大留白。展示**精选 3 个核心看点**，不是全量章节列表。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px 40px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 16px;letter-spacing:2px;">
|
||||
<span leaf="">本文看点</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:space-between;">
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">01</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点一}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">02</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点二}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">03</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点三}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 4 章节分割线（1px 石墨细线）
|
||||
|
||||
> 无渐变、无颜色变化，单纯 1px 横向石墨极细线，两侧超大留白，呼吸感即来自此。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="height:1px;background:#E4E4E7;margin:0;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 5 章节标题（超大水印编号 + 标题 + 细线）
|
||||
|
||||
> 核心特征：极大号石墨灰水印数字（作为背景层视觉锚）+ 英文小标签 + 深炭标题 + 底部 1px 细线。编号大字非常"现代极简"。第一章 `margin-top:16px`，后续章节 `margin-top:56px`。
|
||||
|
||||
```html
|
||||
<section style="margin-top:56px;margin-bottom:32px;padding:0 10px;">
|
||||
<section style="position:relative;padding-bottom:20px;border-bottom:1px solid #E4E4E7;">
|
||||
<p style="font-size:48px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
|
||||
<span leaf="">01</span>
|
||||
</p>
|
||||
<section style="margin-top:-8px;">
|
||||
<p style="font-size:10px;color:#A1A1AA;font-weight:500;letter-spacing:3px;margin:0 0 6px;text-transform:uppercase;">
|
||||
<span leaf="">{{ENGLISH TAG}}</span>
|
||||
</p>
|
||||
<h3 style="font-size:20px;font-weight:800;color:#27272A;margin:0;letter-spacing:0.5px;line-height:1.4;">
|
||||
<span leaf="">{{中文章节标题}}</span>
|
||||
</h3>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 本章节正文内容放在这里 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
**结语章节变体**（编号用 `∞` 替代数字，契合极简的无限循环意象，英文标签用 `THE END` / `EPILOGUE`）：
|
||||
|
||||
```html
|
||||
<p style="font-size:48px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
|
||||
<span leaf="">∞</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
> **说明**：大号编号字颜色为 `#E4E4E7`（与细线同色），仅作几何形态装饰，不抢正文视觉；深炭标题叠在其下方，层次分明。此处 `position:relative` 在微信公众号被允许（仅 fixed/absolute/sticky 被禁）。
|
||||
|
||||
---
|
||||
|
||||
## 组件 6 正文段落
|
||||
|
||||
> **关键规则**：每段主动识别 1~3 个关键短语，用**石墨下划线（7d）**标记——这是本风格的核心视觉特征，灰阶下划线低调而精准，让读者快速扫到每段重点。
|
||||
|
||||
**基础段落**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:22px;font-size:15px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
**带关键词下划线标记的段落**（推荐默认）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:22px;font-size:15px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
|
||||
<span leaf="">{{前半句}}</span>
|
||||
<span style="border-bottom:2px solid #52525B;font-weight:600;color:#27272A;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
||||
<span leaf="">{{后半句}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
**标记原则**：每段选 1~3 个关键短语（4~15 字）加下划线，不要整段都标；优先标核心观点、结论判断、关键数据、专有名词；无重点的段落可不标。
|
||||
|
||||
---
|
||||
|
||||
## 组件 6b 子标题（`###` 小节标题）
|
||||
|
||||
> `###` 子标题用石墨左竖条 + 深炭标题，**不套用组件 5 的水印编号章节样式**（水印编号只给 `##`）。竖条 3px 石墨灰，贴合极简气质。
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;font-weight:800;color:#27272A;margin:28px 0 14px;padding-left:12px;border-left:3px solid #52525B;line-height:1.4;">
|
||||
<span leaf="">{{子标题}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 7 正文高亮样式（6 种变体 + 使用策略）
|
||||
|
||||
> **核心理念**：几乎全灰阶，橙色只在真正关键的锚点出现（全篇 ≤3 处总配额，含引言卡）。
|
||||
>
|
||||
> **优先级**：① 7d 石墨下划线（正文默认标记，每段都应考虑）→ ② 7a 普通/深炭加粗为主 → ③ 7b 极浅灰底深炭字标签（每篇 2~4 个）→ ④ 7c 极浅灰背景（次要）→ ⑤ 7e 荧光笔（偶尔长句强调）→ ⑥ 7f 橙色下划线（全篇最强锚点，总计 ≤3 处含引言卡）
|
||||
|
||||
### 7a. 加粗强调
|
||||
|
||||
普通/深炭加粗（默认，绝大部分加粗用这个）：
|
||||
|
||||
```html
|
||||
<strong style="color:#27272A;"><span leaf="">深炭加粗强调</span></strong>
|
||||
```
|
||||
|
||||
橙色加粗（仅限极少数关键锚点，全篇 ≤3 处总配额）：
|
||||
|
||||
```html
|
||||
<strong style="color:#F97316;"><span leaf="">橙色加粗锚点</span></strong>
|
||||
```
|
||||
|
||||
### 7b. 极浅灰底深炭字标签（核心概念，每篇 2~4 个）
|
||||
|
||||
```html
|
||||
<span style="background:#F4F4F5;color:#27272A;padding:2px 7px;border-radius:3px;font-weight:700;font-size:14px;"><span leaf="">关键词标签</span></span>
|
||||
```
|
||||
|
||||
### 7c. 极浅灰背景高亮（次要关键词）
|
||||
|
||||
```html
|
||||
<span style="background:#F4F4F5;padding:1px 6px;border-radius:2px;font-weight:600;color:#3F3F46;"><span leaf="">浅灰背景关键词</span></span>
|
||||
```
|
||||
|
||||
### 7d. 石墨下划线（最常用，本风格标志性标记）
|
||||
|
||||
```html
|
||||
<span style="border-bottom:2px solid #52525B;font-weight:600;color:#27272A;"><span leaf="">石墨下划线关键词</span></span>
|
||||
```
|
||||
|
||||
### 7e. 荧光笔效果（偶尔用于长句强调，底部 40% 极浅灰高亮）
|
||||
|
||||
```html
|
||||
<span style="background:linear-gradient(180deg,transparent 60%,#E4E4E7 60%);font-weight:700;color:#27272A;"><span leaf="">荧光笔效果的重要长句</span></span>
|
||||
```
|
||||
|
||||
### 7f. 橙色下划线（点睛锚点，全篇 ≤3 处含引言卡）
|
||||
|
||||
```html
|
||||
<span style="border-bottom:2px solid #F97316;font-weight:700;color:#27272A;"><span leaf="">橙色下划线点睛词</span></span>
|
||||
```
|
||||
|
||||
### 7g. 行内代码
|
||||
|
||||
```html
|
||||
<span style="background:#F4F4F5;color:#27272A;padding:2px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;"><span leaf="">code</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 8 引用高亮块（4 种变体）
|
||||
|
||||
### 8a. 石墨竖条金句引用（视觉焦点最强，核心金句）
|
||||
|
||||
> 左侧 3px 石墨灰竖条 + 大留白 + 深炭字，无底色，靠竖条与缩进建立层级，呼吸感极强。
|
||||
|
||||
```html
|
||||
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 10px 28px;">
|
||||
<p style="font-size:16px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">「{{核心观点或关键金句}}」</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8b. 极浅灰底内容引用块（Prompt / 引用内容）
|
||||
|
||||
> 极浅灰底 + 1px 细线边框，用于展示 Prompt、引用内容、示例等较长内容。
|
||||
|
||||
```html
|
||||
<section style="background:#FAFAFA;border:1px solid #E4E4E7;padding:20px 22px;margin:0 10px 28px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:2px;font-weight:500;">
|
||||
<span leaf="">REFERENCE</span>
|
||||
</p>
|
||||
<p style="font-size:15px;color:#3F3F46;margin:0;line-height:1.8;text-align:justify;">
|
||||
{{引用内容，可含 7d 石墨下划线等内联样式}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8c. 辅助色竖条轻量旁注（个人吐槽 / 补充说明）
|
||||
|
||||
> 极细辅助灰竖条 + 小号文字，用于轻量旁注、作者旁白，不抢主文视觉。
|
||||
|
||||
```html
|
||||
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 10px 24px;">
|
||||
<p style="font-size:13px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{轻量旁注内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8d. 居中金句分隔（章节间的过渡金句）
|
||||
|
||||
> 上下 1px 细线 + 居中深炭字，用于章节之间的过渡金句。
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;margin:0 10px 24px;text-align:center;color:#27272A;font-weight:700;letter-spacing:1px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;padding:14px 10px;">
|
||||
<span leaf="">{{居中金句}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 9 提示 / 警示条（3 种变体）
|
||||
|
||||
### 9a. 石墨竖条提示条（默认，重要提醒 / 核心结论）
|
||||
|
||||
> 石墨竖条 + 深炭文字，无背景色，极简提醒。
|
||||
|
||||
```html
|
||||
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 10px 24px;">
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||
<span leaf="">{{重要提示或核心结论}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 9b. 橙色竖条提示条（强调，全篇 ≤3 处配额共享）
|
||||
|
||||
> 橙色竖条 + 深炭文字，无背景色，是橙色在正文中最自然的出现方式。
|
||||
|
||||
```html
|
||||
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 10px 24px;">
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||
<span leaf="">{{最需要引起注意的内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 9c. 踩坑提示（极浅灰底，风险 / 注意事项，内容量大时）
|
||||
|
||||
> 极浅灰底 + 顶部深炭细线 + 多行内容，适合提示内容较多时。
|
||||
|
||||
```html
|
||||
<section style="background:#FAFAFA;border-top:2px solid #27272A;padding:18px 22px;margin:0 10px 24px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 10px;letter-spacing:2px;font-weight:500;">
|
||||
<span leaf="">NOTE</span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#52525B;margin:0;line-height:1.8;">
|
||||
<span leaf="">{{较多的提示内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 10 内容标签组（STEP / SKILL / TOOL / CASE）
|
||||
|
||||
> 教程用 STEP、盘点用 SKILL/TOOL、案例用 CASE。深炭实底编号标签 + 标题，极简克制。
|
||||
|
||||
### 10a. step-label（教程步骤）
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#27272A;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.5px;"><span leaf="">STEP 01</span></span>
|
||||
<span style="font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{步骤标题}}</span></span>
|
||||
</section>
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#52525B;line-height:1.8;text-align:justify;">
|
||||
{{步骤内容}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
`STEP 01` 可替换为 `SKILL 1`、`TOOL 摄像机`、`CASE 01`（盘点/案例场景）；盘点次级层次可把编号标签底色改极浅灰 `#F4F4F5` + 字 `#27272A`。
|
||||
|
||||
### 10b. skill/tool-label（盘点编号标签）
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#27272A;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.5px;"><span leaf="">SKILL 1</span></span>
|
||||
<span style="font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{名称}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
`SKILL 1` 可替换为 `TOOL 摄像机` 等。
|
||||
|
||||
### 10c. tool-card（工具 / 条目说明卡，极简线框版）
|
||||
|
||||
```html
|
||||
<section style="border:1px solid #E4E4E7;padding:16px 20px;margin:0 10px 24px;">
|
||||
<p style="font-size:14px;color:#52525B;margin:0;line-height:1.8;">
|
||||
{{条目说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 11 列表组件
|
||||
|
||||
### 11a. 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:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;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:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;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:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 11b. 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:#27272A;background:#F4F4F5;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#52525B;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:#71717A;margin:0;line-height:1.7;text-align:justify;">
|
||||
<span leaf="">{{要点说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 11c. timeline（时间线 / 递进脉络，访谈经历、案例演进）
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin-bottom:24px;">
|
||||
<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 #52525B;background:#fff;margin-top:4px;"><span leaf=""><br></span></section>
|
||||
<section style="width:2px;background:#E4E4E7;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<p style="margin:0 0 6px;font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{节点标题}}</span></p>
|
||||
<p style="font-size:15px;margin:0;color:#52525B;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
最后一个节点去掉竖线段（删掉内层 `width:2px` 的 section）。
|
||||
|
||||
---
|
||||
|
||||
## 组件 12 数据 / 要点卡片组
|
||||
|
||||
### 两列数据卡（极简线框版）
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin:0 10px 28px;">
|
||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;margin-right:8px;text-align:center;">
|
||||
<p style="font-size:32px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;text-align:center;">
|
||||
<p style="font-size:32px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 三列要点卡（顶部细线版）
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin:0 10px 28px;">
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">01</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">02</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">03</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 表格（真实数据表用）
|
||||
|
||||
```html
|
||||
<section style="margin:0 10px 24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="background:#27272A;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||
<th style="background:#27272A;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #E4E4E7;color:#52525B;"><span leaf="">{{内容}}</span></td>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #E4E4E7;color:#52525B;"><span leaf="">{{内容}}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #E4E4E7;color:#52525B;background:#FAFAFA;"><span leaf="">{{内容}}</span></td>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #E4E4E7;color:#52525B;background:#FAFAFA;"><span leaf="">{{内容}}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 13 标签胶囊
|
||||
|
||||
石墨描边（默认）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;border:1px solid #A1A1AA;color:#52525B;font-size:11px;font-weight:500;padding:2px 10px;border-radius:2px;margin-right:6px;letter-spacing:0.5px;"><span leaf="">标签名</span></span>
|
||||
```
|
||||
|
||||
深炭实底（强调标签）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;background:#27272A;color:#FFFFFF;font-size:11px;font-weight:600;padding:2px 10px;border-radius:2px;margin-right:6px;letter-spacing:0.5px;"><span leaf="">标签名</span></span>
|
||||
```
|
||||
|
||||
橙色描边（点睛标签，全篇 ≤3 处配额共享）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;border:1px solid #F97316;color:#F97316;font-size:11px;font-weight:600;padding:2px 10px;border-radius:2px;margin-right:6px;letter-spacing:0.5px;"><span leaf="">核心标签</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 14 图片容器
|
||||
|
||||
> 极简线框图片容器，无圆角、无阴影，1px 细线边框延续几何极简语言。
|
||||
|
||||
```html
|
||||
<section style="border:1px solid #E4E4E7;padding:4px;margin:0 10px 12px;">
|
||||
<section style="margin:0;overflow:hidden;">
|
||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
带说明文字时，图片容器 `margin-bottom` 改 `8px`，其后加：
|
||||
|
||||
```html
|
||||
<p style="font-size:12px;color:#A1A1AA;text-align:center;margin:0 10px 28px;letter-spacing:0.5px;">
|
||||
<span leaf="">— {{图片说明}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
GIF 动图角标改极简描边胶囊：边框与字色用石墨主色 `#52525B`、背景透明。多行代码块用通用增量库 `common-components.md` 的 1a 深色 / 1b 浅色（左竖条换 `#52525B`），禁 `white-space:pre`。
|
||||
|
||||
---
|
||||
|
||||
## 组件 15 END 结尾分割线
|
||||
|
||||
> 纯几何，1px 细线 + 居中 "END" 字样，石墨灰，简洁收尾。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="text-align:center;margin:0 0 36px;">
|
||||
<section style="display:flex;align-items:center;justify-content:center;">
|
||||
<span style="height:1px;width:48px;background:#E4E4E7;margin-right:16px;"><span leaf=""><br></span></span>
|
||||
<span style="font-size:10px;color:#A1A1AA;letter-spacing:4px;font-weight:500;"><span leaf="">END</span></span>
|
||||
<span style="height:1px;width:48px;background:#E4E4E7;margin-left:16px;"><span leaf=""><br></span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 16 尾部作者签名区
|
||||
|
||||
> 固定签名文案以正文段落形式呈现；有个人名片 / 引导图素材才放图，无素材整块删。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px 24px;">
|
||||
<section style="border-top:1px solid #E4E4E7;padding-top:28px;">
|
||||
<p style="margin-bottom:16px;font-size:15px;line-height:1.8;color:#52525B;text-align:justify;">
|
||||
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
|
||||
</p>
|
||||
<p style="margin-bottom:0;font-size:15px;line-height:1.8;color:#52525B;text-align:justify;">
|
||||
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
|
||||
<strong style="color:#27272A;"><span leaf="">点赞、在看、转发</span></strong>
|
||||
<span leaf="">三连，我们下篇见。</span>
|
||||
</p>
|
||||
</section>
|
||||
</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:#52525B;line-height:1.8;letter-spacing:0.3px;overflow-x:hidden;">
|
||||
|
||||
<!-- 1. 开头引言卡片（组件2，纯白 + 上下细线 + 大字金句） -->
|
||||
|
||||
<!-- 2. 前言正文（组件6 段落 × N，放 0 10px 边距 section，第一章之前的开场白） -->
|
||||
|
||||
<!-- 3. 前言导读（组件3，3+ 章节时生成，精选 3 看点） -->
|
||||
|
||||
<!-- 4. 第一章（组件5 章节标题，margin-top:16px） -->
|
||||
<!-- 章内：组件6 正文 + 6b 子标题 + 7 行内高亮 + 8 引用 + 9 提示 + 10 标签组 + 11 列表 + 12 数据 + 14 图片 -->
|
||||
|
||||
<!-- 5. 章节分割线（组件4）+ 第二章…第N章（组件5，margin-top:56px） -->
|
||||
|
||||
<!-- 6. 结语章（组件5 变体：编号 ∞，英文 THE END） -->
|
||||
|
||||
<!-- 7. END 分割线（组件15） -->
|
||||
|
||||
<!-- 8. 尾部签名（组件16） -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
**骨架铁律**：引言卡在最前；导读区在前言正文之后、第一章之前；章节之间用组件 4 石墨细线分隔；一篇只有一个 END + 一个签名区。这是经典编辑向的极简骨架——开头引言/封面 → 前言 → 编号章节 → 结语 → 签名。
|
||||
|
||||
---
|
||||
|
||||
## 视觉层级（3 层递进）
|
||||
|
||||
| 层级 | 样式 | 用途 | 频率 |
|
||||
|------|------|------|------|
|
||||
| **锚点层** | 橙色下划线 7f / 橙色竖条 9b / 橙色加粗 7a（`#F97316`） | 全文最关键锚点 | 全篇 ≤3 处（含引言卡） |
|
||||
| **标记层** | 石墨下划线 7d（默认）+ 字重 600 / 极浅灰底标签 7b | 正文关键词强调 | 每段 1~3 处 |
|
||||
| **容器层** | 石墨竖条引用 8x / 提示 9x / 标签组 10 / 卡片 11-12 | 引用、旁注、提示、结构化信息 | 按需 |
|
||||
|
||||
**克制原则**：
|
||||
- 橙色（`#F97316`）全篇 ≤3 处，所有橙色使用共享此配额（引言卡橙下划线、正文橙竖条、橙标签各算一处）
|
||||
- 石墨下划线是默认正文标记，高频使用
|
||||
- 极浅灰底（`#FAFAFA`）仅在目录卡、引用块、提示块内使用，正文底色保持纯白
|
||||
- 数据卡片用线框而非色块，完全贴合极简调性
|
||||
- 章节编号是超大水印灰字，装饰性而非功能性；引用/提示统一用左竖条 + 大留白，**不用四周虚线框**（dashed）
|
||||
|
||||
---
|
||||
|
||||
## 文章类型 → 组件组合配方
|
||||
|
||||
按 SKILL.md 第 3 步判定的文章类型选配方；核心组件构成本篇排版主旋律，点缀组件按内容出现处使用，一篇文章点缀组件种类 ≤3，避免花哨。
|
||||
|
||||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||||
|---|---|---|
|
||||
| 观点/深度分析 | 正文6 + 石墨竖条金句8a + 居中金句8d | 极浅灰引用8b、辅助竖条旁注8c |
|
||||
| 教程/操作指南 | step-label 10a + 代码块（通用库1a）+ ordered-list 11a | 石墨提示9a、tool-card 10c |
|
||||
| 盘点/工具清单 | skill/tool-label 10b + tool-card 10c + pill-list 11b | 数据卡12、标签胶囊13 |
|
||||
| 访谈/人物特稿 | 正文6 + 石墨竖条金句8a（引语）+ timeline 11c（经历脉络） | 居中金句8d、辅助竖条旁注8c |
|
||||
| 数据复盘/报告 | 数据卡12（两列/三列）+ 表格12 + ordered-list 11a | 石墨提示9a、荧光笔7e |
|
||||
| 生活/情感随笔 | 正文6 + 居中金句8d + 辅助竖条旁注8c | 石墨竖条金句8a（少量） |
|
||||
| 案例实战 | case-label 10a / timeline 11c + step-label 10a | 极浅灰引用8b、踩坑提示9c |
|
||||
|
||||
所有类型共用固定结构：引言卡 2 + 导读 3（3+ 章节）+ 水印编号章节 5 + END 15 + 签名 16。
|
||||
|
||||
---
|
||||
|
||||
## Markdown → 石墨极简排版 映射规则
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置 |
|
||||
| 文章开头 `> 引言金句` | 组件 2 纯白上下细线引言卡 | 视角与外标题错开 |
|
||||
| `## 章节标题` | 组件 5 超大水印编号 + 标题 | 自动编号 01/02…，末章 ∞ + THE END |
|
||||
| `### 子标题` | 组件 6b 石墨左竖条小标题 | 不套水印编号章节样式 |
|
||||
| 普通段落 | 组件 6 正文段落 | 每段主动标 1~3 处石墨下划线 7d |
|
||||
| `**加粗文字**` | 组件 7a 深炭加粗（默认）/ 橙色加粗（锚点 ≤3） | 深炭加粗为主 |
|
||||
| `==高亮文字==` | 组件 7b 极浅灰底深炭字标签 | 核心概念 |
|
||||
| `<u>下划线</u>` / `++文字++` | 组件 7d 石墨下划线 | `2px #52525B` |
|
||||
| `~~删除线~~` | `text-decoration:line-through` + 辅助灰字 | 被淘汰概念 |
|
||||
| 行内 `` `code` `` | 组件 7g 行内代码 | |
|
||||
| `> 引用段落`（金句） | 组件 8a 石墨竖条金句 | 核心金句，无底色 |
|
||||
| `> 引用段落`（内容块） | 组件 8b 极浅灰底引用块 | 有 REFERENCE 标签行 |
|
||||
| `> 引用段落`（旁注） | 组件 8c 辅助色竖条轻量旁注 | 极细辅助灰竖条 |
|
||||
| 核心金句 | 组件 8a / 8d 居中金句 | 视觉焦点 |
|
||||
| 操作步骤 | 组件 10a step-label | STEP 01/02… |
|
||||
| 技能/工具清单 | 组件 10b skill/tool-label + 10c tool-card | |
|
||||
| 案例/经历脉络 | 组件 10a case-label / 11c timeline | |
|
||||
| Prompt 提示词 | 组件 8b 极浅灰引用块 / 通用库 1a（长多行） | |
|
||||
| ` ``` 多行代码块 ``` ` | 通用库 1a 深色 / 1b 浅色（左竖条换 #52525B） | 每行一个 `<p style="margin:0">` |
|
||||
| 并列要点 | 组件 11b pill-list | |
|
||||
| `1. 2. 3.` 编号列表 | 组件 11a ordered-list | 石墨圆标 |
|
||||
| 数据展示 | 组件 12 数据/要点卡片组 | 线框版，深炭大号数字 |
|
||||
| Markdown 表格 | 组件 12 表格 | 偶数行极浅灰底 |
|
||||
| 注意/警告 | 组件 9a 石墨提示 / 9b 橙色提示 / 9c 踩坑提示 | |
|
||||
| 行内标签 | 组件 13 标签胶囊 | 石墨描边默认 |
|
||||
| `---` | 组件 4 章节分割线 | 1px 石墨极细线 |
|
||||
| `` | 组件 14 图片容器 | 极简线框，无圆角 |
|
||||
| 文末 | 组件 15 END + 16 签名 | END线 + 签名 |
|
||||
</content>
|
||||
</invoke>
|
||||
@@ -0,0 +1,34 @@
|
||||
# 主题索引与选择决策表
|
||||
|
||||
本表是主题信息的**单一来源**。工作流第 1 步据此向用户展示选项，第 2 步据"组件库文件"列读取对应库，下划线标记时据"正文下划线 CSS"列取值。
|
||||
|
||||
每个主题的**英文标识**（用于产物命名 `{中文名}({标识}).html`、Agent 引用）= "组件库文件"列去掉 `theme-` 前缀与 `.md` 后缀。展示给用户仍用中文名。
|
||||
|
||||
## 已注册主题
|
||||
|
||||
| 主题 | 主色 | 适用场景 | 组件库文件 | 正文下划线 CSS |
|
||||
|------|------|---------|-----------|---------------|
|
||||
| 摸鱼绿 | `#059669` emerald | 教程、测评、清单、工具盘点（卡片丰富、信息密度高，默认推荐） | `references/theme-moyu-green.md` | `border-bottom:2px solid #A7F3D0;font-weight:600;` |
|
||||
| 红白色系 | `#DC2626` 正红 | 深度分析、观点、力量感话题（经典编辑风，编号章节+引言卡+签名区，红色克制点睛） | `references/theme-red-white.md` | `border-bottom:2px solid #FECACA;font-weight:600;` |
|
||||
| 石墨极简风 | `#52525B` 石墨灰 | 设计、科技评论、专业观点、高端品牌（极简克制、留白理性、全灰阶） | `references/theme-graphite-minimal.md` | `border-bottom:2px solid #52525B;font-weight:600;` |
|
||||
| 留白禅意风 | `#4A5D52` 墨绿 | 禅意冥想、极简生活、深度随笔、艺术留白（呼吸感最强） | `references/theme-zen-whitespace.md` | `border-bottom:1.5px solid #B5C8BC;font-weight:500;` |
|
||||
| 摸鱼票据风 | `#059669` emerald | 测评、工具对比、创意评测（票据/门票视觉隐喻，星级评分+编号+硬阴影卡片） | `references/theme-moyu-ticket.md` | `border-bottom:2px solid #A7F3D0;font-weight:600;` |
|
||||
| 橄榄手记 | `#1e1f23` 墨黑（配橙 `#ed7b2f`） | 内刊手记、深度评测、案例复盘、系统性说明文档（编辑部内刊质感，分节形式多样，信息密度偏高） | `references/theme-olive-journal.md` | `border-bottom:2px solid #ed7b2f;font-weight:600;` |
|
||||
|
||||
## 选择建议
|
||||
|
||||
- **用户选择制**：用户没指定主题时，把本表全部主题列给用户选（中文名 + 适用场景），不替用户定；最贴合题材的主题可标"（推荐）"放第一位。
|
||||
- 全自动模式（用户明说"直接排"）才自动选：默认第一行主题，题材明显契合其它主题时选契合项并在交付时说明理由。
|
||||
- 同一篇文章只用一套主题，不混搭。
|
||||
|
||||
## 下划线色值的权威性
|
||||
|
||||
正文关键词下划线一律用上表"正文下划线 CSS"列的值。组件库里可能有浅色下划线变体，那是可选样式；**正文关键词标记以本表为单一权威来源**，避免双轨。
|
||||
|
||||
## 新主题登记流程
|
||||
|
||||
1. 把主题组件库写入 `references/theme-{英文标识}.md`（格式要求见 SKILL.md「添加新主题的规范」）。
|
||||
2. 在上表登记一行；首个/最常用主题放第一行作为默认推荐。
|
||||
3. 跑 `python3 scripts/component_lint.py .` 确认 0 ERROR。
|
||||
|
||||
> 用户想要全新风格时，可走 `references/theme-generator.md` 的自定义主题生成流程：按偏好/参考图生成区块库（预览存 `assets/theme-previews/`），确认后转标准主题库并按上面流程登记。
|
||||
@@ -0,0 +1,936 @@
|
||||
# 公众号排版组件库 —— 摸鱼绿
|
||||
|
||||
> **使用说明**：本组件库为「摸鱼绿」主题（移植自摸鱼小李绿色杂志风），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||||
>
|
||||
> **设计风格**：绿色杂志风，卡片丰富、信息密度高。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
|
||||
正文字号： 14px（不可改）
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 20px（模块左右各 20px）
|
||||
```
|
||||
|
||||
字体栈：`-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: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 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>
|
||||
<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;">
|
||||
<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}}` → 标题第二行（全绿色）
|
||||
- `{{副标题关键词}}` → 简短关键词，用 `·` 分隔
|
||||
- `{{底部左侧文字}}` → 产品/品牌名；`{{标签1/2}}` → 底部小标签
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 目录 toc-scroll（横向滚动目录）
|
||||
|
||||
2 个及以上章节时生成。第一个卡片绿色高亮，最后一个固定为"写在最后"（PART ///）。
|
||||
|
||||
```html
|
||||
<section style="margin:0 20px 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:13px;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:13px;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:13px;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 20px;">
|
||||
<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;">
|
||||
<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:17px;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:14px;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:13px;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>
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
**使用原则**：
|
||||
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:15px;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>
|
||||
</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:15px;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:15px;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:13px;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>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 8b. cmd-block（CMD 单行命令块）
|
||||
|
||||
```html
|
||||
<p style="font-size:13px;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>
|
||||
</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 16px;margin-bottom:24px;text-align:justify;">
|
||||
<p style="font-size:13px;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 16px;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>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
带前缀引导语版（两段式）：
|
||||
|
||||
```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;">
|
||||
<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>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
带下方补充说明版：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;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>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<span leaf="">{{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 9c. subtitle-highlight（小节黄色下划线标题）
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;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: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;">
|
||||
<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:12px;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;">
|
||||
<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:12px;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>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 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;">
|
||||
<span leaf="">{{警告内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 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;">
|
||||
{{信息内容}}
|
||||
</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: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>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
带说明文字版：
|
||||
|
||||
```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>
|
||||
</p>
|
||||
<p style="font-size:13px;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:13px;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;">
|
||||
<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;">
|
||||
<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;">
|
||||
<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;">
|
||||
<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:12px;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:13px;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:13px;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:13px;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:15px;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>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
最后一个时间线节点去掉竖线部分。
|
||||
|
||||
### 11e. tool-card（工具说明卡片）
|
||||
|
||||
基本版：
|
||||
|
||||
```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;">
|
||||
{{说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
居中高亮版（同 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;">
|
||||
<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>
|
||||
</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:13px;">
|
||||
<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:14px;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;">
|
||||
<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;">
|
||||
<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: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;">
|
||||
<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 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；封面主标题从中提炼（视角错开） |
|
||||
| 文章开头 `> 引言` | 组件 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 前 |
|
||||
@@ -0,0 +1,498 @@
|
||||
# 公众号排版组件库 —— 摸鱼票据风
|
||||
|
||||
> **使用说明**：本组件库为「摸鱼票据风」主题（移植自 moyuticket 排版规范），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||||
>
|
||||
> **设计风格**：票据/门票视觉隐喻——米黄纸感底 + 黑色实边框 + 硬阴影（`box-shadow` 无虚化偏移），配合绿色虚线"撕票线"、星级评分、编号角标。适合测评、工具对比、创意评测类文章，强调"这是一张值得收藏的凭证"的仪式感。
|
||||
>
|
||||
> **公众号平台限制须知**：
|
||||
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id、`position:fixed/absolute`、`float`、`@media`/`@keyframes`、`display:grid`
|
||||
> - ✅ 支持内联 `style`、`display:flex`（有限）、`box-shadow`（含硬阴影偏移）、`border-radius`、`text-shadow`、`<svg>`（结尾互动区图标，微信支持）、`<section>/<p>/<span>/<strong>/<img>` 等基础标签
|
||||
>
|
||||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||||
> - 所有"装饰性空元素"（撕票虚线、头像占位框）**没有真实内容时整块删掉**，不留空 section
|
||||
> - 正文字号固定 `14px`、行高 `1.9`——这是本主题的排版铁律，不与其它主题共用字号
|
||||
> - 不要把 `font-size`/`border-bottom` 打在 `<strong>` 上，高亮样式统一挂在外层 `<span>` 上
|
||||
> - `writing-mode:vertical-rl`（票据侧边竖排字）在个别老旧客户端可能渲染异常，如遇异常可退化为横排小字，不影响其余结构
|
||||
|
||||
---
|
||||
|
||||
## 设计变量速查表
|
||||
|
||||
```
|
||||
主色调（绿）： #059669
|
||||
米黄纸感背景： #fffef8
|
||||
浅绿背景： #F0FDF4
|
||||
绿色虚线/撕票线：#A7F3D0
|
||||
黑色描边/硬阴影：#1a1a1a
|
||||
正文色： #555
|
||||
标题色： #1a1a1a
|
||||
次要文字： #888 / #999
|
||||
代码背景： #F3F4F6
|
||||
代码字色： #1F2937
|
||||
品牌紫色（AI 品牌专用，如 Claude/Obsidian/Gemini）：#7C3AED
|
||||
正文字号： 14px（本主题铁律，不可改）
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 20px（正文区块左右各 20px）
|
||||
章节间距： margin-bottom: 32px
|
||||
```
|
||||
|
||||
字体栈：`-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;">
|
||||
|
||||
<!-- 所有组件放在这里 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 2 票据封面 ticket-cover
|
||||
|
||||
**用途**：文章开头，适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字，营造"一张门票/凭证"的仪式感。
|
||||
|
||||
**可替换字段**：
|
||||
- `{{头部标签}}` → 如 `AI DESIGN TOOLS`
|
||||
- `{{大标题}}` → 如 `STITCH vs PENCIL`
|
||||
- `{{副标题}}` → 如 `两款免费 AI 设计工具深度对比`
|
||||
- `{{作者名}}` / `{{作者身份}}`
|
||||
- `{{简介段落}}` → 支持内嵌组件 6 的行内强调样式
|
||||
- `{{#标签1/2/3}}`
|
||||
- `{{编号}}` → 如 `001`
|
||||
- `{{竖排文字}}` → 如 `深度测评`
|
||||
- `{{等级}}` → 如 `S`
|
||||
|
||||
```html
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;margin-bottom:32px;">
|
||||
<section style="background:#059669;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="color:#fffef8;font-size:11px;letter-spacing:4px;font-weight:600;"><span leaf="">{{头部标签}}</span></section>
|
||||
<section style="color:#fffef8;font-size:11px;letter-spacing:2px;"><span leaf="">★★★★★</span></section>
|
||||
</section>
|
||||
<section style="display:flex;">
|
||||
<section style="flex:1;padding:24px 20px;border-right:2px dashed #A7F3D0;">
|
||||
<section style="font-size:24px;font-weight:900;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:4px;text-shadow:0.5px 0 0 #1a1a1a;"><span leaf="">{{大标题}}</span></section>
|
||||
<section style="font-size:14px;color:#666;letter-spacing:1px;margin-bottom:20px;"><span leaf="">{{副标题}}</span></section>
|
||||
<section style="border-top:1px dashed #A7F3D0;margin-bottom:16px;"><span leaf=""><br></span></section>
|
||||
<section style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
|
||||
<!-- 有作者头像图时插入 <img> 到下面这个圆框里；无头像时整块删除该 section -->
|
||||
<section style="width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #059669;flex-shrink:0;"><span leaf=""><br></span></section>
|
||||
<section>
|
||||
<section style="font-size:15px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
||||
<section style="font-size:12px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="font-size:13px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
|
||||
<span leaf="">{{简介段落}}</span>
|
||||
</section>
|
||||
<section style="display:flex;gap:8px;margin-top:16px;">
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签1}}</span></section>
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签2}}</span></section>
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签3}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="width:48px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#F0FDF4;">
|
||||
<section style="text-align:center;">
|
||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">NO.</span></section>
|
||||
<section style="font-size:18px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
|
||||
</section>
|
||||
<section style="writing-mode:vertical-rl;font-size:9px;color:#888;letter-spacing:2px;"><span leaf="">{{竖排文字}}</span></section>
|
||||
<section style="text-align:center;">
|
||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">GRADE</span></section>
|
||||
<section style="font-size:14px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="display:flex;justify-content:space-between;align-items:center;padding:0 8px;">
|
||||
<section style="flex:1;border-top:2px dashed #A7F3D0;"><span leaf=""><br></span></section>
|
||||
<section style="padding:0 8px;font-size:10px;color:#A7F3D0;"><span leaf="">✂</span></section>
|
||||
<section style="flex:1;border-top:2px dashed #A7F3D0;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="padding:10px 20px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">VALID FOR ONE READ</span></section>
|
||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">ADMIT ONE 🎫</span></section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 章节标题 chapter-title
|
||||
|
||||
**用途**：大章节分隔，编号 01/02/03…
|
||||
|
||||
**可替换字段**：`{{编号}}` `{{标题}}` `{{副标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid #1a1a1a;">
|
||||
<section style="background:#059669;color:#fff;font-size:12px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:18px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
|
||||
<section style="font-size:12px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
|
||||
</section>
|
||||
|
||||
<!-- 本章节正文内容放在这里 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 4 小节标题 subtitle
|
||||
|
||||
**用途**：章节内的二级标题。
|
||||
|
||||
**可替换字段**：`{{小节标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
|
||||
<section style="width:4px;height:16px;background:#059669;"><span leaf=""><br></span></section>
|
||||
<section style="font-size:15px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 5 正文段落 paragraph
|
||||
|
||||
**用途**：普通正文，可内嵌组件 6 文字强调。字号行高是本主题铁律，不要跟随其它主题改动。
|
||||
|
||||
**可替换字段**：`{{正文内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<p style="font-size:14px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 6 文字强调（5 种子样式）
|
||||
|
||||
**用途**：在正文段落内使用，按需选择一种，一段文字不要叠加超过 2 种。
|
||||
|
||||
### 6a. 绿色加粗 —— 产品名/工具名
|
||||
|
||||
```html
|
||||
<span style="color:#059669;font-weight:700;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
### 6b. 绿色高亮 —— 核心观点/关键数据
|
||||
|
||||
```html
|
||||
<span style="background:linear-gradient(120deg,#A7F3D0 0%,rgba(167,243,208,0) 100%);padding:0 4px;font-weight:600;color:#111;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
### 6c. 绿色下划线 —— 重要短语（正文关键词的默认标记）
|
||||
|
||||
```html
|
||||
<span style="border-bottom:2px solid #A7F3D0;font-weight:600;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
### 6d. 代码标签 —— 技术名词/模型名/命令
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
### 6e. 品牌紫色 —— Claude / Obsidian / Gemini 等 AI 品牌名专用
|
||||
|
||||
```html
|
||||
<span style="color:#7C3AED;font-weight:700;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
**使用原则**：产品/工具名用 6a；核心观点/关键数据用 6b；重要短语（次要强调，逐段标记默认用它）用 6c；技术名词/模型名用 6d；AI 品牌名专用 6e，不要把 6a 和 6e 混用在同一个词上。
|
||||
|
||||
---
|
||||
|
||||
## 组件 7 Case 标题 case-title
|
||||
|
||||
**用途**：案例/示例展示前的小标题，紧跟其后的内容是该案例的具体展开。
|
||||
|
||||
**可替换字段**：`{{case编号}}` `{{案例名称}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<p style="font-size:13px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
||||
<span leaf="">case{{case编号}}: {{案例名称}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 8 图片容器 image-ticket
|
||||
|
||||
**用途**：包裹图片，票据纸感边框（米黄底 + 细灰边）。**规则**：`<img>` 标签及其 `src`/`data-src` 原封不动复制，只套外层容器。
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="background:#fffef8;border:1px solid #eee;padding:6px;margin-bottom:0;">
|
||||
<figure style="margin:0;">
|
||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</figure>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 9 结论卡片 conclusion-card
|
||||
|
||||
**用途**：章节小结、观点总结。
|
||||
|
||||
**可替换字段**：`{{前缀}}` `{{结论内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 16px;margin-bottom:0;">
|
||||
<p style="font-size:14px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
||||
<span leaf="">{{前缀}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{结论内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 10 编号特点列表 numbered-feature-list
|
||||
|
||||
**用途**：特点、步骤、清单，每项独立一个卡片，可重复 N 次。
|
||||
|
||||
**可替换字段**：`{{序号}}` `{{小标题}}` `{{描述}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="background:#fffef8;border:1px solid #eee;margin-bottom:12px;">
|
||||
<section style="display:flex;align-items:stretch;">
|
||||
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;"><span leaf="">{{序号}}</span></section>
|
||||
<section style="flex:1;padding:12px 16px;font-size:13px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
|
||||
<span style="font-weight:600;color:#1a1a1a;"><span leaf="">{{小标题}}</span></span>
|
||||
<span leaf="">：{{描述}}</span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（本组件的 `border-left:1px dashed` 是撕票分隔线，属本主题风格特征，可直接使用，不受"正文强调不用虚线框"规则约束。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 11 核心观点卡片 key-point-card
|
||||
|
||||
**用途**：全文核心金句、关键数据，适合章节高潮或中段强调。硬阴影描边呼应票据封面。
|
||||
|
||||
**可替换字段**：`{{金句前半}}` `{{大数字}}`（可选）`{{金句后半}}` `{{补充说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;padding:20px;margin-bottom:0;">
|
||||
<p style="font-size:15px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
|
||||
<span leaf="">{{金句前半}}</span>
|
||||
<span style="color:#059669;font-size:24px;"><span leaf="">{{大数字}}</span></span>
|
||||
<span leaf="">{{金句后半}}</span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#555;line-height:1.8;margin:0;text-align:justify;">
|
||||
<span leaf="">{{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
无大数字时去掉中间那个 `font-size:24px` 的 `<span>`，整句金句合并放第一行 `<p>` 即可。
|
||||
|
||||
---
|
||||
|
||||
## 组件 12 标签组 tag-group
|
||||
|
||||
**用途**：#话题标签，可多个并排；也用于封面之外单独展示话题标签。
|
||||
|
||||
**可替换字段**：`{{#标签}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签1}}</span></section>
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签2}}</span></section>
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签3}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 13 结尾互动区 footer-cta（本主题的签名/CTA 区）
|
||||
|
||||
**用途**：文章结尾，票据风的"点赞·在看·星标"三连区，撕票虚线收尾。SVG 图标微信支持，原样保留。
|
||||
|
||||
**签名文案适配**：SKILL.md 的作者签名（"我是 {{作者名}}…"两段，默认占位、由用户替换）以正文段落（组件 5）形式放在本组件**之前**；本组件内部 `{{互动文案}}` 直接使用 SKILL.md 固定的第二段（"如果你觉得今天这篇有收获…三连，我们下篇见"），不要重复堆叠两句"三连"。
|
||||
|
||||
**可替换字段**：`{{互动文案}}`
|
||||
|
||||
```html
|
||||
<section style="padding:0 0 32px;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:24px 20px;text-align:center;">
|
||||
<p style="font-size:13px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
||||
<span leaf="">{{互动文案}}</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||
<section style="text-align:center;color:#555;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#fff;border:1px solid #1a1a1a;">
|
||||
<svg width="18" height="18" 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;color:#555;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#fff;border:1px solid #1a1a1a;">
|
||||
<svg width="18" height="18" 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;color:#059669;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#F0FDF4;border:2px solid #059669;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</section>
|
||||
<span style="font-size:10px;font-weight:600;"><span leaf="">星标</span></span>
|
||||
</section>
|
||||
</section>
|
||||
<section style="border-top:1px dashed #ccc;padding-top:12px;">
|
||||
<p style="font-size:10px;color:#999;letter-spacing:2px;margin:0;">
|
||||
<span leaf="">THANKS FOR READING ✂</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 14 结束符 end-mark
|
||||
|
||||
**用途**：文章最末尾收尾，放在外层容器（组件 1）内最后，footer-cta 之后。
|
||||
|
||||
```html
|
||||
<p style="text-align:center;color:#D1D5DB;font-size:14px;margin:24px 0 0 0;">
|
||||
<span leaf="">/</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 15 隐藏标记 hidden-mark
|
||||
|
||||
**用途**：微信编辑器兼容标记，放在外层容器（组件 1）**之外**，是整篇产物的最后一个元素。
|
||||
|
||||
```html
|
||||
<p style="display:none;">
|
||||
<mp-style-type data-value="3"></mp-style-type>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 多行代码块 → 用通用增量库
|
||||
|
||||
本主题不设专属多行代码块组件；Markdown 的三反引号围栏代码块直接用 `common-components.md` 的 1a 深色代码块（默认）或 1b 浅色代码块，左竖条/强调色换成本主题主色 `#059669`；行内代码用本主题组件 6d。
|
||||
|
||||
---
|
||||
|
||||
## 完整文章模板骨架
|
||||
|
||||
```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;">
|
||||
|
||||
<!-- 1. 票据封面（组件2 ticket-cover） -->
|
||||
|
||||
<!-- 2. 第一章（组件3 chapter-title） -->
|
||||
<!-- 章内：组件5 正文 + 组件6 行内强调 + 组件7 Case标题 + 组件8 图片 + 组件9 结论卡片 + 组件4 小节标题 + 组件10 编号特点列表（多项） -->
|
||||
|
||||
<!-- 3. 第二章…第N章（组件3，同上结构） -->
|
||||
|
||||
<!-- 4. 核心观点卡片（组件11，全文收束前的高潮句，放最后一章之后） -->
|
||||
|
||||
<!-- 5. 标签组（组件12，可选，全文话题标签汇总） -->
|
||||
|
||||
<!-- 6. 固定签名段落（组件5 正文段落，SKILL.md 固定文案，footer-cta 之前） -->
|
||||
|
||||
<!-- 7. 结尾互动区（组件13 footer-cta） -->
|
||||
|
||||
<!-- 8. 结束符（组件14 end-mark） -->
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 9. 隐藏标记（组件15 hidden-mark，外层容器之外，全文最后一个元素） -->
|
||||
```
|
||||
|
||||
**骨架铁律**：本主题**不设目录/导航组件**——票据风强调"一张凭证从头看到尾"的阅读仪式，不做分段跳读；组件 15 隐藏标记必须在组件 1 全局容器闭合**之后**，是整篇产物真正的最后一个元素。
|
||||
|
||||
---
|
||||
|
||||
## 视觉层级（3 层递进）
|
||||
|
||||
| 层级 | 样式 | 用途 | 频率 |
|
||||
|------|------|------|------|
|
||||
| **锚点层** | 硬阴影卡片（票据封面 2 / 核心观点卡片 11）、绿色加粗 6a | 封面信息、全文金句、产品名 | 全文 ≤5 处 |
|
||||
| **标记层** | 绿色下划线 6c（默认）、绿色高亮 6b | 正文关键词强调 | 每段 1~3 处 |
|
||||
| **容器层** | 结论卡片 9、编号特点列表 10、标签组 12 | 小结、清单、话题标签 | 按需 |
|
||||
|
||||
**克制原则**：
|
||||
- 硬阴影卡片（`box-shadow` 无虚化偏移）是本主题最强锚点，全文不超过 3 处（封面 + 核心观点卡片 + 结尾互动区，均为骨架固定位），不要在正文中段随意再加一个硬阴影卡片
|
||||
- 绿色高亮每段不超过 1-2 处；一段内不超过 2 种强调叠加
|
||||
- 品牌紫色 6e 只用于 AI 品牌专名，不用于普通强调
|
||||
|
||||
---
|
||||
|
||||
## 文章类型 → 组件组合配方
|
||||
|
||||
按 SKILL.md 第 3 步判定的文章类型选配方；核心组件构成本篇的排版主旋律，点缀组件按内容出现处使用，一篇文章点缀组件种类 ≤3。
|
||||
|
||||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||||
|---|---|---|
|
||||
| 教程/操作指南 | 编号特点列表 10（步骤化）+ Case 标题 7 + 结论卡片 9 | 图片容器 8、代码标签 6d |
|
||||
| 盘点/工具清单 | 标签组 12 + 编号特点列表 10 + 核心观点卡片 11 | 图片容器 8、结论卡片 9 |
|
||||
| 观点/深度分析 | 正文段落 5 + 结论卡片 9 + 核心观点卡片 11 | 小节标题 4、绿色高亮 6b |
|
||||
| 访谈/人物特稿 | 正文段落 5 + Case 标题 7（人物/场景切分）+ 结论卡片 9 | 核心观点卡片 11（引语金句） |
|
||||
| 数据复盘/报告 | 核心观点卡片 11（大数字）+ 编号特点列表 10 + 结论卡片 9 | 代码标签 6d（术语/指标名） |
|
||||
| 生活/情感随笔 | 正文段落 5 + 核心观点卡片 11（无大数字版）+ 结论卡片 9（少量） | 小节标题 4 |
|
||||
| 案例实战 | Case 标题 7 + 图片容器 8 + 结论卡片 9 + 编号特点列表 10 | 核心观点卡片 11 |
|
||||
|
||||
所有类型共用固定结构：票据封面 2 + 章节标题 3 + 固定签名段落 + 结尾互动区 13 + 结束符 14 + 隐藏标记 15。
|
||||
|
||||
---
|
||||
|
||||
## Markdown → 摸鱼票据风 映射规则
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；票据封面大标题从中提炼 |
|
||||
| 文章开头 `> 引言` | 并入封面简介段落 | 票据封面无独立引言卡组件 |
|
||||
| `## 章节标题` | 组件 3 chapter-title | 编号 01/02/03… |
|
||||
| `### 子标题` | 组件 4 subtitle | 左竖条小标题 |
|
||||
| 普通段落 | 组件 5 paragraph | 每段主动标 1~3 处绿色下划线 6c |
|
||||
| `**加粗文字**` | 组件 6a 绿色加粗 | 产品名/工具名 |
|
||||
| `==高亮文字==` | 组件 6b 绿色高亮 | 核心观点/关键数据，每段 ≤2 处 |
|
||||
| `<u>下划线</u>` / `++文字++` | 组件 6c 绿色下划线 | 次要强调（默认标记） |
|
||||
| AI 品牌名（Claude/Obsidian/Gemini 等） | 组件 6e 品牌紫色 | 不与 6a 混用 |
|
||||
| 案例/示例小标题 | 组件 7 case-title | case01/02… |
|
||||
| `` | 组件 8 image-ticket | `src`/`data-src` 原样保留，不改写 |
|
||||
| 章节小结/观点 | 组件 9 conclusion-card | |
|
||||
| 特点/步骤/清单 | 组件 10 numbered-feature-list | 每项一张卡片 |
|
||||
| 核心金句/关键数据 | 组件 11 key-point-card | 硬阴影锚点层，全文慎用 |
|
||||
| `> 引用段落`（非开头） | 组件 9 conclusion-card 或并入正文 | 本主题无独立引用块组件 |
|
||||
| `#话题` 标签 | 组件 12 tag-group | |
|
||||
| 行内 `` `code` `` / 技术名词/模型名 | 组件 6d 代码标签 | |
|
||||
| ` ``` 多行代码块 ``` ` | 通用库 1a 深色（默认）/ 1b 浅色 | 左竖条换本主题主色 `#059669` |
|
||||
| 文末 | 组件 13 footer-cta（+ 14 end-mark） | 固定签名段落放 footer-cta 前 |
|
||||
@@ -0,0 +1,974 @@
|
||||
# 公众号排版组件库 —— 橄榄手记
|
||||
|
||||
> **使用说明**：本组件库为「橄榄手记」主题，所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||||
>
|
||||
> **设计风格**：内刊/编辑部手记质感——米白纸感底 + 墨黑强调 + 橄榄灰边框，橙色作画龙点睛的强调色，陶土棕作次强调/进行中状态色。信息密度偏高、分节形式多样（刊头条/期号徽章/前导词标题交替使用），适合系统性说明文档、深度评测、案例复盘一类内容，气质克制、理性、略带"内部资料"的严肃感。
|
||||
>
|
||||
> **公众号平台限制须知**：
|
||||
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id、`position:fixed/absolute`、`float`、`@media`/`@keyframes`、`display:grid`
|
||||
> - ✅ 支持内联 `style`、`display:flex`（含 `gap`）、`box-shadow`、`border-radius`、`<svg>`（流程图/图标，微信支持）、`<section>/<p>/<span>/<strong>/<img>/<h3>/<h4>/<figure>/<figcaption>/<hr>/<ul>/<li>` 等基础标签
|
||||
>
|
||||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||||
> - 原始设计稿里出现的 `id="block-*"`、`class="..."`、`display:grid` 均已在下方组件中清除/替换为 `display:flex`，新增组件时同样不能带这三样
|
||||
> - 行内代码一律用 `<span>` 模拟（不用 `<code>` 标签），风格与通用库 1c 保持同源
|
||||
> - 图片一律只保留 `src`/`alt`/`style`，不要带 `class`/`data-ratio`/`data-w`/`data-imgqrcoded` 等编辑器内部属性
|
||||
> - 流程示意图（组件 23）内文字用 SVG `<tspan leaf="">` 而非 `<span leaf="">`——SVG 是原子渲染，不受微信富文本重排影响，校验脚本可能仍会把这几处计入"未包裹"warning，属已知误报，可忽略
|
||||
|
||||
---
|
||||
|
||||
## 设计变量速查表
|
||||
|
||||
```
|
||||
主题墨色（强调/CTA/深底）： #1e1f23
|
||||
标题色： #23251d
|
||||
正文色： #4d4f46
|
||||
次要文字： #65675e
|
||||
弱化文字： #9ea096
|
||||
边框/分隔线： #bfc1b7
|
||||
米白背景： #fdfdf8
|
||||
浅橄榄灰背景： #eeefe9
|
||||
标签浅底： #e5e7e0
|
||||
强调橙（关键词下划线/前导词/CTA）： #ed7b2f
|
||||
陶土棕装饰（进行中/次强调）： #d4c9b8（配边框 #b17816）
|
||||
正文字号： 14px
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
最大宽度： 677px
|
||||
容器内边距： 8px
|
||||
区块间距： margin-top: 24px（首块头图卡除外）
|
||||
圆角： 6px（统一小圆角，不用大圆角）
|
||||
阴影： 整体几乎无阴影，靠边框 + 色块分层，仅头图卡的插画占位区可有极轻装饰
|
||||
```
|
||||
|
||||
字体栈：`'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||
|
||||
**正文关键词下划线**（对应 theme-index"正文下划线 CSS"列）：`border-bottom:2px solid #ed7b2f;font-weight:600;color:#23251d;`——直接复用本主题头图卡"强调词"与重点观点卡里已经出现的橙色下划线语言，保持主题内一致。
|
||||
|
||||
---
|
||||
|
||||
## 组件 1 全局容器
|
||||
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;padding:8px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
|
||||
|
||||
<!-- 所有组件放在这里，第一个子元素是组件 2 头图卡，其余组件均自带 margin-top:24px -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 2 头图卡 hero-card
|
||||
|
||||
**用途**：文章开篇头图区，内刊风格：顶部标签+日期条，主标题+强调词，侧边配一枚手绘风占位插画，底部深色摘要条收尾。整篇文章唯一一处、放在最前面，不设 `margin-top`。
|
||||
|
||||
**可替换字段**：`{{内刊标签}}` `{{日期}}` `{{旧标题占位}}`（可选，删除线小字，无需要时整行删除）`{{主标题}}` `{{强调词}}` `{{副标题说明}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
|
||||
|
||||
```html
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;">
|
||||
<section style="padding:28px 24px 22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:22px;">
|
||||
<span style="width:8px;height:8px;background:#1e1f23;border-radius:50%;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="font-size:10px;font-weight:700;letter-spacing:3px;color:#65675e;"><span leaf="">{{内刊标签}}</span></span>
|
||||
<span style="flex:1;height:1px;background:#bfc1b7;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="font-size:10px;color:#9ea096;font-weight:500;font-variant-numeric:tabular-nums;"><span leaf="">{{日期}}</span></span>
|
||||
</section>
|
||||
<section style="display:flex;align-items:stretch;gap:18px;">
|
||||
<section style="flex:1;min-width:0;">
|
||||
<p style="font-size:14px;color:#9ea096;margin:0 0 8px;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧标题占位}}</span></p>
|
||||
<p style="font-size:24px;font-weight:800;color:#23251d;margin:0 0 10px;line-height:1.15;letter-spacing:-0.75px;">
|
||||
<span leaf="">{{主标题}}</span><span style="color:#4d4f46;"><span leaf=""> · </span></span><span style="border-bottom:3px solid #e5e7e0;"><span leaf="">{{强调词}}</span></span>
|
||||
</p>
|
||||
<section style="display:flex;align-items:center;gap:4px;margin-bottom:12px;">
|
||||
<span style="width:22px;height:3px;background:#1e1f23;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="width:8px;height:3px;background:#bfc1b7;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
</section>
|
||||
<p style="font-size:13px;color:#65675e;margin:0;line-height:1.7;"><span leaf="">{{副标题说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex-shrink:0;width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eeefe9;border:1px dashed #bfc1b7;border-radius:6px;padding:8px;">
|
||||
<svg width="72" height="72" viewBox="0 0 64 64" aria-hidden="true" style="display:block;">
|
||||
<ellipse cx="32" cy="36" rx="22" ry="18" fill="none" stroke="#4d4f46" stroke-width="2"></ellipse>
|
||||
<circle cx="26" cy="30" r="3" fill="#4d4f46"></circle>
|
||||
<circle cx="38" cy="30" r="3" fill="#4d4f46"></circle>
|
||||
<path d="M28 40 Q32 44 36 40" fill="none" stroke="#4d4f46" stroke-width="1.5"></path>
|
||||
<path d="M12 34 L8 28 M52 34 L56 28" stroke="#bfc1b7" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<span style="font-size:8px;font-weight:700;color:#9ea096;letter-spacing:1px;margin-top:4px;"><span leaf="">DOODLE</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="background:#1e1f23;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||
<p style="font-size:12px;color:rgba(255,255,255,0.92);margin:0;font-weight:600;"><span leaf="">{{底部摘要}}</span></p>
|
||||
<section style="display:flex;gap:6px;flex-wrap:wrap;">
|
||||
<span style="background:#e5e7e0;color:#23251d;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid #bfc1b7;"><span leaf="">{{标签1}}</span></span>
|
||||
<span style="background:#e5e7e0;color:#23251d;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid #bfc1b7;"><span leaf="">{{标签2}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（`{{旧标题占位}}` 那一行没有真实"旧标题"内容时整行 `<p>` 删除，不留占位删除线空行。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 章节标题 section-title
|
||||
|
||||
**用途**：大章节分隔，默认编号形式 01/02/03…，本主题最常用的章节标题。
|
||||
|
||||
**可替换字段**：`{{编号}}` `{{标题}}` `{{副标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;gap:14px;">
|
||||
<section style="text-align:center;flex-shrink:0;">
|
||||
<p style="margin:0;font-size:24px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">{{编号}}</span></p>
|
||||
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">PART</span></p>
|
||||
</section>
|
||||
<span style="width:1px;height:36px;background:#bfc1b7;flex-shrink:0;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 1px;font-size:17px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{标题}}</span></p>
|
||||
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{副标题}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 4 内刊标签条 masthead-minimal-label
|
||||
|
||||
**用途**：轻量分节条，比章节标题更轻，适合章节之间的期号/存档标记，或不需要大标题的小节过渡。
|
||||
|
||||
**可替换字段**：`{{刊头标签}}` `{{版本号}}` `{{存档说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;padding:12px 16px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:4px;color:#23251d;"><span leaf="">{{刊头标签}}</span></p>
|
||||
<section style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span style="font-size:10px;color:#65675e;font-weight:700;"><span leaf="">{{版本号}}</span></span>
|
||||
<span style="font-size:10px;color:#9ea096;"><span leaf="">{{存档说明}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 5 暗色标题条 masthead-black-strip
|
||||
|
||||
**用途**：强调型分节条，深色底，适合专题/特辑开篇，比组件 4 更重、更醒目，一篇文章慎用（≤1-2 处）。
|
||||
|
||||
**可替换字段**：`{{刊头标签}}` `{{说明文字}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#1e1f23;border:1px solid #23251d;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:4px;color:#ffffff;"><span leaf="">{{刊头标签}}</span></p>
|
||||
<p style="margin:0;font-size:10px;color:rgba(255,255,255,0.68);"><span leaf="">{{说明文字}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 6 期号徽章条 masthead-issue-badge
|
||||
|
||||
**用途**：圆形编号徽章 + 说明，适合子章节或专题起始，比组件 3 章节标题更紧凑、更像"期刊卷号"。
|
||||
|
||||
**可替换字段**：`{{期号}}` `{{标题}}` `{{说明}}` `{{卷标}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:14px 16px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<section style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#1e1f23;color:#fff;font-size:11px;font-weight:800;"><span leaf="">{{期号}}</span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 3px;font-size:11px;font-weight:800;color:#23251d;letter-spacing:1px;"><span leaf="">{{标题}}</span></p>
|
||||
<p style="margin:0;font-size:11px;color:#65675e;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
<span style="font-size:10px;color:#9ea096;"><span leaf="">{{卷标}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 7 步骤内联标题 step-heading-inline
|
||||
|
||||
**用途**：教程类文章的步骤小标题，"Step N" 药丸标签 + 标题文字，一行紧凑呈现。
|
||||
|
||||
**可替换字段**：`{{步骤序号}}` `{{步骤标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="background:#1e1f23;color:#fff;padding:4px 10px;border-radius:4px;font-size:11px;font-weight:700;"><span leaf="">{{步骤序号}}</span></span>
|
||||
<span style="font-size:14px;font-weight:600;color:#4d4f46;"><span leaf="">{{步骤标题}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 8 强调标题 highlight-title
|
||||
|
||||
**用途**：三级标题，底纹强调（荧光笔式内阴影），比组件 7/9 更强调"标题本身值得注意"，适合观点类文章的核心论点小标题。
|
||||
|
||||
**可替换字段**：`{{标题文字}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#23251d;margin:0;padding:0 2px;display:block;width:fit-content;box-shadow:inset 0 -0.5em 0 rgba(245,78,0,0.18);"><span leaf="">{{标题文字}}</span></h3>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 9 前导词标题 kicker-title
|
||||
|
||||
**用途**：带前导词（Kicker）+ 进度指示的标题，适合系列文章的分节，右侧可标"当前/总数"。
|
||||
|
||||
**可替换字段**：`{{Kicker标签}}` `{{标题}}` `{{进度}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid #bfc1b7;padding-bottom:10px;">
|
||||
<span style="font-size:10px;font-weight:800;letter-spacing:3px;color:#ed7b2f;text-transform:uppercase;"><span leaf="">{{Kicker标签}}</span></span>
|
||||
<span style="font-size:18px;font-weight:800;color:#23251d;line-height:1.2;"><span leaf="">{{标题}}</span></span>
|
||||
<span style="margin-left:auto;font-size:10px;color:#9ea096;font-variant-numeric:tabular-nums;"><span leaf="">{{进度}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 10 正文段落 richtext-paragraph
|
||||
|
||||
**用途**：普通正文，可内嵌下方"文字强调 a-e"任意子样式。字号/颜色/行高是本主题铁律。
|
||||
|
||||
**可替换字段**：`{{正文内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 文字强调（5 种子样式，正文段落内使用，一段不叠加超过 2 种）
|
||||
|
||||
**a. 强调加粗** —— 重要术语/产品名
|
||||
|
||||
```html
|
||||
<strong style="color:#23251d;"><span leaf="">{{文字}}</span></strong>
|
||||
```
|
||||
|
||||
**b. 浅底高亮框** —— 关键信息/数据
|
||||
|
||||
```html
|
||||
<span style="background:#eeefe9;padding:1px 5px;border-radius:4px;font-weight:600;color:#23251d;border:1px solid #bfc1b7;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
**c. 橙色下划线** —— 重要短语（正文关键词的默认标记，对应 theme-index 权威下划线值）
|
||||
|
||||
```html
|
||||
<span style="border-bottom:2px solid #ed7b2f;font-weight:600;color:#23251d;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
**d. 行内代码标签** —— 技术名词/字段名/命令
|
||||
|
||||
```html
|
||||
<span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span>
|
||||
```
|
||||
|
||||
**e. 删除线旧词** —— 与"新旧对照段落"（组件 12）配套，单独用时表示"已废弃/被替代的说法"
|
||||
|
||||
```html
|
||||
<span style="color:#9ea096;text-decoration:line-through;"><span leaf="">{{旧文字}}</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 11 行内代码段落 inline-code-paragraph
|
||||
|
||||
**用途**：正文中需要突出一小段代码/命令/字段名的整句表达（比文字强调 d 更完整的一句话场景）。
|
||||
|
||||
**可替换字段**：`{{正文前半}}` `{{代码}}` `{{正文后半}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0;font-size:14px;color:#4d4f46;line-height:1.9;">
|
||||
<span leaf="">{{正文前半}} </span><span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span><span leaf=""> {{正文后半}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 12 新旧对照段落 before-after-paragraph
|
||||
|
||||
**用途**：术语变更、观点修正、版本对比等"从 A 到 B"的一句话表达。
|
||||
|
||||
**可替换字段**：`{{旧表述}}` `{{新表述}}` `{{差异点}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;">
|
||||
<span style="font-size:14px;color:#9ea096;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧表述}}</span></span>
|
||||
<span style="margin-left:6px;font-weight:700;color:#23251d;"><span leaf="">{{新表述}}</span></span>
|
||||
<span style="margin-left:6px;background:#e5e7e0;padding:1px 5px;border-radius:4px;font-weight:600;color:#23251d;border:1px solid #bfc1b7;"><span leaf="">{{差异点}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 13 无序列表 bullet-list-basic
|
||||
|
||||
**用途**：简单并列条目，不需要标题+说明两层结构时用它（需要两层结构用组件 24）。
|
||||
|
||||
**可替换字段**：`{{列表项}}`（可重复 N 次）
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<ul style="margin:0;padding-left:22px;line-height:1.8;list-style-position:outside;">
|
||||
<li style="margin-bottom:8px;font-size:15px;color:#4d4f46;list-style-type:disc;">
|
||||
<section><span leaf="">{{列表项}}</span></section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 14 编者按 editors-note
|
||||
|
||||
**用途**：深色标题条 + 浅底正文，用于章节前的提醒/背景说明，也可用作文章开头的引言卡。
|
||||
|
||||
**可替换字段**：`{{批注标签}}`（如 `EDITOR'S NOTE`）`{{批注小字}}` `{{编者按正文}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="padding:10px 16px;background:#1e1f23;display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:2px;color:#ffffff;"><span leaf="">{{批注标签}}</span></p>
|
||||
<span style="font-size:10px;color:rgba(255,255,255,0.65);"><span leaf="">{{批注小字}}</span></span>
|
||||
</section>
|
||||
<section style="padding:16px 18px 18px;background:#eeefe9;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 15 重点观点卡 key-point-card
|
||||
|
||||
**用途**：段落级重点强调，比正文强调更完整——独立成一张卡片，内部用橙色下划线扣题。
|
||||
|
||||
**可替换字段**：`{{重点观点}}` `{{补充说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="background:#fdfdf8;border-radius:6px;padding:16px 18px;border:1px solid #bfc1b7;">
|
||||
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.8;text-align:justify;">
|
||||
<strong style="color:#23251d;border-bottom:3px solid #ed7b2f;"><span leaf="">{{重点观点}}</span></strong><span leaf=""> {{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 16 分割线 divider-solid
|
||||
|
||||
**用途**：简单实线分割，章节内部小段落之间的轻量切分。
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<hr style="border:none;height:2px;background:#bfc1b7;margin:0;">
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 17 分割点 divider-dots
|
||||
|
||||
**用途**：三色点缀分隔符，比实线更轻、更有设计感，适合情绪/生活类内容的段落间隔。
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="display:flex;align-items:center;justify-content:center;gap:10px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:#4d4f46;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:#bfc1b7;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:#ed7b2f;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 18 通栏图片 media-full-bleed-image
|
||||
|
||||
**用途**：无说明文字的通栏大图，边到边出血效果（负边距抵消容器 8px 内边距，让图片视觉上顶到最边缘）。
|
||||
|
||||
**可替换字段**：`{{图片URL}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="padding:0 8px;margin:0 -8px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="background:#fdfdf8;border-radius:6px;padding:6px;border:1px solid #bfc1b7;">
|
||||
<figure style="margin:0;border-radius:4px;overflow:hidden;">
|
||||
<span leaf=""><img src="{{图片URL}}" alt="通栏图片" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</figure>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 19 图片卡 image-card
|
||||
|
||||
**用途**：带说明文字的图片，`<img>` 的 `src` 原样保留用户给的 URL，不改写。
|
||||
|
||||
**可替换字段**：`{{图片URL}}` `{{图片说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<figure style="font-family:'IBM Plex Sans',-apple-system,sans-serif;margin:0;">
|
||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;display:block;">
|
||||
<span leaf=""><img src="{{图片URL}}" alt="图片" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
<figcaption style="font-size:13px;line-height:1.7;color:#65675e;text-align:center;margin-top:10px;"><span leaf="">{{图片说明}}</span></figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
```
|
||||
|
||||
无说明文字时删掉 `<figcaption>`。
|
||||
|
||||
---
|
||||
|
||||
## 组件 20 图表占位卡 chart-card
|
||||
|
||||
**用途**：图表/可视化的占位展示区，标签+占位框。有真实图表图片时，把占位框内容换成组件 19 的图片写法。
|
||||
|
||||
**可替换字段**：`{{图表标签}}`（如 `CHART`）`{{占位说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0 0 12px;font-size:12px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{图表标签}}</span></p>
|
||||
<section style="min-height:140px;border-radius:6px;background:#eeefe9;display:flex;align-items:center;justify-content:center;border:1px dashed #bfc1b7;">
|
||||
<span style="font-size:14px;color:#4d4f46;"><span leaf="">{{占位说明}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 21 对比摘要卡 compare-summary
|
||||
|
||||
**用途**：二元对比（A vs B），左右两栏，一侧深底强调、一侧浅底常规，`vs` 居中分隔。
|
||||
|
||||
**可替换字段**：`{{左侧标题}}` `{{左侧说明}}` `{{右侧标题}}` `{{右侧说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;padding:16px;border-radius:6px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:stretch;justify-content:center;gap:8px;">
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#1e1f23;border-radius:6px;border:1px solid #23251d;">
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;"><span leaf="">{{左侧标题}}</span></p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.75);margin:0;line-height:1.5;"><span leaf="">{{左侧说明}}</span></p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;color:#bfc1b7;font-size:14px;padding:0 4px;"><span leaf="">vs</span></section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#23251d;margin:0 0 3px;"><span leaf="">{{右侧标题}}</span></p>
|
||||
<p style="font-size:10px;color:#65675e;margin:0;line-height:1.5;"><span leaf="">{{右侧说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 22 精简对照表 compare-table-lite
|
||||
|
||||
**用途**：真实数据/维度对照表格语义（参数表、字段表），用 `flex` 仿表格结构（不用 `table`/`grid`）。行数按需重复"数据行"结构。
|
||||
|
||||
**可替换字段**：`{{维度列名}}` `{{方案A名}}` `{{方案B名}}` + 每行 `{{行标题}}` `{{A值}}` `{{B值}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;background:#fdfdf8;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;background:#eeefe9;border-bottom:1px solid #bfc1b7;">
|
||||
<section style="width:35%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;"><span leaf="">{{维度列名}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案A名}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案B名}}</span></section>
|
||||
</section>
|
||||
<section style="display:flex;border-bottom:1px solid #bfc1b7;">
|
||||
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||
</section>
|
||||
<section style="display:flex;">
|
||||
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（最后一行不带 `border-bottom`；行数不止 2 行时，中间行都带 `border-bottom:1px solid #bfc1b7`，只有最后一行不带。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 23 流程示意图 flow-diagram
|
||||
|
||||
**用途**：技术流程/数据管线一类"从输入到输出"的示意图，SVG 绘制，节点用矩形+箭头连接，末端用深色终点框强调结果。
|
||||
|
||||
**可替换字段**：`{{FLOW标签}}` `{{流程说明}}` `{{图示脚注}}`，以及图中各节点文字（`SDK`/`ingest`/`队列`/`规则`/`聚合`/`输出`/`图表`/`live` 等，按实际流程改写）
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;border-radius:6px;padding:22px 18px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="font-size:10px;color:#65675e;margin:0 0 4px;text-transform:uppercase;letter-spacing:2px;font-weight:600;"><span leaf="">{{FLOW标签}}</span></p>
|
||||
<p style="font-size:13px;color:#23251d;font-weight:600;margin:0 0 8px;"><span leaf="">{{流程说明}}</span></p>
|
||||
<svg viewBox="0 0 400 82" style="width:100%;height:auto;" role="img" aria-label="流程示意">
|
||||
<rect x="2" y="14" width="58" height="48" rx="4" fill="#fdfdf8" stroke="#4d4f46" stroke-width="1.5"></rect>
|
||||
<text x="31" y="34" font-size="9" fill="#23251d" text-anchor="middle" font-weight="700" font-family="IBM Plex Sans,sans-serif"><tspan leaf="">节点一</tspan></text>
|
||||
<text x="31" y="48" font-size="8" fill="#65675e" text-anchor="middle"><tspan leaf="">说明</tspan></text>
|
||||
<line x1="66" y1="38" x2="82" y2="38" stroke="#4d4f46" stroke-width="1.5"></line>
|
||||
<polygon points="82,34 90,38 82,42" fill="#4d4f46"></polygon>
|
||||
<rect x="96" y="6" width="210" height="64" rx="6" fill="#fdfdf8" stroke="#bfc1b7" stroke-width="1"></rect>
|
||||
<text x="201" y="18" font-size="7" fill="#9ea096" text-anchor="middle" font-weight="600" letter-spacing="1"><tspan leaf="">处理层</tspan></text>
|
||||
<rect x="104" y="26" width="42" height="36" rx="4" fill="#e5e7e0" stroke="#bfc1b7"></rect>
|
||||
<text x="125" y="48" font-size="8" fill="#23251d" text-anchor="middle" font-weight="600"><tspan leaf="">节点二</tspan></text>
|
||||
<rect x="152" y="26" width="42" height="36" rx="4" fill="#e5e7e0" stroke="#bfc1b7"></rect>
|
||||
<text x="173" y="48" font-size="8" fill="#23251d" text-anchor="middle" font-weight="600"><tspan leaf="">节点三</tspan></text>
|
||||
<rect x="200" y="26" width="42" height="36" rx="4" fill="#e5e7e0" stroke="#bfc1b7"></rect>
|
||||
<text x="221" y="48" font-size="8" fill="#23251d" text-anchor="middle" font-weight="600"><tspan leaf="">节点四</tspan></text>
|
||||
<rect x="248" y="26" width="50" height="36" rx="4" fill="#d4c9b8" stroke="#b17816"></rect>
|
||||
<text x="273" y="48" font-size="8" fill="#23251d" text-anchor="middle" font-weight="600"><tspan leaf="">输出</tspan></text>
|
||||
<line x1="312" y1="38" x2="328" y2="38" stroke="#4d4f46" stroke-width="1.5"></line>
|
||||
<polygon points="328,34 336,38 328,42" fill="#4d4f46"></polygon>
|
||||
<rect x="340" y="12" width="56" height="52" rx="4" fill="#1e1f23"></rect>
|
||||
<text x="368" y="36" font-size="8" fill="#fff" text-anchor="middle" font-weight="700"><tspan leaf="">结果</tspan></text>
|
||||
<text x="368" y="50" font-size="8" fill="#ed7b2f" text-anchor="middle" font-weight="700"><tspan leaf="">live</tspan></text>
|
||||
</svg>
|
||||
<p style="font-size:11px;color:#65675e;margin:14px 0 0;border-top:1px solid #bfc1b7;padding-top:12px;line-height:1.5;"><span leaf="">{{图示脚注}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 24 条目列表卡 item-list-card
|
||||
|
||||
**用途**：标题+说明两层结构的并列条目（比组件 13 无序列表信息量更大），胶囊标题 + 圆点色标 + 说明段落，可重复 N 次。
|
||||
|
||||
**可替换字段**：`{{条目标题}}` `{{条目说明}}`；圆点颜色可在 `#ed7b2f`（强调）/`#4d4f46`（常规）间轮换区分条目类型
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:13px;font-weight:700;color:#23251d;background:#e5e7e0;padding:3px 10px;border-radius:999px;border:1px solid #bfc1b7;">
|
||||
<span style="display:inline-block;width:6px;height:6px;background:#ed7b2f;border-radius:50%;margin-right:5px;vertical-align:middle;overflow:hidden;font-size:0;line-height:0;"><span leaf=""> </span></span><span leaf=""> {{条目标题}} </span>
|
||||
</span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#4d4f46;margin:0;line-height:1.7;text-align:justify;"><span leaf="">{{条目说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 25 常见问题列表 faq-listing
|
||||
|
||||
**用途**：结尾或章节内的 FAQ 清单，编号+问题一行式，简洁不展开答案（答案另起正文段落）。
|
||||
|
||||
**可替换字段**：`{{FAQ标签}}`（如 `COMMON QUESTIONS`）`{{问题}}`（可重复 N 次）
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;padding:18px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0 0 12px;font-size:10px;line-height:1.6;color:#9ea096;letter-spacing:3px;font-weight:800;"><span leaf="">{{FAQ标签}}</span></p>
|
||||
<section style="padding:10px 0;border-top:1px solid #bfc1b7;">
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">01 / {{问题}}</span></p>
|
||||
</section>
|
||||
<section style="padding:10px 0;border-top:1px solid #bfc1b7;border-bottom:1px solid #bfc1b7;">
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">02 / {{问题}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（问题多于 2 条时，中间条目只加 `border-top`，最后一条同时加 `border-top` + `border-bottom` 收尾。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 26 案例时间线 case-timeline
|
||||
|
||||
**用途**：单个案例的完整展开——CASE 标签+标题、行业/规模、描述、配图、结果总结，左侧带时间线圆点+竖线。
|
||||
|
||||
**可替换字段**：`{{案例标题}}` `{{行业规模}}` `{{案例描述}}` `{{图片URL}}` `{{结果总结}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;">
|
||||
<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 #1e1f23;background:#fdfdf8;margin-top:4px;"><span leaf=""><br></span></section>
|
||||
<section style="width:2px;background:#bfc1b7;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:#1e1f23;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;"><span leaf="">CASE</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#23251d;margin:0;"><span leaf="">{{案例标题}}</span></h4>
|
||||
</section>
|
||||
<p style="font-size:11px;font-weight:600;color:#65675e;letter-spacing:1px;margin:0 0 12px;"><span leaf="">{{行业规模}}</span></p>
|
||||
<p style="font-size:14px;margin:0 0 14px;color:#4d4f46;line-height:1.7;text-align:justify;"><span leaf="">{{案例描述}}</span></p>
|
||||
<section style="text-align:center;margin-bottom:4px;">
|
||||
<span leaf=""><img src="{{图片URL}}" alt="案例配图" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:6px;border:1px solid #bfc1b7;"></span>
|
||||
</section>
|
||||
<p style="font-size:14px;margin:12px 0 0;color:#4d4f46;line-height:1.7;text-align:justify;"><strong style="color:#23251d;"><span leaf="">{{结果总结}}</span></strong></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（无配图时删掉中间的图片 `<section>`；作为全文最后一个案例时，把最外层竖线 `<section>` 的 `flex:1;min-height:48px` 删掉，避免尾部多出一截空线。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 27 信任墙 summary-logo-wall
|
||||
|
||||
**用途**：Logo/来源引用墙，3 个一行、自动换行，用于引用来源、合作方、参考资料出处等场景。
|
||||
|
||||
**可替换字段**：`{{标签}}`（如 `TRUST`/`来源`）`{{分组说明}}` + 6 个 `{{LOGO占位}}`（可增减数量）
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;">
|
||||
<p style="margin:0;font-size:12px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{标签}}</span></p>
|
||||
<span style="font-size:11px;color:#9ea096;"><span leaf="">{{分组说明}}</span></span>
|
||||
</section>
|
||||
<section style="display:flex;flex-wrap:wrap;gap:10px;">
|
||||
<section style="width:31%;height:46px;border-radius:6px;background:#eeefe9;border:1px solid #bfc1b7;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#9ea096;"><span leaf="">{{LOGO占位}}</span></section>
|
||||
<section style="width:31%;height:46px;border-radius:6px;background:#eeefe9;border:1px solid #bfc1b7;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#9ea096;"><span leaf="">{{LOGO占位}}</span></section>
|
||||
<section style="width:31%;height:46px;border-radius:6px;background:#eeefe9;border:1px solid #bfc1b7;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#9ea096;"><span leaf="">{{LOGO占位}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 28 结尾行动区 ending-actions（本主题的签名/CTA 区）
|
||||
|
||||
**用途**：文章结尾，点赞·在看·收藏三连区，浅底图标块。
|
||||
|
||||
**签名文案适配**：SKILL.md 的作者签名（"我是 {{作者名}}…"两段，默认占位、由用户替换）以正文段落（组件 10）形式放在本组件**之前**；本组件内部 `{{文末互动引导}}` 直接使用 SKILL.md 固定的第二段（"如果你觉得今天这篇有收获…三连，我们下篇见"）。
|
||||
|
||||
**可替换字段**：`{{文末互动引导}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:22px 16px;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="font-size:13px;font-weight:700;color:#23251d;line-height:1.6;margin:0 0 14px;"><span leaf="">{{文末互动引导}}</span></p>
|
||||
<section style="display:flex;justify-content:center;gap:18px;margin-bottom:14px;flex-wrap:wrap;">
|
||||
<section style="text-align:center;color:#4d4f46;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#eeefe9;border-radius:6px;border:1px solid #bfc1b7;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><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:11px;font-weight:600;"><span leaf="">赞</span></span>
|
||||
</section>
|
||||
<section style="text-align:center;color:#4d4f46;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#eeefe9;border-radius:6px;border:1px solid #bfc1b7;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><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:11px;font-weight:600;"><span leaf="">在看</span></span>
|
||||
</section>
|
||||
<section style="text-align:center;color:#23251d;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#d4c9b8;border-radius:6px;border:1px solid #b17816;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#23251d" stroke-width="1.8" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</section>
|
||||
<span style="font-size:11px;font-weight:700;"><span leaf="">收藏</span></span>
|
||||
</section>
|
||||
</section>
|
||||
<p style="line-height:1.6;font-size:10px;color:#9ea096;letter-spacing:2px;margin:0;font-weight:500;"><span leaf="">THANKS FOR READING</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 29 路线胶囊组 roadmap-pills
|
||||
|
||||
**用途**：流程阶段/路线图，胶囊标签横排，颜色区分状态：默认（浅底）/进行中（陶土棕）/已完成或终态（墨黑实底白字）。
|
||||
|
||||
**可替换字段**：`{{标签}}`（如 `ROADMAP`）+ N 个 `{{阶段名}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:2px;color:#65675e;"><span leaf="">{{标签}}</span></p>
|
||||
<section style="display:flex;flex-wrap:wrap;gap:8px;">
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#e5e7e0;border:1px solid #bfc1b7;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#eeefe9;border:1px solid #bfc1b7;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#d4c9b8;border:1px solid #b17816;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·进行中}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#1e1f23;border:1px solid #23251d;font-size:12px;font-weight:700;color:#ffffff;"><span leaf="">{{阶段名·终态}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 30 暗色摘要分栏 dark-summary-split
|
||||
|
||||
**用途**：深色底左右分栏，左侧放结论（"内部结案摘要"式表达），右侧放下一步/待办，适合数据复盘、项目复盘类文章的收束。
|
||||
|
||||
**可替换字段**：`{{SUMMARY标签}}` `{{左侧结论}}` `{{NEXT标签}}` `{{右侧说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #23251d;background:#1e1f23;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:stretch;">
|
||||
<section style="flex:1;padding:18px 18px 20px;border-right:1px solid rgba(255,255,255,0.08);">
|
||||
<p style="margin:0 0 8px;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.55);font-weight:700;"><span leaf="">{{SUMMARY标签}}</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:rgba(255,255,255,0.92);"><span leaf="">{{左侧结论}}</span></p>
|
||||
</section>
|
||||
<section style="width:34%;min-width:120px;padding:18px;background:#23251d;display:flex;flex-direction:column;justify-content:center;gap:10px;">
|
||||
<span style="display:inline-block;padding:4px 8px;background:#eeefe9;color:#23251d;border-radius:4px;font-size:10px;font-weight:800;align-self:flex-start;"><span leaf="">{{NEXT标签}}</span></span>
|
||||
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(255,255,255,0.76);"><span leaf="">{{右侧说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 31 暗色摘要边框 dark-summary-outline
|
||||
|
||||
**用途**：深色底 + 反白内边框，收束全文的结论句/最强金句，适合观点类文章的终极收束（全文慎用，≤1 处）。
|
||||
|
||||
**可替换字段**：`{{CLOSING标签}}` `{{结尾金句}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#1e1f23;border:1px solid #23251d;padding:8px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="border:1px solid rgba(255,255,255,0.16);border-radius:4px;padding:20px 22px;">
|
||||
<p style="margin:0 0 8px;font-size:10px;line-height:1.6;color:#a3a3a3;letter-spacing:4px;font-weight:800;"><span leaf="">{{CLOSING标签}}</span></p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.9;color:#fafafa;font-weight:700;"><span leaf="">{{结尾金句}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
（内层 `border` 用双层嵌套模拟"反白内边框"效果，不依赖 `position`，兼容公众号平台。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 32 摘要横幅条 frontpage-summary-strip
|
||||
|
||||
**用途**：把结论压缩成一条可快速扫读的横幅，比组件 31 更轻，适合不需要"重锚点"的收束场景。
|
||||
|
||||
**可替换字段**：`{{摘要文字}}` `{{标签}}`（如 `SUMMARY`）
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:13px;line-height:1.7;color:#23251d;font-weight:700;"><span leaf="">{{摘要文字}}</span></p>
|
||||
<span style="font-size:10px;color:#65675e;font-weight:800;letter-spacing:2px;"><span leaf="">{{标签}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 33 作者签名条 author-signature
|
||||
|
||||
**用途**：小巧的作者署名胶囊，圆形字头像 + 一行签名文字，用于文中人物引语归属或结尾前的署名标记。
|
||||
|
||||
**可替换字段**：`{{头像字}}`（姓名首字）`{{签名文字}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<span style="display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:#eeefe9;border:1px solid #bfc1b7;border-radius:999px;">
|
||||
<span style="width:22px;height:22px;border-radius:50%;background:#1e1f23;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;"><span leaf="">{{头像字}}</span></span>
|
||||
<span style="font-size:12px;color:#23251d;font-weight:700;"><span leaf="">{{签名文字}}</span></span>
|
||||
</span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 34 结尾内容块 ending-content
|
||||
|
||||
**用途**：信息量最大的收尾形式——编号式"结尾标题"（呼应组件 3 的章节标题结构，用 `///`/`END` 替代数字编号）+ 两段收尾正文 + 一个高亮总结框。适合需要完整陈述收尾观点的文章。
|
||||
|
||||
**可替换字段**：`{{结尾标题}}` `{{结尾说明}}` `{{收尾段落1}}` `{{收尾段落2}}` `{{最后总结}}`
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
|
||||
<section style="text-align:center;flex-shrink:0;">
|
||||
<p style="margin:0;font-size:24px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">///</span></p>
|
||||
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">END</span></p>
|
||||
</section>
|
||||
<span style="width:1px;height:36px;background:#bfc1b7;flex-shrink:0;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 1px;font-size:17px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{结尾标题}}</span></p>
|
||||
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{结尾说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落1}}</span></p>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落2}}</span></p>
|
||||
<section style="background:#eeefe9;border-radius:6px;padding:16px 18px;border:1px solid #bfc1b7;text-align:center;">
|
||||
<p style="font-size:15px;color:#23251d;margin:0;line-height:1.6;"><strong style="border-bottom:3px solid #ed7b2f;"><span leaf="">{{最后总结}}</span></strong></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 多行代码块 → 用通用增量库
|
||||
|
||||
本主题不设专属多行代码块组件；Markdown 的三反引号围栏代码块直接用 `common-components.md` 的 1a 深色代码块（默认）或 1b 浅色代码块，左竖条/强调色换成本主题墨色 `#1e1f23`；行内代码用本主题"文字强调 d"或组件 11。
|
||||
|
||||
---
|
||||
|
||||
## 完整文章模板骨架
|
||||
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;padding:8px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
|
||||
|
||||
<!-- 1. 头图卡（组件2 hero-card，唯一一处，不设 margin-top） -->
|
||||
|
||||
<!-- 2. 开篇编者按（组件14 editors-note，可选，仅原文有独立引言/背景说明时使用） -->
|
||||
|
||||
<!-- 3. 第一章（组件3 section-title，默认分节样式，编号01） -->
|
||||
<!-- 章内按需组合：组件10 正文段落(+文字强调a-e) / 组件11 行内代码段落 / 组件12 新旧对照段落 / 组件13 无序列表 / 组件24 条目列表卡 -->
|
||||
<!-- / 组件18-19 图片 / 组件20 图表占位卡 / 组件21-22 对比 / 组件23 流程示意图 / 组件26 案例时间线 / 组件15 重点观点卡 / 组件7-9 次级小标题 -->
|
||||
|
||||
<!-- 4. 第二章…第N章（同上结构，编号递增；章节之间如需轻量过渡可插组件4，需要强调型分节可插组件5/6，
|
||||
但一篇文章内分节样式不宜超过2种交替使用，避免节奏混乱） -->
|
||||
|
||||
<!-- 5. 全文收束（四选一或组合，按文章类型定，见下方配方表）：
|
||||
组件31 暗色摘要边框（金句收束，全文≤1处）/ 组件30 暗色摘要分栏（结论+下一步）
|
||||
/ 组件32 摘要横幅条（一句话摘要）/ 组件34 结尾内容块（信息量最大，完整陈述收尾） -->
|
||||
|
||||
<!-- 6. 常见问题（组件25 faq-listing，可选） -->
|
||||
|
||||
<!-- 7. 固定签名段落（组件10 正文段落，SKILL.md 固定文案第一段，ending-actions 之前） -->
|
||||
|
||||
<!-- 8. 作者签名条（组件33 author-signature，可选） -->
|
||||
|
||||
<!-- 9. 结尾行动区（组件28 ending-actions，{{文末互动引导}} 用 SKILL.md 固定文案第二段） -->
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 10. 隐藏标记（外层容器之外，全文最后一个元素） -->
|
||||
<p style="display:none;">
|
||||
<mp-style-type data-value="3"></mp-style-type>
|
||||
</p>
|
||||
```
|
||||
|
||||
**骨架铁律**：
|
||||
- 头图卡（组件 2）全文唯一、必须在最前；隐藏标记必须在全局容器闭合**之后**。
|
||||
- 组件 3/4/5/6/7/8/9 都是"标题类"组件但权重不同——组件 3 是默认主力，4/6 是轻/中量级分节过渡，5 是重量级强调（≤1-2 处），7/8/9 是章节内的二级标题；不要一篇文章里把所有变体都用一遍，选 2-3 种保持节奏统一即可。
|
||||
- 组件 31 暗色摘要边框（反白内边框）是本主题最强的收束锚点，全文只在结尾用一次，不要在正文中段重复使用。
|
||||
|
||||
---
|
||||
|
||||
## 视觉层级（3 层递进）
|
||||
|
||||
| 层级 | 样式 | 用途 | 频率 |
|
||||
|------|------|------|------|
|
||||
| **锚点层** | 暗色摘要边框 31、暗色标题条 5、头图卡 2 深色摘要条 | 全文最强收束、专题开篇 | 全文 ≤3 处 |
|
||||
| **标记层** | 橙色下划线（文字强调 c）、浅底高亮框（文字强调 b） | 正文关键词强调 | 每段 1~3 处 |
|
||||
| **容器层** | 重点观点卡 15、条目列表卡 24、编者按 14、各类分节条 4/6/9 | 小结、清单、过渡 | 按需 |
|
||||
|
||||
---
|
||||
|
||||
## 文章类型 → 组件组合配方
|
||||
|
||||
按 SKILL.md 第 3 步判定的文章类型选配方；核心组件构成本篇的排版主旋律，点缀组件按内容出现处使用，一篇文章点缀组件种类 ≤3。
|
||||
|
||||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||||
|---|---|---|
|
||||
| 教程/操作指南 | 头图卡2 + 章节标题3 + 步骤内联标题7 + 正文段落10 + 行内代码段落11 + 无序列表13 | 流程示意图23、常见问题列表25、图片卡19 |
|
||||
| 盘点/工具清单 | 头图卡2 + 章节标题3 + 条目列表卡24 + 对比摘要卡21/精简对照表22 + 图片卡19 | 路线胶囊组29、信任墙27 |
|
||||
| 观点/深度分析 | 头图卡2 + 章节标题3 + 强调标题8 + 正文段落10 + 重点观点卡15 + 暗色摘要边框31 | 编者按14、新旧对照段落12 |
|
||||
| 数据复盘/报告 | 头图卡2 + 期号徽章条6 + 前导词标题9 + 图表占位卡20 + 精简对照表22 + 暗色摘要分栏30 | 流程示意图23、行内代码段落11（指标术语） |
|
||||
| 访谈/人物特稿 | 头图卡2 + 章节标题3 + 编者按14 + 正文段落10 + 案例时间线26 + 作者签名条33 | 新旧对照段落12（观点前后变化）、暗色摘要边框31（引语收束） |
|
||||
| 生活/情感随笔 | 头图卡2 + 内刊标签条4 + 正文段落10 + 分割点17 + 重点观点卡15 | 摘要横幅条32 |
|
||||
| 案例实战 | 头图卡2 + 章节标题3 + 案例时间线26 + 对比摘要卡21 + 结尾内容块34 | 信任墙27、重点观点卡15 |
|
||||
|
||||
所有类型共用固定结构：头图卡2 + 固定签名段落(组件10) + 结尾行动区28 + 隐藏标记。
|
||||
|
||||
---
|
||||
|
||||
## Markdown → 橄榄手记 映射规则
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 头图卡2 主标题/强调词 | 平台标题另设，头图卡标题从中提炼 |
|
||||
| 文章开头 `> 引言` | 组件14 编者按 或并入头图卡"底部摘要" | 视引言长度而定 |
|
||||
| `## 章节标题` | 组件3 section-title（默认）/ 组件6 期号徽章条（专题式，可选变体） | 编号 01/02/03… |
|
||||
| `### 子标题` | 组件7 步骤内联标题（教程步骤）/ 组件9 前导词标题（系列分节）/ 组件8 强调标题（观点强调） | 按语境三选一 |
|
||||
| 普通段落 | 组件10 正文段落 | 每段主动标 1~3 处橙色下划线（文字强调 c） |
|
||||
| `**加粗文字**` | 文字强调 a 强调加粗 | |
|
||||
| `==高亮文字==` | 文字强调 b 浅底高亮框 | |
|
||||
| `<u>下划线</u>` / `++文字++` | 文字强调 c 橙色下划线 | 次要强调（默认标记） |
|
||||
| `~~删除文字~~` | 文字强调 e 删除线旧词 | 常与新表述搭配用组件12 |
|
||||
| 行内 `` `code` `` / 技术名词/字段名 | 文字强调 d 行内代码标签 | 整句强调用组件11 |
|
||||
| ` ``` 多行代码块 ``` ` | 通用库1a深色/1b浅色 | 左竖条换本主题墨色 `#1e1f23` |
|
||||
| 无序/有序列表 | 组件13 无序列表（简单）/ 组件24 条目列表卡（需标题+说明两层） | |
|
||||
| 表格 | 组件22 精简对照表（≥2列数据对照）/ 组件21 对比摘要卡（二元对比） | 不用 `table`/`grid`，flex 仿表格 |
|
||||
| `` | 组件19 图片卡 | 有说明才加 `<figcaption>` |
|
||||
| `` 无说明/通栏 | 组件18 通栏图片 | |
|
||||
| `---` 分割线 | 组件16 分割线（正式）/ 组件17 分割点（轻松） | |
|
||||
| `> 引用`（非开头） | 组件14 编者按 / 组件15 重点观点卡 | 视语气选择 |
|
||||
| 案例/示例展开 | 组件26 案例时间线 | |
|
||||
| 常见问题 | 组件25 常见问题列表 | |
|
||||
| 文末总结/结语 | 组件34 结尾内容块 / 组件31 暗色摘要边框 / 组件30 暗色摘要分栏 / 组件32 摘要横幅条 | 四选一，按篇幅和语气选 |
|
||||
| 文末 | 组件28 ending-actions（+ 固定签名段落） | 固定签名段落放 ending-actions 前 |
|
||||
@@ -0,0 +1,632 @@
|
||||
# 公众号排版组件库 —— 红白色系
|
||||
|
||||
> **使用说明**：本组件库为「红白色系」主题（经典编辑风），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||||
>
|
||||
> **设计风格**：红白干净 + 克制点睛。淡粉下划线为主标记、左竖条块引用、红色仅在锚点处出现。编号章节 + 引言卡 + 签名区的经典编辑骨架，适合观点、深度分析、盘点、教程、随笔类文章。
|
||||
>
|
||||
> **公众号平台限制须知**：
|
||||
> - ❌ 不支持 `<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 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||||
> - 所有"装饰性空元素"（红色渐变分割线、END 短线、光晕竖条、数据卡分隔）**必须在内部放 `<span leaf=""><br></span>` 占位**，否则微信会剥掉样式
|
||||
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**，也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法：拆成多个 `<p>`，每个 `<p>` 只有一个字号；高亮样式统一挂在外层 `<span>` 上
|
||||
> - 不用 `position:absolute` 做划线/高亮，删除线用 `text-decoration:line-through`
|
||||
> - 结构化区域（如引言卡右下署名、图片说明）没有内容时**整块删掉**，不留空 section
|
||||
|
||||
---
|
||||
|
||||
## 设计变量速查表
|
||||
|
||||
```
|
||||
主色调： #DC2626（正红）
|
||||
主色调深： #991B1B（暗红/酒红）
|
||||
主色调浅： #FCA5A5（珊瑚红）
|
||||
主色调极浅： #FEE2E2（粉白）
|
||||
主色调背景： #FEF2F2（极淡红底）
|
||||
淡粉标记色： #FECACA（下划线/左竖条专用）
|
||||
标题色： #1C1917（近黑）
|
||||
正文色： #374151（深灰）
|
||||
辅助文字色： #9CA3AF（中灰）
|
||||
分割线色： #E5E7EB
|
||||
灰竖条： #D6D3D1（灰底引用左竖条）
|
||||
正文字号： 15px（不可改）
|
||||
行高： 1.8
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 10px（左右各 10px）
|
||||
```
|
||||
|
||||
字体栈：`-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 开头引言卡片（白底 + 红色阴影光晕）
|
||||
|
||||
> **文案策略（先读，比代码重要）**：
|
||||
> - 引言卡金句和公众号外标题是**两层**，视角要错开——外标题卖"为什么点开"，引言卡卖"核心观点是什么"
|
||||
> - 已知外标题时，金句**禁止原样复述**其核心关键词；从文章第一段或核心论点提炼一句有张力的判断句
|
||||
> - 右下署名按文章实际作者填，未知则整行删掉，**不要固定写"甲木"**
|
||||
> - 红底白字标签仅在本卡片内使用（视觉焦点），正文中的关键词标签一律用浅红底深红字（组件 7b）
|
||||
|
||||
```html
|
||||
<section style="margin:10px 10px 32px;background:#ffffff;border-radius:12px;box-shadow:0 4px 24px -4px rgba(220,38,38,0.15);padding:28px 24px 22px;overflow:hidden;">
|
||||
<p style="font-size:42px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
|
||||
<span leaf="">"</span>
|
||||
</p>
|
||||
<p style="font-size:16px;font-weight:800;color:#1C1917;margin:12px 0 8px;line-height:1.75;padding-left:4px;">
|
||||
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
||||
<span leaf="">{{金句中段}}</span>
|
||||
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
||||
<span leaf="">{{金句收尾}}</span>
|
||||
</p>
|
||||
<p style="text-align:right;font-size:12px;color:#9CA3AF;margin:8px 0 0;letter-spacing:1px;">
|
||||
<span leaf="">—— {{作者名，未知则删整行}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 前言导读区域（本文看点，三列目录卡片）
|
||||
|
||||
> 3 个及以上章节时生成。红底白字编号 + 深色标题；展示**精选 3 个核心看点**，不是全量章节列表。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px 32px;">
|
||||
<p style="font-size:14px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
|
||||
<span leaf="">📌 本文看点</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:space-between;">
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">01</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">02</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">03</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 4 章节分割线（红色渐变）
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="height:1px;background:linear-gradient(to right,transparent,#FCA5A5,#DC2626,#FCA5A5,transparent);margin:0;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 5 章节标题（红底编号标签 + 标题）
|
||||
|
||||
> 红色实底编号标签 + 英文小标签 + 中文大标题，底部红色实线。第一章 `margin-top:16px`，后续章节 `margin-top:48px`。
|
||||
|
||||
```html
|
||||
<section style="margin-top:48px;margin-bottom:28px;padding:0 10px;">
|
||||
<section style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:3px solid #DC2626;">
|
||||
<section style="display:flex;align-items:center;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:18px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">01</span></span>
|
||||
<section>
|
||||
<p style="font-size:10px;color:#DC2626;font-weight:700;letter-spacing:3px;margin:0 0 2px;text-transform:uppercase;">
|
||||
<span leaf="">{{ENGLISH TAG}}</span>
|
||||
</p>
|
||||
<h3 style="font-size:18px;font-weight:800;color:#1C1917;margin:0;letter-spacing:0.5px;">
|
||||
<span leaf="">{{中文章节标题}}</span>
|
||||
</h3>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 本章节正文内容放在这里 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
**结语章节变体**（编号用 `∞` 替代数字，英文标签用 `THE END` / `EPILOGUE`）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:18px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">∞</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 6 正文段落
|
||||
|
||||
> **关键规则**：每段主动识别 1~3 个关键短语，用**淡粉下划线（7d）**标记——这是本风格的核心视觉特征，让读者快速扫到每段重点。
|
||||
|
||||
**基础段落**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
**带关键词下划线标记的段落**（推荐默认）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{前半句}}</span>
|
||||
<span style="border-bottom:2px solid #FECACA;font-weight:600;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
||||
<span leaf="">{{后半句}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
**标记原则**：每段选 1~3 个关键短语（4~15 字）加下划线，不要整段都标；优先标核心观点、结论判断、关键数据、专有名词；无重点的段落可不标。
|
||||
|
||||
---
|
||||
|
||||
## 组件 6b 子标题（`###` 小节标题）
|
||||
|
||||
> `###` 子标题用红色左竖条 + 深色标题，**不套用组件 5 的编号章节样式**（编号章节只给 `##`）。
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;font-weight:800;color:#1C1917;margin:28px 0 14px;padding-left:10px;border-left:3px solid #DC2626;line-height:1.4;">
|
||||
<span leaf="">{{子标题}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 7 正文高亮样式（5 种变体 + 使用策略）
|
||||
|
||||
> **核心理念**：克制用色，红色只在真正需要的锚点出现。
|
||||
>
|
||||
> **优先级**：① 7d 淡粉下划线（正文默认标记）→ ② 7a 普通加粗为主、红色加粗仅锚点 → ③ 7b 浅红底深红字标签（每篇 2~4 个）→ ④ 7c 浅红背景（次要）→ ⑤ 7e 荧光笔（偶尔长句强调）
|
||||
|
||||
### 7a. 加粗强调
|
||||
|
||||
普通加粗（默认，绝大部分加粗用这个）：
|
||||
|
||||
```html
|
||||
<strong><span leaf="">普通加粗强调</span></strong>
|
||||
```
|
||||
|
||||
红色加粗（仅限产品名/步骤/CTA 等锚点，全文 ≤5 处）：
|
||||
|
||||
```html
|
||||
<strong style="color:#DC2626;"><span leaf="">红色加粗锚点</span></strong>
|
||||
```
|
||||
|
||||
### 7b. 浅红底深红字标签（核心概念，每篇 2~4 个）
|
||||
|
||||
```html
|
||||
<span style="background:#FEE2E2;color:#991B1B;padding:2px 6px;border-radius:3px;font-weight:700;"><span leaf="">关键词标签</span></span>
|
||||
```
|
||||
|
||||
### 7c. 浅红背景高亮（次要关键词）
|
||||
|
||||
```html
|
||||
<span style="background:#FEE2E2;padding:1px 6px;border-radius:3px;font-weight:600;color:#991B1B;"><span leaf="">浅红背景关键词</span></span>
|
||||
```
|
||||
|
||||
### 7d. 淡粉下划线（最常用，本风格标志性标记）
|
||||
|
||||
```html
|
||||
<span style="border-bottom:2px solid #FECACA;font-weight:600;"><span leaf="">淡粉下划线关键词</span></span>
|
||||
```
|
||||
|
||||
### 7e. 荧光笔效果（偶尔用于长句强调）
|
||||
|
||||
```html
|
||||
<span style="background:linear-gradient(180deg,transparent 60%,#FECACA 60%);font-weight:700;color:#1C1917;"><span leaf="">荧光笔效果的重要长句</span></span>
|
||||
```
|
||||
|
||||
### 7f. 行内代码
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">code</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 8 引用高亮块（3 种变体）
|
||||
|
||||
### 8a. 粉底左竖条金句引用（视觉焦点最强，核心金句）
|
||||
|
||||
```html
|
||||
<section style="background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:18px 22px;margin-bottom:24px;">
|
||||
<p style="font-size:16px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<span leaf="">「{{核心观点或关键金句}}」</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8b. 浅红背景引用块（Prompt / 引用内容）
|
||||
|
||||
```html
|
||||
<section style="background:#FEF2F2;border-radius:10px;padding:18px 20px;margin-bottom:24px;border:1px solid #FECACA;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||
{{引用内容，可含 7d 下划线等内联样式}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8c. 灰色左竖条引用（轻量旁注、个人吐槽）
|
||||
|
||||
```html
|
||||
<section style="border-left:4px solid #D6D3D1;padding:14px 20px;margin-bottom:24px;background:#FAFAFA;border-radius:0 8px 8px 0;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{轻量旁注内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8d. 居中金句分隔（章节间的过渡金句）
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;margin:0 0 24px;text-align:center;color:#DC2626;font-weight:700;letter-spacing:1px;border-top:1px solid #FEE2E2;border-bottom:1px solid #FEE2E2;padding:14px 10px;">
|
||||
<span leaf="">{{居中金句}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 9 提示 / 警示条
|
||||
|
||||
### 9a. 红色提示条（重要提醒、核心结论）
|
||||
|
||||
```html
|
||||
<section style="background:#FEF2F2;border-left:4px solid #DC2626;border-radius:0 8px 8px 0;padding:14px 20px;margin-bottom:24px;">
|
||||
<p style="font-size:14px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<span leaf="">💡 {{重要提示或核心结论}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 9b. 踩坑提示（灰底，风险/注意事项）
|
||||
|
||||
```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;">
|
||||
<span style="color:#DC2626;"><span leaf="">！踩坑提示 🕳</span></span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
|
||||
<span leaf="">{{提示内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 10 内容标签组（STEP / SKILL / TOOL / CASE）
|
||||
|
||||
> 教程用 STEP、盘点用 SKILL/TOOL、案例用 CASE。红底白字编号标签 + 标题。
|
||||
|
||||
### 10a. step-label（教程步骤）
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;"><span leaf="">STEP 01</span></span>
|
||||
<span style="font-size:15px;font-weight:800;color:#1C1917;"><span leaf="">{{步骤标题}}</span></span>
|
||||
</section>
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#374151;line-height:1.8;text-align:justify;">
|
||||
{{步骤内容}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
`STEP 01` 可替换为 `SKILL 1`、`TOOL 摄像机`、`CASE 01`（盘点/案例场景）；盘点场景标签底色可改灰 `#E5E7EB`+字 `#991B1B` 做次级层次。
|
||||
|
||||
### 10b. tool-card（工具/条目说明卡）
|
||||
|
||||
```html
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(220,38,38,0.10);margin-bottom:24px;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||
{{条目说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 11 列表组件
|
||||
|
||||
### 11a. 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:#DC2626;color:#fff;font-size:12px;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.8;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:#DC2626;color:#fff;font-size:12px;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.8;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:#DC2626;color:#fff;font-size:12px;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.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 11b. 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:#991B1B;background:#FEE2E2;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#DC2626;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>
|
||||
```
|
||||
|
||||
### 11c. timeline（时间线 / 递进脉络，访谈经历、案例演进）
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin-bottom:24px;">
|
||||
<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 #DC2626;background:#fff;margin-top:4px;"><span leaf=""><br></span></section>
|
||||
<section style="width:2px;background:#FEE2E2;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<p style="margin:0 0 6px;font-size:15px;font-weight:800;color:#1C1917;"><span leaf="">{{节点标题}}</span></p>
|
||||
<p style="font-size:15px;margin:0;color:#374151;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
最后一个节点去掉竖线段。
|
||||
|
||||
---
|
||||
|
||||
## 组件 12 数据 / 要点卡片组
|
||||
|
||||
### 两列版
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin-bottom:24px;padding:0;">
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 三列版
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin-bottom:24px;padding:0;">
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 表格（真实数据表用）
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="background:#DC2626;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||
<th style="background:#DC2626;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #FEE2E2;color:#374151;"><span leaf="">{{内容}}</span></td>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #FEE2E2;color:#374151;"><span leaf="">{{内容}}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #FEE2E2;color:#374151;background:#FEF2F2;"><span leaf="">{{内容}}</span></td>
|
||||
<td style="padding:8px 12px;border-bottom:1px solid #FEE2E2;color:#374151;background:#FEF2F2;"><span leaf="">{{内容}}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 13 标签胶囊
|
||||
|
||||
浅红底深红字（默认）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:12px;font-weight:700;padding:2px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
|
||||
```
|
||||
|
||||
红色描边（轻量）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;border:1px solid #DC2626;color:#DC2626;font-size:12px;font-weight:600;padding:1px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 14 图片容器
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border-radius:12px;padding:6px;border:1px solid #E5E7EB;box-shadow:0 4px 12px -2px rgba(0,0,0,0.08);margin-bottom:10px;">
|
||||
<section style="margin:0;border-radius:8px;overflow:hidden;">
|
||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
带说明文字时，图片 `margin-bottom` 改 `8px`，其后加：
|
||||
|
||||
```html
|
||||
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
|
||||
<span leaf="">— {{图片说明}}</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
多行代码块用通用增量库 `common-components.md` 的 1a 深色 / 1b 浅色（左竖条换 `#DC2626`），禁 `white-space:pre`。
|
||||
|
||||
---
|
||||
|
||||
## 组件 15 END 结尾分割线
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="text-align:center;margin:0 0 32px;">
|
||||
<section style="display:flex;align-items:center;justify-content:center;">
|
||||
<span style="height:2px;width:60px;background:linear-gradient(to right,transparent,#DC2626);margin-right:12px;"><span leaf=""><br></span></span>
|
||||
<span style="font-size:11px;color:#DC2626;letter-spacing:3px;font-weight:700;"><span leaf="">END</span></span>
|
||||
<span style="height:2px;width:60px;background:linear-gradient(to left,transparent,#DC2626);margin-left:12px;"><span leaf=""><br></span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 16 尾部作者签名区
|
||||
|
||||
> 固定签名文案以正文段落形式呈现；有个人名片/引导图素材才放图，无素材整块删。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="text-align:center;margin-bottom:10px;border-radius:12px;overflow:hidden;">
|
||||
<span leaf=""><img src="{{个人名片或引导图URL，无则删本 section}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
|
||||
</p>
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
|
||||
<strong style="color:#DC2626;"><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:#374151;line-height:1.75;letter-spacing:0.5px;overflow-x:hidden;">
|
||||
|
||||
<!-- 1. 开头引言卡片（组件2，白底红色光晕） -->
|
||||
|
||||
<!-- 2. 前言正文（组件6 段落 × N，放 0 10px 边距 section，第一章之前的开场白） -->
|
||||
|
||||
<!-- 3. 前言导读（组件3，3+ 章节时生成，精选 3 看点） -->
|
||||
|
||||
<!-- 4. 第一章（组件5 章节标题，margin-top:16px） -->
|
||||
<!-- 章内：组件6 正文 + 6b 子标题 + 7 行内高亮 + 8 引用 + 9 提示 + 10 标签组 + 11 列表 + 12 数据 + 14 图片 -->
|
||||
|
||||
<!-- 5. 章节分割线（组件4）+ 第二章…第N章（组件5，margin-top:48px） -->
|
||||
|
||||
<!-- 6. 结语章（组件5 变体：编号 ∞，英文 THE END） -->
|
||||
|
||||
<!-- 7. END 分割线（组件15） -->
|
||||
|
||||
<!-- 8. 尾部签名（组件16） -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
**骨架铁律**：引言卡在最前；导读区在前言正文之后、第一章之前；章节之间用组件 4 红色渐变线分隔；一篇只有一个 END + 一个签名区。
|
||||
|
||||
---
|
||||
|
||||
## 视觉层级（3 层递进）
|
||||
|
||||
| 层级 | 样式 | 用途 | 频率 |
|
||||
|------|------|------|------|
|
||||
| **锚点层** | 红色加粗 7a / 红底白字（仅引言卡）/ 金句引用 8a | 产品名、关键结论、核心金句 | 全文 ≤5 处 |
|
||||
| **标记层** | 淡粉下划线 7d（默认）/ 浅红底标签 7b | 正文关键词强调 | 每段 1~3 处 |
|
||||
| **容器层** | 左竖条引用 8x / 提示 9x / 标签组 10 / 卡片 11-12 | 引用、旁注、提示、结构化信息 | 按需 |
|
||||
|
||||
**克制原则**：
|
||||
- 红底白字标签（`bg:#DC2626`）**仅在引言卡内**，正文关键词标签用浅红底深红字 7b
|
||||
- 红色加粗全文 ≤5 处
|
||||
- 引用/提示统一用左竖条 + 浅底 + 类型小标签，**不用四周虚线框**（dashed）
|
||||
- 渐变红仅出现在章节分割线 4 和 END 线 15
|
||||
|
||||
---
|
||||
|
||||
## 文章类型 → 组件组合配方
|
||||
|
||||
按 SKILL.md 第 3 步判定的文章类型选配方；核心组件构成本篇排版主旋律，点缀组件按内容出现处使用，一篇文章点缀组件种类 ≤3，避免花哨。
|
||||
|
||||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||||
|---|---|---|
|
||||
| 观点/深度分析 | 正文6 + 金句引用8a + 居中金句8d | 浅红引用8b、踩坑提示9b |
|
||||
| 教程/操作指南 | step-label 10a + 代码块（通用库1a）+ ordered-list 11a | 红色提示9a、tool-card 10b |
|
||||
| 盘点/工具清单 | skill/tool-label 10a + tool-card 10b + pill-list 11b | 数据卡12、标签胶囊13 |
|
||||
| 访谈/人物特稿 | 正文6 + 金句引用8a（引语）+ timeline 11c（经历脉络） | 居中金句8d、灰底旁注8c |
|
||||
| 数据复盘/报告 | 数据卡12（两列/三列）+ 表格12 + ordered-list 11a | 红色提示9a、荧光笔7e |
|
||||
| 生活/情感随笔 | 正文6 + 居中金句8d + 灰底旁注8c | 金句引用8a（少量） |
|
||||
| 案例实战 | case-label 10a / timeline 11c + step-label 10a | 浅红引用8b、踩坑提示9b |
|
||||
|
||||
所有类型共用固定结构：引言卡 2 + 导读 3（3+ 章节）+ 编号章节 5 + END 15 + 签名 16。
|
||||
|
||||
---
|
||||
|
||||
## Markdown → 红白排版 映射规则
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置 |
|
||||
| 文章开头 `> 引言金句` | 组件 2 白底红色光晕引言卡 | 视角与外标题错开 |
|
||||
| `## 章节标题` | 组件 5 章节标题 | 红底编号 01/02…，末章 ∞ + THE END |
|
||||
| `### 子标题` | 组件 6b 红色左竖条小标题 | 不套编号章节样式 |
|
||||
| 普通段落 | 组件 6 正文段落 | 每段主动标 1~3 处淡粉下划线 7d |
|
||||
| `**加粗文字**` | 组件 7a 普通加粗（默认）/ 红色加粗（锚点 ≤5） | 普通加粗为主 |
|
||||
| `==高亮文字==` | 组件 7b 浅红底深红字标签 | 核心概念 |
|
||||
| `<u>下划线</u>` / `++文字++` | 组件 7d 淡粉下划线 | 次要强调 |
|
||||
| `~~删除线~~` | `text-decoration:line-through` + 灰字 | 被淘汰概念 |
|
||||
| 行内 `` `code` `` | 组件 7f 行内代码 | |
|
||||
| `> 引用段落`（金句） | 组件 8a 粉底左竖条 | 核心金句 |
|
||||
| `> 引用段落`（旁注） | 组件 8c 灰底左竖条 | 轻量旁注 |
|
||||
| 核心金句 | 组件 8a / 8d 居中金句 | 视觉焦点 |
|
||||
| 操作步骤 | 组件 10a step-label | STEP 01/02… |
|
||||
| 技能/工具清单 | 组件 10a skill/tool-label + 10b tool-card | |
|
||||
| 案例/经历脉络 | 组件 10a case-label / 11c timeline | |
|
||||
| Prompt 提示词 | 组件 8b 浅红引用块 / 通用库 1a（长多行） | |
|
||||
| ` ``` 多行代码块 ``` ` | 通用库 1a 深色 / 1b 浅色（左竖条换 #DC2626） | 每行一个 `<p style="margin:0">` |
|
||||
| 并列要点 | 组件 11b pill-list | |
|
||||
| `1. 2. 3.` 编号列表 | 组件 11a ordered-list | 红色圆标 |
|
||||
| 数据展示 | 组件 12 数据卡片组 / 表格 | 红色大号数据 |
|
||||
| Markdown 表格 | 组件 12 表格 | 偶数行浅红底 |
|
||||
| 注意/警告 | 组件 9a 红色提示 / 9b 踩坑提示 | |
|
||||
| 行内标签 | 组件 13 标签胶囊 | 浅红底默认 |
|
||||
| `---` | 组件 4 章节分割线 | 红色渐变 |
|
||||
| `` | 组件 14 图片容器 | 圆角卡片 + 说明 |
|
||||
| 文末 | 组件 15 END + 16 签名 | |
|
||||
@@ -0,0 +1,538 @@
|
||||
# 公众号排版组件库 —— 留白禅意风（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（深墨绿，胶囊标签文字）
|
||||
|
||||
正文字号： 15px
|
||||
行高： 1.9
|
||||
字间距： 0.3px
|
||||
段落间距： 26px+
|
||||
章节上下留白： 64px+
|
||||
内容区边距： 0 16px（左右各 16px，比红白系更宽）
|
||||
|
||||
标题字体： '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 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;">
|
||||
<span leaf="">这里放开篇金句，衬线字体自带书卷气，</span><span leaf="">留白让文字自己呼吸。</span>
|
||||
</p>
|
||||
<p style="font-size: 12px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
|
||||
<span leaf="">—— 作者名（按文章作者/主题而定）</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
**效果**：纯白无色块，细线框定空间，衬线大字在大留白中极有质感。署名占位不写死品牌名。
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 前言导读区域（极简目录）
|
||||
|
||||
> 无色块目录，用细线分隔，数字编号低调呈现。三列等宽，纯文字 + 细线底边。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px 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: 13px;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>
|
||||
</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>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 4 章节分割线（1px 极细线，超大留白）
|
||||
|
||||
> 极细线 + 超大上下 margin，靠留白分层，不依赖视觉装饰。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px;">
|
||||
<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 16px;">
|
||||
<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;">
|
||||
<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: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<span leaf="">正文内容，15px 字号，1.9 倍行高，两端对齐。段落间距 26px+，字里行间充满呼吸感。</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
**带关键词下划线标记的段落**（推荐默认使用）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<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: 14px;"><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: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<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 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;">
|
||||
<span leaf="">「这里是核心金句，衬线字体 + 大留白 + 细线框定。」</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8b. 左竖条轻量引用（次要旁注 / 补充说明）
|
||||
|
||||
> 极细左竖条（`#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;">
|
||||
<span leaf="">旁注或补充说明内容，左侧细竖线划定边界，无色块，保持呼吸感。</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 8c. 极细线旁注（最轻量，几乎无存在感）
|
||||
|
||||
> 仅左侧 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;">
|
||||
<span leaf="">极轻量旁注，颜色浅、字号小，几乎不打扰主文节奏。</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 9 提示块（左竖条 + 小标签 + 大留白）
|
||||
|
||||
> 用墨绿左竖条 + 「提示」小标签区分，无色块底色。保持留白气质，不用醒目色块警示。
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 32px;padding: 18px 20px;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;">
|
||||
<span leaf="">这里是重要提示或核心结论，用小标签「NOTE」区分，不用色块。</span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 10 图片容器
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 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 16px 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;">
|
||||
<span leaf="">— 图片说明文字</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 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;">
|
||||
<span leaf="">加粗的结论性短句，字色加深到近黑，靠字重而非色彩传达重量。</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
结合荧光笔的变体：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
|
||||
<span style="background: linear-gradient(180deg, transparent 60%, #D6E4DC 60%);"><span leaf="">荧光笔标记的结论句，极浅墨绿底，克制温柔。</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件 12 数据/要点卡片组
|
||||
|
||||
### 两列版（用细线边框替代色块）
|
||||
|
||||
```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>
|
||||
<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>
|
||||
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">快速接入</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 要点列表版（竖排，细线分隔）
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 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>
|
||||
</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>
|
||||
</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>
|
||||
</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 16px;">
|
||||
<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 16px 40px;">
|
||||
<p style="margin-bottom: 26px;font-size: 15px;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;">
|
||||
<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 细线 + 签名 |
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
#!/usr/bin/env python3
|
||||
"""组件库源头检查器 —— 可验证循环的第一道关。
|
||||
|
||||
扫描 references/ 下所有组件库 .md 里的 ```html 代码块，检测会导致
|
||||
排版问题的反模式。只看真实组件 HTML，不被说明文字干扰（grep 做不到）。
|
||||
|
||||
与 validate_gzh_html.py 配合构成闭环：
|
||||
改组件库 → component_lint.py 扫源头 → 生成产物 → validate_gzh_html.py 扫产物 → 修 → 重复
|
||||
|
||||
用法：
|
||||
component_lint.py [skill-dir] # 默认当前目录
|
||||
退出码：1 = 有 ERROR，0 = 通过。
|
||||
"""
|
||||
|
||||
import glob
|
||||
import os
|
||||
import re
|
||||
import sys
|
||||
|
||||
CJK = re.compile(r"[一-鿿㐀-䶿]")
|
||||
|
||||
# (正则, 级别, 说明) —— 在每个 ```html 组件块内检查
|
||||
CHECKS = [
|
||||
(re.compile(r"white-space\s*:\s*pre", re.I), "ERROR",
|
||||
"用了 white-space:pre —— 会把 HTML 源码缩进/换行渲染成大左缩进+空行；"
|
||||
"代码块改成每行一个 <p style=\"margin:0\">，缩进用全角空格"),
|
||||
(re.compile(r"</?div[\s>]", re.I), "ERROR", "出现 <div>，应用 <section>"),
|
||||
(re.compile(r"\sclass\s*=", re.I), "ERROR", "出现 class 属性（会被公众号剥离）"),
|
||||
(re.compile(r"\sid\s*=", re.I), "ERROR", "出现 id 属性"),
|
||||
(re.compile(r"<style[\s>]", re.I), "ERROR", "出现 <style> 标签"),
|
||||
(re.compile(r"position\s*:\s*(fixed|absolute|sticky)", re.I), "ERROR",
|
||||
"position fixed/absolute/sticky 不被支持"),
|
||||
(re.compile(r"display\s*:\s*grid", re.I), "ERROR", "display:grid 不被支持"),
|
||||
(re.compile(r"var\s*\(\s*--", re.I), "ERROR", "用了 CSS 变量 var(--x)"),
|
||||
(re.compile(r"@(media|keyframes|import)", re.I), "ERROR", "@media/@keyframes/@import 不被支持"),
|
||||
]
|
||||
|
||||
# 四周虚线框：border: ... dashed（不含方向，如 border-left dashed 不算）
|
||||
FOURSIDE_DASHED = re.compile(r"border\s*:\s*[^;{}]*dashed", re.I)
|
||||
CENTERED = re.compile(r"text-align\s*:\s*center", re.I)
|
||||
|
||||
|
||||
def lint_file(path):
|
||||
text = open(path, encoding="utf-8", errors="replace").read()
|
||||
name = os.path.basename(path).replace("公众号排版组件库 —— ", "").replace(".md", "")
|
||||
found = [] # (level, msg)
|
||||
seen = set()
|
||||
|
||||
def add(level, msg):
|
||||
if msg not in seen:
|
||||
seen.add(msg)
|
||||
found.append((level, msg))
|
||||
|
||||
for m in re.finditer(r"```html\s*\n(.*?)```", text, re.S):
|
||||
html = m.group(1)
|
||||
for rx, level, msg in CHECKS:
|
||||
if rx.search(html):
|
||||
add(level, msg)
|
||||
# 四周虚线框：正文强调勿用；居中块视为"占位/素材"组件，豁免
|
||||
if FOURSIDE_DASHED.search(html) and not CENTERED.search(html):
|
||||
add("WARN", "四周虚线框 border:…dashed（正文强调请用左竖条；"
|
||||
"仅居中的素材占位块可用 dashed）")
|
||||
return name, found
|
||||
|
||||
|
||||
def main():
|
||||
root = sys.argv[1] if len(sys.argv) > 1 else "."
|
||||
# le-wechat-article 融合版：主题组件库在 references/themes/ 子目录
|
||||
refs = sorted(glob.glob(os.path.join(root, "references", "themes", "*.md")))
|
||||
if not refs:
|
||||
print(f"未找到 {root}/references/themes/*.md")
|
||||
sys.exit(1)
|
||||
|
||||
total_err = total_warn = clean = 0
|
||||
print(f"📐 组件库源头检查：{len(refs)} 个库\n")
|
||||
for path in refs:
|
||||
name, found = lint_file(path)
|
||||
if not found:
|
||||
clean += 1
|
||||
continue
|
||||
errs = [m for lv, m in found if lv == "ERROR"]
|
||||
warns = [m for lv, m in found if lv == "WARN"]
|
||||
total_err += len(errs)
|
||||
total_warn += len(warns)
|
||||
print(f"── {name} ──")
|
||||
for m in errs:
|
||||
print(f" ❌ {m}")
|
||||
for m in warns:
|
||||
print(f" ⚠️ {m}")
|
||||
|
||||
print(f"\n汇总：{clean}/{len(refs)} 个库干净，ERROR×{total_err}，WARN×{total_warn}")
|
||||
if total_err == 0 and total_warn == 0:
|
||||
print("✅ 全部组件库源头无反模式")
|
||||
sys.exit(1 if total_err else 0)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
+169
@@ -0,0 +1,169 @@
|
||||
#!/usr/bin/env python3
|
||||
"""微信公众号 HTML 合规校验器。
|
||||
|
||||
把 SKILL.md 里"必须遵守的平台限制"从模型自觉变成确定性兜底。
|
||||
排版生成后必跑：检查禁用标签/属性/样式，并核查文字节点是否用
|
||||
<span leaf=""> 包裹（公众号编辑器粘贴后保持样式的关键）。
|
||||
|
||||
用法:
|
||||
validate_gzh_html.py <file.html>
|
||||
validate_gzh_html.py --stdin < file.html
|
||||
|
||||
退出码: 1 = 有 ERROR（会被公众号过滤或粘贴后样式丢失）; 0 = 通过。
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import re
|
||||
import sys
|
||||
from html.parser import HTMLParser
|
||||
|
||||
# (正则, 级别, 说明) —— ERROR 会被公众号编辑器过滤掉或导致样式失效
|
||||
FORBIDDEN = [
|
||||
(re.compile(r"<style[\s>]", re.I), "ERROR", "<style> 标签会被过滤，样式必须内联"),
|
||||
(re.compile(r"<script[\s>]", re.I), "ERROR", "<script> 标签会被过滤"),
|
||||
(re.compile(r"</?div[\s>]", re.I), "ERROR", "<div> 会被改写，请用 <section>"),
|
||||
(re.compile(r"<link[\s>]", re.I), "ERROR", "外部 <link>（CSS/字体）会被过滤"),
|
||||
(re.compile(r"\sclass\s*=", re.I), "ERROR", "class 属性会被剥离，请用内联 style"),
|
||||
(re.compile(r"\sid\s*=", re.I), "ERROR", "id 属性会被剥离"),
|
||||
(re.compile(r"position\s*:\s*(fixed|absolute|sticky)", re.I), "ERROR",
|
||||
"position fixed/absolute/sticky 不被支持"),
|
||||
(re.compile(r"float\s*:", re.I), "ERROR", "float 不被支持"),
|
||||
(re.compile(r"@media", re.I), "ERROR", "@media 媒体查询不被支持"),
|
||||
(re.compile(r"@keyframes", re.I), "ERROR", "@keyframes 动画不被支持"),
|
||||
(re.compile(r"@import", re.I), "ERROR", "@import 不被支持"),
|
||||
(re.compile(r"display\s*:\s*grid", re.I), "ERROR", "display:grid 不被支持，请用 flex"),
|
||||
(re.compile(r"var\s*\(\s*--", re.I), "ERROR", "CSS 变量 var(--x) 不被支持，请写死值"),
|
||||
(re.compile(r"url\s*\(\s*['\"]?https?://[^)]*\.(woff2?|ttf|otf|eot)", re.I),
|
||||
"ERROR", "外部字体不被支持"),
|
||||
]
|
||||
|
||||
CJK = re.compile(r"[一-鿿㐀-䶿]")
|
||||
SKIP_TAGS = {"head", "title", "style", "script"} # 不参与公众号正文粘贴的区域
|
||||
# 中文字后紧跟半角逗号/分号/叹号/问号（应改全角）；只查"中文在前"避免中英混排误伤
|
||||
HALF_PUNCT = re.compile(r"[一-鿿㐀-䶿][,;!?]")
|
||||
ASCII_QUOTE = re.compile(r"[\"']")
|
||||
# 代码区特征：等宽字体或 white-space:pre —— 其内半角符号是正常的
|
||||
CODE_STYLE = re.compile(r"monospace|white-space\s*:\s*pre|courier|consolas|sf mono", re.I)
|
||||
|
||||
|
||||
class LeafChecker(HTMLParser):
|
||||
"""检查每个非空文本节点是否处于 <span leaf> 内。"""
|
||||
|
||||
def __init__(self):
|
||||
super().__init__(convert_charrefs=True)
|
||||
self.stack = [] # [(tag, is_leaf, is_code)]
|
||||
self.leaf_depth = 0 # 处于 span[leaf] 内的嵌套计数
|
||||
self.code_depth = 0 # 处于代码区（等宽/pre）内的嵌套计数
|
||||
self.span_leaf_count = 0 # 全文 span leaf 总数
|
||||
self.unwrapped = [] # (文本片段, 父标签) —— 未被 leaf 包裹的中文文本
|
||||
self.half_punct = [] # 正文里疑似半角标点的片段
|
||||
|
||||
def handle_starttag(self, tag, attrs):
|
||||
ad = dict(attrs)
|
||||
is_leaf = tag == "span" and "leaf" in ad
|
||||
is_code = bool(CODE_STYLE.search(ad.get("style", "") or ""))
|
||||
if is_leaf:
|
||||
self.span_leaf_count += 1
|
||||
self.leaf_depth += 1
|
||||
if is_code:
|
||||
self.code_depth += 1
|
||||
self.stack.append((tag, is_leaf, is_code))
|
||||
|
||||
def handle_endtag(self, tag):
|
||||
for i in range(len(self.stack) - 1, -1, -1):
|
||||
if self.stack[i][0] == tag:
|
||||
for _, was_leaf, was_code in self.stack[i:]:
|
||||
if was_leaf:
|
||||
self.leaf_depth -= 1
|
||||
if was_code:
|
||||
self.code_depth -= 1
|
||||
del self.stack[i:]
|
||||
break
|
||||
|
||||
def handle_data(self, data):
|
||||
text = data.strip()
|
||||
if not text or not CJK.search(text):
|
||||
return
|
||||
if any(t in SKIP_TAGS for t, _, _ in self.stack):
|
||||
return # <head>/<title>/<style>/<script> 内文字不进公众号正文
|
||||
if self.leaf_depth == 0:
|
||||
parent = self.stack[-1][0] if self.stack else "(root)"
|
||||
snippet = text[:24] + ("…" if len(text) > 24 else "")
|
||||
self.unwrapped.append((snippet, parent))
|
||||
if self.code_depth == 0 and (HALF_PUNCT.search(text)
|
||||
or ASCII_QUOTE.search(text)):
|
||||
snippet = text[:24] + ("…" if len(text) > 24 else "")
|
||||
self.half_punct.append(snippet)
|
||||
|
||||
|
||||
def validate(html, name="<input>"):
|
||||
errors, warnings = [], []
|
||||
|
||||
for rx, level, msg in FORBIDDEN:
|
||||
hits = len(rx.findall(html))
|
||||
if hits:
|
||||
(errors if level == "ERROR" else warnings).append(
|
||||
f"{msg}（命中 {hits} 处）")
|
||||
|
||||
checker = LeafChecker()
|
||||
try:
|
||||
checker.feed(html)
|
||||
except Exception as e: # 容错：解析失败不致命，只提示
|
||||
warnings.append(f"HTML 解析中断: {e}")
|
||||
|
||||
has_cjk = bool(CJK.search(html))
|
||||
if has_cjk and checker.span_leaf_count == 0:
|
||||
errors.append("全文没有任何 <span leaf=\"\"> 包裹——"
|
||||
"粘贴到公众号后样式会大面积丢失")
|
||||
elif checker.unwrapped:
|
||||
sample = "；".join(f"「{s}」(在 <{p}> 内)"
|
||||
for s, p in checker.unwrapped[:5])
|
||||
warnings.append(
|
||||
f"{len(checker.unwrapped)} 处中文文本未被 <span leaf> 包裹，"
|
||||
f"样式可能丢失。例：{sample}")
|
||||
|
||||
if checker.half_punct:
|
||||
sample = "；".join(f"「{s}」" for s in checker.half_punct[:5])
|
||||
warnings.append(
|
||||
f"{len(checker.half_punct)} 处正文疑似半角标点/英文引号，应改中文全角"
|
||||
f"（代码块内不计）。例：{sample}")
|
||||
|
||||
return errors, warnings, checker.span_leaf_count
|
||||
|
||||
|
||||
def main():
|
||||
ap = argparse.ArgumentParser()
|
||||
ap.add_argument("file", nargs="?", help="HTML 文件路径")
|
||||
ap.add_argument("--stdin", action="store_true", help="从标准输入读取")
|
||||
args = ap.parse_args()
|
||||
|
||||
if args.stdin or not args.file:
|
||||
html = sys.stdin.read()
|
||||
name = "<stdin>"
|
||||
else:
|
||||
with open(args.file, encoding="utf-8", errors="replace") as f:
|
||||
html = f.read()
|
||||
name = args.file
|
||||
|
||||
errors, warnings, leaf_n = validate(html, name)
|
||||
|
||||
print(f"📋 公众号 HTML 合规校验: {name}")
|
||||
print(f" span leaf 包裹: {leaf_n} 处")
|
||||
if errors:
|
||||
print(f"\n❌ ERROR ×{len(errors)}（必须修复，否则粘贴后失效）:")
|
||||
for e in errors:
|
||||
print(f" • {e}")
|
||||
if warnings:
|
||||
print(f"\n⚠️ WARNING ×{len(warnings)}（建议检查）:")
|
||||
for w in warnings:
|
||||
print(f" • {w}")
|
||||
if not errors and not warnings:
|
||||
print("\n✅ 完全合规，可直接粘贴到公众号编辑器")
|
||||
elif not errors:
|
||||
print("\n✅ 无致命问题，可粘贴（warning 请人工确认）")
|
||||
|
||||
sys.exit(1 if errors else 0)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
#!/usr/bin/env python3
|
||||
"""把已校验的公众号正文片段（纯 <section>）包成带「复制」按钮的浏览器预览页。
|
||||
|
||||
用户打开预览页 → 点右上角「复制到公众号」→ 按钮选中并复制里面渲染后的富文本
|
||||
（等价手动 Ctrl+A/Ctrl+C，样式全保留）→ 到公众号编辑器 Ctrl+V 粘贴即可。
|
||||
|
||||
按钮和 JS 只存在于预览外壳里，**不在被复制的 section 内**，所以粘进公众号的
|
||||
仍是干净合规的正文，不含 <script>/<button>。校验请对原始 section 文件跑
|
||||
validate_gzh_html.py（本预览页含 script/style，不参与校验）。
|
||||
|
||||
用法:
|
||||
wrap_preview.py <section.html> [output.html]
|
||||
默认输出 <section去扩展名>_预览.html
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
|
||||
|
||||
def main():
|
||||
if len(sys.argv) < 2:
|
||||
print("用法: wrap_preview.py <section.html> [output.html]")
|
||||
sys.exit(1)
|
||||
src = sys.argv[1]
|
||||
if not os.path.isfile(src):
|
||||
print(f"✗ 找不到文件: {src}")
|
||||
sys.exit(1)
|
||||
|
||||
content = open(src, encoding="utf-8").read().strip()
|
||||
tpl_path = os.path.join(os.path.dirname(os.path.abspath(__file__)),
|
||||
"..", "assets", "preview-template.html")
|
||||
tpl = open(tpl_path, encoding="utf-8").read()
|
||||
|
||||
title = os.path.splitext(os.path.basename(src))[0]
|
||||
out_html = tpl.replace("{{TITLE}}", title).replace("<!--GZH_CONTENT-->", content)
|
||||
|
||||
out = sys.argv[2] if len(sys.argv) > 2 else os.path.splitext(src)[0] + "_预览.html"
|
||||
open(out, "w", encoding="utf-8").write(out_html)
|
||||
print(f"✓ 已生成带「复制」按钮的预览页: {out}")
|
||||
print(" 用浏览器打开它，点右上角「复制到公众号」，再去公众号编辑器 Ctrl/⌘+V 粘贴。")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Reference in New Issue
Block a user