公众号排版
转自: Typora公众号写作与排版
利用 Markdown 排版公众号文章. 所需工具如下：
-
Typora. typora 编辑器 -
PicGo图床 app PicGo -
CSS的基本知识, 稍微了解即可.
CSS, 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(准通用标记语言的一个应用)或XML(准通用标记语言的一个子集)等文件样式的计算机语言.
CSS不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化. MDN: 什么是CSS
可以解决以下问题:
- 图片上传: 在编辑器中写好文章, 上传平台的时候还得手动粘贴
-
Markdown编辑器中的文章上传至公众号之前, 还得各种转码.
做好相关配置后, 写作和排版能够同步完成, 直接粘贴至公众号编辑器中即可.
排版的基本思路是:
网页上的内容和排版是分开的, 内容编辑好以后, 再使用 CSS 样式文件完成字号, 行间距, 背景, 颜色等排版.
所以说, 配置好 CSS 文件就相当于一劳永逸的完成了排版工作, 下次只要套用 CSS 就好了.
我们使用Typora编辑器, 让 Markdown 写作更简单, 免费极简编辑器：Typora
-
Typora的编辑逻辑是所见即所得, 输入Markdown标记后, 会根据选择的主题即时渲染成相应格式. -
主题是使用CSS文档定义的, 只要修改CSS文档中的对应参数, 即可修改主题的样式. - 所以本质上,
Typora就是一个HTML/CSS的渲染器. - 在
Typora中, 通过按下Ctrl+/, 或者视图->源代码模式, 可以在渲染视图和源代码视图之间切换.
所见即所得
借助Typora, 我们可以非常方便的完成排版：
- 在
Markdown中写作, 自动上传本地图片到图床； - 应用调整好的
CSS格式, 粘贴富文本格式到微信中.
插件配置
-
使用
Typora编写Markdown, 通过配置图床插件, 自动将本地图片转成在线图片. -
先安装合适的
Typora插件. 英文好的同学可以查看 Typora 的官方参考 :-
mac用户: iPic + Typora, 方便快捷地在 Markdown 中插图. -
windows用户: 安装 PicGo app, 下载地址在 PicGo.Github, 打开链接, 按下Ctrl+F搜索x64.exe安装包.如果网络原因不能访问Github, 可以下载 网盘备份. - 下载之后，选择你喜欢的路径安装, 运行. 点击侧栏中的
SM.MS图床, 下一步设定Token.
-
-
注册图床账号, 例如 sm.ms. 这一步我不是很熟悉，也许图床不注册也能用.
这里以sm.ms为例, 注册, 验证邮箱之后, 网站右上角点击User->Dashboard, -> 侧边栏选择API Token, 点击Generate Secret Token-> 确定, 文本框中会生成一段乱码，复制到上一步PicGo的输入栏里. -
测试一下: 在
PicGo侧栏选择上传区. 随便拖张图片, 到PicGo的上传提示框, 应该会自动复制图片链接到剪贴板. 上传框下面的链接格式可以更改生成链接的格式, 我们先保持默认的Markdown就好.
把生成的图片链接直接复制到Typora编辑界面中, 看能否预览.
图片链接的Markdown格式应该类似于: -
在
Typora的文件->偏好设置->侧栏:图像->上传服务设定中设置:上传服务 ->PicGo(app), PicGo 路径-> 你的安装路径.
这里有一个验证图片选项, 我验证失败了，但是不影响使用, 暂且不管.
现在使用Typora编辑Markdown的时候，直接把图片拖放到Typora中，它会自动上传图片.
我们需要做的只是找到 CSS 文件的目录, 修改目标格式, 写好文章然后复制粘贴.
使用文件->偏好设置->侧边栏:外观->打开主题文件夹, 即可打开 CSS 文件目录.
image
image
参考sspai老哥,
在目录中预设了很多主题, 我个人比较喜欢
Github的样式, 所以我的排版样式是基于Github修改的.
(好吧, 其实是我的水平太低, 让我重写一个CSS还不如去死)
我在目录内新建了名为CSS文件. >在电脑上我还是倾向于使用原生GitHub主题, 在公众号文章中才会选择自定义的格式.GitHub原来的样式已经不错了, 只是在手机端浏览时, 行距, 页边距, 字号等不太合适.
另外, 我修改了部分颜色, 看起来不是那么单调.
复制github.css -> wechat.css, 然后根据个人喜好调整：
/* 修改正文部分, 页边距为 0.5em, 行高增加至 1.5em. p 表示段落 , 参考
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics */
p {
margin: 0.8em 0.5em;
line-height: 1.5em;
}
/* 修改标题及引用部分的边线颜色 */
h2 {
padding-bottom: .3em;
font-size: 1.5em;
line-height: 1.225;
border-bottom: 1px solid #FFBF00;
text-align: center
}
blockquote {
border-left: 4px solid #FFBF00;
padding: 0 15px;
color: #777777;
}
此外, 在公众号文章页面， 按下F12进入开发者模式，可以查看相关的CSS 样式表
image
查看修改后的样式
Typora 可以自行选择用于渲染的 CSS 文件, 在电脑写作时, 我会选择Github,
在发布前, 我会选择菜单栏:主题->WeChat, 然后粘贴到公众号编辑器中.
修改前和修改后的样式如下：
image
image
文章写完, 选择好想要的样式, Ctrl+A,Ctrl+C 复制到公众号编辑器中就 OK 了!
Typora 中使用的排版样式, 会完整的复制到公众号文章中, 真正的所见即所得.
最终样式
其他参考
使用 Markdown + CSS 搞定公众号的排版规范
Markdown + CSS 实现微信公众号排版
用CSS样式为微信公众号排版
网友评论