用这种公众号排版方法,可以节省90%的时间

公众号文章快速排版法

前言

最近更新比较少,主要原因是因为排版的问题,公众号默认的排版工具效率太低了。稍微讲究一点的话,排起来估计要一个多小时。因此这段时间尝试了各种快捷的排版方法。具体有哪几种,各有什么优缺点就不说了,网上搜一下有一大把,这里就介绍效率最高的一种。

思路

简单的说,就是先用Markdown编辑器来输入文档,然后把文档另存为html格式的文件,再通过一个程序脚本把一些CSS的样式代码嵌入到html文档当中,

再把修改好的html源代码复制到富文本编辑器中,最后把转换出来的富文本复制粘贴到公众号的文档编辑器中,发表即可。

这个听上去有些复杂,因为这里面涉及一些前置知识,分别有以下这些。

使用Markdown语法编辑文字。

html与CSS的基础知识。

用python程序语言编写脚本。

别被这些名称吓到,这里面用到的相关知识仅仅是其中最基础的部分。换句话说,随便找一本介绍相关知识的书籍,仅需浏览书籍头一章的内容便足以理解我这里介绍的内容。嫌麻烦的,在网上也能搜索到各种教程说明。

但请相信我,花这一些时间理解这些新概念是相关值得的。因为运用我下面介绍的排版方法,实际操作起来排版就是1分钟的事情,你可以把宝贵的时间放在内容文字的修改与整理上。

操作流程

使用Markdown编辑器编辑文档

Markdown语法或者说使用这种语法编辑出来的.md文件是一种简化版的html文件格式,优点是使作者可以关注于写作本身而不是如何操作复杂艰深的文本编辑软件(如Office Word)。关于Markdown语法及其使用方法这里就不详细说明了,因为这并不难,仅仅花个10分钟就理解。

MD语法的讲解

另外理解这些最基础的MD语法,也会对理解后面介绍的html格式有所帮助。

Markdown编辑器就是使用MD语法的文字处理软件,使用的时候你不需要刻意去记操作格式的菜单在哪里,快捷键是什么,因为本来MD语法就非常简洁,而MD编辑器可以把常用的操作放在右键菜单里,点击一下就完成了格式设置。

在windows系统下,推荐一款叫做Typora的markdown编辑器,百度后直接去官网下载。

安装运行以及操作的方法就不详细说明了,上手并不难,这就是个右键菜单多了几个选项的记事本而已,只要会操作office,那就是小菜一碟了。

文档内容编写完成后,点击文件,导出为,选中HTML(without style)。

导出后的文件,命名为raw.html。

给HTML文件添加CSS样式

用记事本打开raw.html,可以看到这是一个最基本的网页文件,仅有等等几个基本的标签,每个标签一般是成对出现的如后面肯定会有,这是浏览器用来判断标签里面的文字在这篇文章当中的身份。

浏览器会把H2标签的内容渲染出加粗加大的字体,以符合其身份。

但是这个渲染的风格是浏览器默认的,我们想给他穿上更加个性化的衣服。这里就用到了CSS样式。

我们把标签修改为如下代码

浏览器刷新后显示效果如下

这里添加的一行代码就是CSS样式,font-weight是属性值,按照英文翻译过来是字体的重量,实际是指字体笔画的粗细,而900是它的值,相当于加粗的意思。font-size是字体大小,值是18号。color是字体的颜色,rgb(148,148,148),就是rgb值是148,148,148,这个与office中的填充颜色功能中输入的颜色值是一样的用处,从下图可以看到就是一个中灰色。

除了这些属性值,CSS样式还有其他各种属性值,例如设置字体间距、行间距、背景色等等,由于我们刚刚开始接触使用,大可以把其他不常用的先放一边,仅先使用几个属性值即可。后面如果有这方面的需求,再添加修改即可。

浏览器就是根据这些属性和值,给H2这个标签的内容穿上了一件个性化衣服。

接下来我们要给H3(小标题),P(段落),img(图片)标签添加上这些样式。

但是要在这么多的标签里面一一复制粘贴这些代码不是一件容易的事情。

从事这些重复而机械的操作,就是程序脚本派上用场的时候了。

使用Python给html文件批量添加样式

现在要通过运行一个小程序,它可以读取raw.html文件的内容,然后把

标签替换为

最后把修改后的文件另存为changed.html。

我们先把raw.html文件和程序放在同一个文件夹,程序命名为replace_html.py文件,

这个python程序使用了open,readlines,replace等几个基本函数,属于Python最基础的部分。

在CMD下输入python repalce_html.py运行程序。

程序会新建一个changed.html文件。

打开查看changed.html的源代码,可以看到样式代码都添加上去了。

浏览器打开changed.html,可以看到效果。

后续如果要继续添加样式,直接在 repalce_html.py的源代码上修改相关的变量即可,然后再次运行程序,就可以得到修改样式后的html文件了。

把Html样式源文件转换为富文本

富文本编辑器就是应用于网络上的文本编辑器,它连接网络就能使用,不需要下载。公众号所用的排版工具其实也是一种富文本编辑器。

常用的富文本编辑器还有wangeditor和ckeditor等,但是它们现在都不能很好的支持把html源代码转换为对应的样式。最后找到一个叫做HandyEditor的编辑器,能够勉强支持css的行内式样式。

我们打开HandyEditor的网页,在编辑器中点击html代码按钮。

然后把html源代码复制到文本框中。

再重新单击html代码按钮,以下是转换后的效果。

然后全选所有富文本的内容。按ctrl+c复制。

再粘贴到公众号编辑器的文本框中,可以看到修改好的样式都能很好的保留下来。接下来把封面图片添加一下就可以保存文章了。

使用什么CSS样式比较好

或者说什么样的排版格式比较好看,我不会说明有什么万能样式,我觉得这个完全是凭感觉走就对了。你看到一篇别人的文章,觉得那格式特别舒服。那就直接用那个格式就好了。下面简单介绍一下如何用浏览器查看网页链接的样式格式。

比如说我看到这篇文章的标题样式挺特别的。

首先要chrome浏览器上打开文章的链接。

然后再菜单中找到开发者工具

此时右侧会出现调试栏,点击右侧的元素选择工具。

这段代码如下:

可以看到这里的字号为16号,颜色为rgb(214, 168, 65),字体加粗。

我们把这些代码,添加到自己的html文件的样式中。

然后在浏览器中的运行html文件,便可以看到效果。

这样无论这个网页排版多么复杂,用这个方法就能看到各项排版参数。

那个.py文件是怎么来的

总结

这里简单介绍了快速排版的流程,可能里面说明得不够详细,因为这里面用到的各种工具,能把一个未接触过的人绕晕,但是出现这种想法千万不要气馁,因为我也一开始看到这个排版方法也是感觉很混乱,但是到最后看到这个方法确实能凑效,顿时让人松了口气。

这篇文章就是用这种排版方法整理出来的。

如果觉得整个流程无法理解,可以把它分解成各个小步骤或小课题,一点点去实现,这样实现起来也会简单一点。

我这里介绍的方法都是基于windows系统,如果是其他操作系统,那也许会有相应的更好的工具使用。

电脑本质就是一个工具,它和一把扳手没什么区别,我们应该充分利用其功能和特性来提高自己的效率,从而更好的享受生活,而不应该被其所困扰,影响自己的思维和习惯。

下图是整个流程的简要说明。

引用

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190115G1F88I00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券