# wechat-mp-article

**Repository Path**: kelikeli/wechat-mp-article

## Basic Information

- **Project Name**: wechat-mp-article
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: gh-pages
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-09
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wechat-mp-article
高颜值的微信公众号图文消息排版

## 使用手册
* [微信公众号图文消息默认样式](https://ufologist.github.io/wechat-mp-article/index.html)

  微信公众号的图文消息编辑器中提供了一般的富文本编辑功能, 例如粗体, 斜体, 颜色, 背景等等, 但默认的样式排版下不太适合阅读大段文字. 另外还提供了引用(`<blockquote>`)和表格(`<table>`)的默认样式.
* [高颜值的微信公众号图文消息排版](https://ufologist.github.io/wechat-mp-article/readability.html)

  使用了适合中文排版的 CSS 样式库, 让微信公众号图文消息阅读起来赏心悦目. 现在推荐使用 [赫蹏](https://sivan.github.io/heti/)

  基于 [typo.css](https://github.com/sofish/typo.css) 和 [Entry.css](https://github.com/zmmbreeze/Entry.css) 来实现排版效果, 例如 [typo.css 排版实例](http://typo.sofi.sh/#section2), [博文demo](http://zencode.in/Entry.css/demo.html), [散文demo](http://zencode.in/Entry.css/word.html)

  以前喜欢 [Zine](https://zine.la/) 的排版, 现在非常喜欢[WeicoNote](https://itunes.apple.com/us/app/weiconote-tu-wen-bian-ji-chuan/id1072357511?mt=8)简洁的编辑风格, 也做了些借鉴, 让写文章的时候可以更关注内容而非排版.

* [高颜值的微信公众号图文消息编辑器](https://ufologist.github.io/wechat-mp-article/editor.html)

  基于[Mditor](https://github.com/Houfeng/mditor)做了一个 markdown 的编辑器. 你可以使用这个编辑器来编写公众号图文消息, 编写完后全选右边的内容复制到公众号的图文消息编辑器中即可.

## 填过的坑
* 样式中不要有字体设置, 否则复制到图文消息的编辑器中, 会造成样式被丢弃
* 复制嵌套多级的 `ul/ol` 结构到图文消息的编辑器中, 会变成最多只有两级的结构
* `pre` 内容复制到图文消息编辑器中没有保留换行, 会造成所有内容都挤成一行

## 其他资源

### 开源

* [markdown-nice](https://github.com/mdnice/markdown-nice)
* [md](https://github.com/doocs/md)
* [md4wxpub](https://github.com/i2Echo/md4wxpub)
* [WXEditor](https://github.com/wweggplant/WXEditor) 类似市面上的公众号文章排版编辑器
* [雷劈网开源微信编辑器](http://wxeditor.leipi.org/)

### 图文编辑
* [新媒体排版](http://paiban.xmt.cn/)
* [i排版](http://www.ipaiban.com/)
* [秀米](http://xiumi.us)
* [135编辑器](http://www.135editor.com/)
* [51排版](http://51paiban.com)
* [荔枝助理](http://www.lizhi.in/Home/Edit/index)
* [构思编辑器](http://www.gorse.com/)
* [易点编辑器](http://wxedit.yead.net/)
* [微小宝编辑器](http://www.wxb.com/editor)
* [微信排版工具集](https://next.36kr.com/posts/collections/259)
* [如何排版微信公众平台的文章？](https://www.zhihu.com/question/23640203)
* [online-markdown](https://github.com/barretlee/online-markdown "使用微信公众号编辑器有一个十分头疼的问题——粘贴出来的代码，格式错乱，而且特别丑。这块编辑器能够解决这个问题")

### 图片设计
* [创客贴 - 极简的平面设计工具](https://www.chuangkit.com/)
* [易启秀 - 轻设计](http://www.eqxiu.com/main/print/create)
* [Canva](https://www.canva.com/)
* [BeFunky](https://www.befunky.com/create/designer/)

### 视频
* [腾讯视频](http://v.qq.com/)
* [优酷视频](http://www.youku.com/)
* [Windows上制作视频的软件有哪些？推荐最佳的视频制作软件！](https://www.zhihu.com/question/21552138)
  * [爱剪辑](http://www.aijianji.com/)
  * [Online video converter to MP4](http://video.online-convert.com/convert-to-mp4)
  * [爱美刻](http://meikevideo.com/ "视频在线剪辑制作专家 一键制作宝宝幼儿成长纪念册/婚礼微电影/婚礼视频")
* [8个免费视频剪辑软件，你，值得拥有](http://weibo.com/ttarticle/p/show?id=2309404002643507826566)

### 资源导航
* [SDC 设计师网站导航](http://hao.uisdc.com/)

## 版权声明
* [自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)
* [Choose a License](https://creativecommons.org/choose/)