https://github.com/ufologist/wechat-mp-article
高颜值的微信公众号图文消息排版
https://github.com/ufologist/wechat-mp-article
article wechat
Last synced: 8 months ago
JSON representation
高颜值的微信公众号图文消息排版
- Host: GitHub
- URL: https://github.com/ufologist/wechat-mp-article
- Owner: ufologist
- Created: 2016-07-21T12:28:45.000Z (almost 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2022-01-21T08:03:43.000Z (over 4 years ago)
- Last Synced: 2025-04-02T08:09:38.567Z (about 1 year ago)
- Topics: article, wechat
- Language: HTML
- Homepage: https://ufologist.github.io/wechat-mp-article/
- Size: 210 KB
- Stars: 335
- Watchers: 11
- Forks: 47
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# wechat-mp-article
高颜值的微信公众号图文消息排版
## 使用手册
* [微信公众号图文消息默认样式](https://ufologist.github.io/wechat-mp-article/index.html)
微信公众号的图文消息编辑器中提供了一般的富文本编辑功能, 例如粗体, 斜体, 颜色, 背景等等, 但默认的样式排版下不太适合阅读大段文字. 另外还提供了引用(`
`)和表格(``)的默认样式.
* [高颜值的微信公众号图文消息排版](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/)