自制微信公众号一键排版工具


Posted in Javascript onSeptember 22, 2016

近日,几个码农因「写脚本」被开除了。要我说,不写点脚本那还叫码农吗。我最近也给自己写了一点小脚本,用于在微信公众号中生成个性排版。现在我把整个过程分享给大家。本文就是用这个小工具完成的哦。

操作过公众号后台的朋友肯定知道,微信的编辑器是很简易的,这也不叫缺陷吧,毕竟微信团队的主张一直就是简洁。但是这个编辑器是可以粘贴带格式的html的,所以就给我们留下了发挥的空间,我们可以自己写点css代码,从而定制一个个性的排版样式。对于一个前端工程师,写点样式还不是分分钟的事情~

用markdown写作

程序员最喜爱的写作语言当然是markdown了,它是一种比html更简洁的标记语言,通过工具可以编译为html以及pdf等各种格式。由于足够简洁,所以兼容性也是杠杠的,特别适合在移动端展示文章。

这里我选择用gulp进行任务控制,用gulp-remarkable来进markdown文件的编译。

编写html片段

首先我们要准备好自己写的html片段,css代码内联,用于替换编译生成的html。比如,我会将<h2>标签替换为以下的html

<p style="font-family: 微软雅黑, 宋体, tahoma, arial; margin: 8px 0px 8px; padding: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(227, 227, 227); height: 32px; line-height: 18px;"><span style="font-family: 微软雅黑, sans-serif !important; font-size: 16px; color: #00BBEC; display: block; float: left; padding: 0px 2px 3px; line-height: 28px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #00BBEC; font-weight: bold;" class="wxqq-color wxqq-borderBottomColor">标题</span></q>

除标题外,你也可以制作任意需要的代码片段,比如引用、表格、列表等等,md文件编译后统统进行替换就行。

代码高亮处理

码农写的文章,难免会嵌点代码来说明问题,但是在微信中排版代码是件头疼的事。要么是代码太长了排版错乱,要么就直接用图片展示代码,但是也有清晰度不够、无法复制等问题。

所以我选择用highlight.js来进行代码的格式化,在用remarkable编译md文件的时候,可以把highlight配置进去,这样一并完成了代码高亮工作。

需要注意的一个地方是,用highlight格式化后的代码在复制到微信编辑器的时候会丢失换行,需要我们额外处理一下,用正则把\n替换成<br>就可以了。

<pre>标签滚动处理

所谓滚动处理就是,在单行代码太长(超过屏幕宽度)的时候,会产生换行,代码就乱了,这是我们不愿意看到的。所以在进行替换的时候要给<pre>标签加上overflow-x:auto; white-space: nowrap;样式,这样能让代码框产生横向滚动条,读者可以滚动来查看未错乱的代码。

这样比较长的代码看起来就是这个效果:

alert(12);
var test = "这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字";
function abc(){
alert("sdfsdf");
}

css内联处理

使用hightlight.js的时候,需要引入一个主题的css文件,比如我用的是monokai-submile.css。但是我们没法把这个css文件粘贴到微信编辑器中,所以需要想办法把这个css文件给内联到html代码中才行。

也就是说,要把css中定义的规则转化为标签的style属性,我在网上搜罗了半天,找到一个名为juice的nodejs模块,帮助我完成了这个工作。用法也相当简单,最终的nodejs代码如下

var htmlFile = './articles/'+file+'.html';
var cssFile = './articles/monokai-sublime.css';
var result = juice.juiceFile(htmlFile, {extraCss: fs.readFileSync(cssFile)}, function(err, html){
if(err){
console.log(err);
}
else{
var meta = '<meta charset="utf8" />';
fs.writeFileSync('./articles/'+file+'_html.html', meta+html);
}
});

快速敲出装逼引号「」

常写文章的同学肯定很喜欢这个引号「」,它让你的文章品质瞬间升华了有木有。但是由于这个引号无法用键盘直接打出,只能通过输入法的特殊符号来输入,特别麻烦。

既然我们可以随意对内容进行替换,那么只需自己定义一个标签就行,比如我定义了q标签,后续用脚本把这个标签替换为「」即可。配合编辑器的emmet插件,输入这个装逼引号只需敲p+tab,相当快捷,「你说呢」。

开始编译吧

我目前进行的处理就以上这些了,当然如果你发挥脑洞的话,可以再做更多的工作哦。

万事俱备,那我们就开始编译吧。大致说一下我用到的东西,首先脚本是用nodejs写的,谁让我是前端工程师呢呢~任务控制当然首选gulp,其次用到了gulp-replace、gulp-remarkable、gulp-rename、juice、highlight.js,就这些了。

把我们预先写好的html片段定义成字符串,然后就可以开始处理工作啦,我的parse任务定义如下

gulp.task('parse', function(){
gulp.src('articles/'+file+'.md')
.pipe(md({
preset: 'full',
disable: ['replacements'],
remarkableOptions: {
typographer: true,
breaks: true,
highlight: function (str, lang) {
if(lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value.replace(/\n/g, '<br>');
} catch (err) {}
}
try {
return hljs.highlightAuto(str).value.replace(/\n/g, '<br>');
} catch (err) {}
return '';
}
}
}))
.pipe(name(function(path){
path.extname = '.html';
}))
.pipe(replace(/<h2>(.*)<\/h2>/g, h2start+'$1'+h2end))
.pipe(replace(/<q>([^</p>]*)<\/q>/g, '「$1」'))
.pipe(replace(/<pre>/g, '<pre class="hljs" style="overflow-x: auto;">'))
.pipe(replace(/<mark>/g, '<mark style="background-color: #EEE; padding: 0 5px;">'))
.pipe(gulp.dest('./articles'));
});

然后别忘了还有内联css的任务,代码参见上面juice的使用。

为了能够精准编译某一个md文件,我在运行gulp的时候给传递了一个file参数,运行命令为:gulp --file write-wx-article-tool。值就是我这篇文章的名称啦。这个参数可以通过gulp.env.file拿到,就是你当前要处理的文件。

命令执行完后,就会生成一个html文件,你只需双击打开,复制内容,然后在微信编辑器中ctrl+v即可。

结束

这就结束啦?当然,如果你有更多的想法,完全可以自己再去折腾。比如,编译完成后,自动把内容放到系统剪贴板中,自动打开微信文章发布页,自动聚焦编辑器,自动执行ctrl+v指令。这下就真正变成「一键」了,爽乎?

以上就是自制微信公众号一键排版工具的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
js模拟实现百度搜索
Jun 28 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 #Javascript
详解Node.js中的事件机制
Sep 22 #Javascript
AngularJS通过$sce输出html的方法
Sep 22 #Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 #Javascript
D3.js实现雷达图的方法详解
Sep 22 #Javascript
javascript函数中的3个高级技巧
Sep 22 #Javascript
JavaScript省市区三级联动菜单效果
Sep 21 #Javascript
You might like
完美解决PHP中文乱码
2009/11/26 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
JS Array对象入门分析
2008/10/30 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
编写python代码实现简单抽奖器
2020/10/20 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
应征英语教师求职信
2013/11/27 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
教师专业自荐书范文
2014/02/10 职场文书
英文邀请函
2015/02/02 职场文书
实验心得体会范文
2016/01/25 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android