Skip to content

Latest commit

 

History

History
88 lines (63 loc) · 3.15 KB

File metadata and controls

88 lines (63 loc) · 3.15 KB

公众号排版工作室(MP Article Studio V6)

把任何文本内容变成精美的公众号文章排版。12 种专业风格 + 5 种图片角色 + 完整版式元素,实时预览,一键复制粘贴到微信公众号编辑器。

核心功能

  • 12 种风格:经典 4 种 + 专业 4 种 + 创意 4 种
  • 图片排版:5 种角色(封面 / 配图 / 引用 / 双图 / 三图),每种风格独立设计的图片框
  • 新版式元素:导语、提示框(4 类)、金句、表格、落款
  • 实时中控台:浏览器直接打开,左侧编辑右侧手机预览
  • 图片占位卡槽:复制到公众号后,每张图片是带样式的占位 SVG,用户点击即可替换为真实图片
  • 品牌色定制:一键覆盖任何风格的点缀色

Markdown 语法支持

中控台支持完整的 Markdown 语法 + 我们扩展的特殊语法:

标准 Markdown:

# 标题  ## 二级标题  ### 三级标题
**加粗**  *斜体*  ==高亮==
> 引用块
- 无序列表  1. 有序列表
--- 分隔线
| 列1 | 列2 |   表格
|-----|-----|
| 内容 | 内容 |
```代码块```

扩展语法(V6 新增):

>>> 导语段落

!!! tip 小贴士
提示内容
!!!

!!! note 注意
注意事项
!!!

!!! warn 警告
警告内容
!!!

!!! info 信息
补充说明
!!!

‖ 这里是金句 ‖

![[1]]              单图(默认配图)
![[1|cover]]        封面图
![[1|quote]]        引用截图
![[1,2]]            双图并排
![[1,2,3]]          三图并排

--- 作者:xxx / 公众号:xxx     落款

图片工作流

由于微信公众号对图片有严格限制(只接受微信素材库的图片),我们的工作流是:

  1. 预览阶段:用户在中控台「图片台」拖入本地图片,仅用于实时预览效果
  2. 复制阶段:复制时图片自动变成"占位 SVG",但保留外层风格化边框
  3. 粘贴阶段:粘贴到公众号编辑器,图片占位卡槽完整显示
  4. 替换阶段:用户在公众号编辑器里点击占位图,选择真实图片替换
  5. 关键技巧:替换后图片可能没贴边框,点击图片选择「自适应」,图片就会完美填满边框

外层 <section> 边框、图注、引用标签全部保留 ✅

12 种风格

经典组: 素雅书卷 / 商务克制 / 文艺温暖 / 清晨日光 专业组: 科技极简 / 国风雅韵 / 潮流杂志 / 知性墨绿 创意组: 星辰旷野 / 莫兰迪灰 / 薄荷清新 / 电子玫瑰

每种风格在以下元素上有独立设计:H2 标题、引用块、分隔符、图片框、图注、提示框、金句、代码块。详见 references/styles.md

技术约束

所有输出 HTML 必须遵守微信公众号编辑器规则:

可用: 纯内联 style、<section><p><h1>-<h3><img><strong><em>background-colorborderpaddingmargincolorfont-sizeline-heightletter-spacingborder-radiusdisplay:flex

禁用: <style> 标签、class 选择器、position:absolute/relativebox-shadowtext-shadowlinear-gradient、外部字体、CSS 变量、动画、深色背景