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


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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
jQuery使用手册之 事件处理
2007/03/24 Javascript
摘自启点的main.js
2008/04/20 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
关于Python的一些学习总结
2018/05/25 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
selenium自动化测试入门实战
2020/12/21 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
进修护士自我鉴定
2013/10/14 职场文书
妇科医生自荐信
2013/11/05 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
朋友聚会开场白
2015/06/01 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
Docker官方工具docker-registry案例演示
2022/04/13 Servers