Files

24 KiB
Raw Permalink Blame History

公众号排版组件库 —— 摸鱼票据风

使用说明:本组件库为「摸鱼票据风」主题(移植自 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
  • 正文字号固定 15px、行高 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
正文字号:       15px(本主题铁律,不可改)
正文行高:       1.9
全局行高:       1.75
字间距:         0.5px
最大宽度:       677px
内容区边距:     0 10px(正文区块左右各 10px)
章节间距:       margin-bottom: 32px

字体栈:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif


组件 1 全局容器

<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
  • {{副标题}} → 开篇导语上半句,如 两款免费 AI 设计工具深度对比
  • {{作者名}} / {{作者身份}}
  • {{简介段落}} → 支持内嵌组件 6 的行内强调样式
  • {{#标签1/2/3}}
  • {{编号}} → 如 001
  • {{竖排文字}} → 如 深度测评
  • {{等级}} → 如 S
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;margin-bottom:32px;">
  <section style="background:#059669;padding:12px 12px;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:18px 12px;border-right:2px dashed #A7F3D0;">
      <section style="font-size:15px;color:#1a1a1a;letter-spacing:1px;margin-bottom:20px;font-weight:700;"><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:16px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
          <section style="font-size:13px;color:#888;"><span leaf="">{{作者身份}}</span></section>
        </section>
      </section>
      <section style="font-size:14px;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:19px;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:15px;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 12px;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…

可替换字段:{{编号}} {{标题}} {{副标题}}

<section style="margin-bottom:32px;padding:0 10px;">
  <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:13px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
    <section style="font-size:19px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
    <section style="font-size:13px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
  </section>

  <!-- 本章节正文内容放在这里 -->

</section>

组件 4 小节标题 subtitle

用途:章节内的二级标题。

可替换字段:{{小节标题}}

<section style="margin-bottom:32px;padding:0 10px;">
  <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:16px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
  </section>
</section>

组件 5 正文段落 paragraph

用途:普通正文,可内嵌组件 6 文字强调。字号行高是本主题铁律,不要跟随其它主题改动。

可替换字段:{{正文内容}}

<section style="margin-bottom:32px;padding:0 10px;">
  <p style="font-size:15px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
    <span leaf="">{{正文内容}}</span>
  </p>
</section>

组件 6 文字强调(5 种子样式)

用途:在正文段落内使用,按需选择一种,一段文字不要叠加超过 2 种。

6a. 绿色加粗 —— 产品名/工具名

<span style="color:#059669;font-weight:700;"><span leaf="">{{文字}}</span></span>

6b. 绿色高亮 —— 核心观点/关键数据

<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. 绿色下划线 —— 重要短语(正文关键词的默认标记)

<span style="border-bottom:2px solid #A7F3D0;font-weight:600;"><span leaf="">{{文字}}</span></span>

6d. 代码标签 —— 技术名词/模型名/命令

<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">{{文字}}</span></span>

6e. 品牌紫色 —— Claude / Obsidian / Gemini 等 AI 品牌名专用

<span style="color:#7C3AED;font-weight:700;"><span leaf="">{{文字}}</span></span>

使用原则:产品/工具名用 6a;核心观点/关键数据用 6b;重要短语(次要强调,逐段标记默认用它)用 6c;技术名词/模型名用 6d;AI 品牌名专用 6e,不要把 6a 和 6e 混用在同一个词上。


组件 7 Case 标题 case-title

用途:案例/示例展示前的小标题,紧跟其后的内容是该案例的具体展开。

可替换字段:{{case编号}} {{案例名称}}

<section style="margin-bottom:32px;padding:0 10px;">
  <p style="font-size:14px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
    <span leaf="">case{{case编号}}: {{案例名称}}</span>
  </p>
</section>

组件 8 图片容器 image-ticket

用途:包裹图片,票据纸感边框(米黄底 + 细灰边)。规则:<img> 标签及其 src/data-src 原封不动复制,只套外层容器。

<section style="margin-bottom:32px;padding:0 10px;">
  <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

用途:章节小结、观点总结。

可替换字段:{{前缀}} {{结论内容}}

<section style="margin-bottom:32px;padding:0 10px;">
  <section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 12px;margin-bottom:0;">
    <p style="font-size:15px;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 次。

可替换字段:{{序号}} {{小标题}} {{描述}}

<section style="margin-bottom:32px;padding:0 10px;">
  <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:13px;font-weight:800;"><span leaf="">{{序号}}</span></section>
      <section style="flex:1;padding:12px 12px;font-size:14px;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

用途:全文核心金句、关键数据,适合章节高潮或中段强调。硬阴影描边呼应票据封面。

可替换字段:{{金句前半}} {{大数字}}(可选){{金句后半}} {{补充说明}}

<section style="margin-bottom:32px;padding:0 10px;">
  <section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;padding:20px;margin-bottom:0;">
    <p style="font-size:16px;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:25px;"><span leaf="">{{大数字}}</span></span>
      <span leaf="">{{金句后半}}</span>
    </p>
    <p style="font-size:15px;color:#555;line-height:1.8;margin:0;text-align:justify;">
      <span leaf="">{{补充说明}}</span>
    </p>
  </section>
</section>

无大数字时去掉中间那个 font-size:25px 的 <span>,整句金句合并放第一行 <p> 即可。


组件 12 标签组 tag-group

用途:#话题标签,可多个并排;也用于封面之外单独展示话题标签。

可替换字段:{{#标签}}

<section style="margin-bottom:32px;padding:0 10px;">
  <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>

用途:文章结尾,票据风的"点赞·在看·星标"三连区,撕票虚线收尾。SVG 图标微信支持,原样保留。

签名文案适配:SKILL.md 的作者签名("我是 {{作者名}}…"两段,默认占位、由用户替换)以正文段落(组件 5)形式放在本组件之前;本组件内部 {{互动文案}} 直接使用 SKILL.md 固定的第二段("如果你觉得今天这篇有收获…三连,我们下篇见"),不要重复堆叠两句"三连"。

可替换字段:{{互动文案}}

<section style="padding:0 0 32px;">
  <section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:22px 14px;text-align:center;">
    <p style="font-size:14px;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 之后。

<p style="text-align:center;color:#D1D5DB;font-size:15px;margin:24px 0 0 0;">
  <span leaf="">/</span>
</p>

组件 15 隐藏标记 hidden-mark

用途:微信编辑器兼容标记,放在外层容器(组件 1)之外,是整篇产物的最后一个元素。

<p style="display:none;">
  <mp-style-type data-value="3"></mp-style-type>
</p>

多行代码块 → 用通用增量库

本主题不设专属多行代码块组件;Markdown 的三反引号围栏代码块直接用 common-components.md 的 1a 深色代码块(默认)或 1b 浅色代码块,左竖条/强调色换成本主题主色 #059669;行内代码用本主题组件 6d。


完整文章模板骨架

<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 前