Hexo High一下以及压缩排版问题

Posted 2020-12-24 luisyang

背景介绍

　　集成Hight一下以及Gulp-html压缩之后出现的问题：

　　High一下功能多次点击，会创建多个Audio对象，导致同时播放多次音乐，重音。解决办法：判断是否添加Audio对象，如果存在则判断是否播放，播放状态不做任何处理，未播放则调用播放方法。如果不存在则调用后续创建音乐对象的处理。 
　　Gulp-html压缩会导致我们页面故意添加的空格排版也会被清空掉。查询Gulp-html的API，发现没有这种配置，而且尝试去组合配置，最后发现还是不行。实在没办法后，只能看压缩的源代码。核心思路：就是找到要压缩的地方，对某一类或者几类标签不做压缩处理。

Hight一下

　　JavaScript源码

　　定位到100行左右，添加如下代码： 
　　

var audios = document.getElementsByTagName("audio");
if(audios.length > 0){
    if(!audios[0].ended){
        return;
    }else{
        audios[0].play();
        return;
    }
}

Gulp-html压缩

　　gulp对HTML的压缩有两种框架gulp-minify-html和gulp-htmlmin。 
　　 
　　gulp-minify-html是基于minimize做的包装，其核心压缩的处理都是在minimize中完成的。 
　　gulp-htmlmin是基于html-minifier的包装。 
　　 
　　本文暂时只讨论基于html-minifier的改造，设置多个标签不做压缩处理。 
　　 
　　找到html-minifier压缩的核心代码： 
　　绝对路径：blog/node_modules/gulp-htmlmin/node_modules/html-minifier/src/htmlminifier.js 
　　 
　　翻阅源码发现压缩是通过HTMLParser解析DOM的方式。轮训每个标签，在通过正则表达式替换指定字符。（还有更多的特殊处理，这里就不细节描述。） 
　　 
　　定位到如下一行：

    chars: function(text, prevTag, nextTag) {
      prevTag = prevTag === ‘‘ ? ‘comment‘ : prevTag;
      nextTag = nextTag === ‘‘ ? ‘comment‘ : nextTag;

　　 
　　添加过滤处理：

　　//  当前标签为p/br/strong/div ,不做处理直接返回
    if(currentTag === undefined ||  currentTag === ‘p‘ || prevTag === ‘p‘ 
            || nextTag === ‘p‘ || currentTag === ‘br‘|| currentTag === ‘strong‘
            || currentTag === ‘div‘){
            buffer.push(text);
            return;
    }