{"id":21708526,"url":"https://github.com/ufologist/wechat-mp-article","last_synced_at":"2025-10-26T17:10:48.307Z","repository":{"id":41390102,"uuid":"63867491","full_name":"ufologist/wechat-mp-article","owner":"ufologist","description":"高颜值的微信公众号图文消息排版","archived":false,"fork":false,"pushed_at":"2022-01-21T08:03:43.000Z","size":215,"stargazers_count":335,"open_issues_count":0,"forks_count":47,"subscribers_count":11,"default_branch":"gh-pages","last_synced_at":"2025-04-02T08:09:38.567Z","etag":null,"topics":["article","wechat"],"latest_commit_sha":null,"homepage":"https://ufologist.github.io/wechat-mp-article/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ufologist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-21T12:28:45.000Z","updated_at":"2025-04-02T01:51:33.000Z","dependencies_parsed_at":"2022-09-12T03:40:16.132Z","dependency_job_id":null,"html_url":"https://github.com/ufologist/wechat-mp-article","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fwechat-mp-article","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fwechat-mp-article/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fwechat-mp-article/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fwechat-mp-article/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ufologist","download_url":"https://codeload.github.com/ufologist/wechat-mp-article/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008629,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["article","wechat"],"created_at":"2024-11-25T22:27:40.658Z","updated_at":"2025-10-26T17:10:48.212Z","avatar_url":"https://github.com/ufologist.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wechat-mp-article\r\n高颜值的微信公众号图文消息排版\r\n\r\n## 使用手册\r\n* [微信公众号图文消息默认样式](https://ufologist.github.io/wechat-mp-article/index.html)\r\n\r\n  微信公众号的图文消息编辑器中提供了一般的富文本编辑功能, 例如粗体, 斜体, 颜色, 背景等等, 但默认的样式排版下不太适合阅读大段文字. 另外还提供了引用(`\u003cblockquote\u003e`)和表格(`\u003ctable\u003e`)的默认样式.\r\n* [高颜值的微信公众号图文消息排版](https://ufologist.github.io/wechat-mp-article/readability.html)\r\n\r\n  使用了适合中文排版的 CSS 样式库, 让微信公众号图文消息阅读起来赏心悦目. 现在推荐使用 [赫蹏](https://sivan.github.io/heti/)\r\n\r\n  基于 [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)\r\n\r\n  以前喜欢 [Zine](https://zine.la/) 的排版, 现在非常喜欢[WeicoNote](https://itunes.apple.com/us/app/weiconote-tu-wen-bian-ji-chuan/id1072357511?mt=8)简洁的编辑风格, 也做了些借鉴, 让写文章的时候可以更关注内容而非排版.\r\n\r\n* [高颜值的微信公众号图文消息编辑器](https://ufologist.github.io/wechat-mp-article/editor.html)\r\n\r\n  基于[Mditor](https://github.com/Houfeng/mditor)做了一个 markdown 的编辑器. 你可以使用这个编辑器来编写公众号图文消息, 编写完后全选右边的内容复制到公众号的图文消息编辑器中即可.\r\n\r\n## 填过的坑\r\n* 样式中不要有字体设置, 否则复制到图文消息的编辑器中, 会造成样式被丢弃\r\n* 复制嵌套多级的 `ul/ol` 结构到图文消息的编辑器中, 会变成最多只有两级的结构\r\n* `pre` 内容复制到图文消息编辑器中没有保留换行, 会造成所有内容都挤成一行\r\n\r\n## 其他资源\r\n\r\n### 开源\r\n\r\n* [markdown-nice](https://github.com/mdnice/markdown-nice)\r\n* [md](https://github.com/doocs/md)\r\n* [md4wxpub](https://github.com/i2Echo/md4wxpub)\r\n* [WXEditor](https://github.com/wweggplant/WXEditor) 类似市面上的公众号文章排版编辑器\r\n* [雷劈网开源微信编辑器](http://wxeditor.leipi.org/)\r\n\r\n### 图文编辑\r\n* [新媒体排版](http://paiban.xmt.cn/)\r\n* [i排版](http://www.ipaiban.com/)\r\n* [秀米](http://xiumi.us)\r\n* [135编辑器](http://www.135editor.com/)\r\n* [51排版](http://51paiban.com)\r\n* [荔枝助理](http://www.lizhi.in/Home/Edit/index)\r\n* [构思编辑器](http://www.gorse.com/)\r\n* [易点编辑器](http://wxedit.yead.net/)\r\n* [微小宝编辑器](http://www.wxb.com/editor)\r\n* [微信排版工具集](https://next.36kr.com/posts/collections/259)\r\n* [如何排版微信公众平台的文章？](https://www.zhihu.com/question/23640203)\r\n* [online-markdown](https://github.com/barretlee/online-markdown \"使用微信公众号编辑器有一个十分头疼的问题——粘贴出来的代码，格式错乱，而且特别丑。这块编辑器能够解决这个问题\")\r\n\r\n### 图片设计\r\n* [创客贴 - 极简的平面设计工具](https://www.chuangkit.com/)\r\n* [易启秀 - 轻设计](http://www.eqxiu.com/main/print/create)\r\n* [Canva](https://www.canva.com/)\r\n* [BeFunky](https://www.befunky.com/create/designer/)\r\n\r\n### 视频\r\n* [腾讯视频](http://v.qq.com/)\r\n* [优酷视频](http://www.youku.com/)\r\n* [Windows上制作视频的软件有哪些？推荐最佳的视频制作软件！](https://www.zhihu.com/question/21552138)\r\n  * [爱剪辑](http://www.aijianji.com/)\r\n  * [Online video converter to MP4](http://video.online-convert.com/convert-to-mp4)\r\n  * [爱美刻](http://meikevideo.com/ \"视频在线剪辑制作专家 一键制作宝宝幼儿成长纪念册/婚礼微电影/婚礼视频\")\r\n* [8个免费视频剪辑软件，你，值得拥有](http://weibo.com/ttarticle/p/show?id=2309404002643507826566)\r\n\r\n### 资源导航\r\n* [SDC 设计师网站导航](http://hao.uisdc.com/)\r\n\r\n## 版权声明\r\n* [自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)\r\n* [Choose a License](https://creativecommons.org/choose/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fufologist%2Fwechat-mp-article","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fufologist%2Fwechat-mp-article","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fufologist%2Fwechat-mp-article/lists"}