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


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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
python装饰器使用方法实例
2013/11/21 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
销售顾问的岗位职责
2013/11/13 职场文书
高一生物教学反思
2014/01/17 职场文书
学生自我评语大全
2014/04/18 职场文书
2014年消防工作总结
2014/11/21 职场文书
欠款起诉书范文
2015/05/19 职场文书
主持人开场白台词
2015/05/29 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python