Hexo high一下小功能

额外一点小功能可以为博客增光添彩。

一、引言

博客建立之初,有各种奇奇怪怪的想法,有网上找相关教程看到的,也有自己突发奇想的,这里介绍一下high一下功能。

二、high 一下源码

<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
    function c() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", f);
        e.setAttribute("class", l);
        document.body.appendChild(e)
    }
 
    function h() {
        var e = document.getElementsByClassName(l);
        for (var t = 0; t < e.length; t++) {
            document.body.removeChild(e[t])
        }
    }
 
    function p() {
        var e = document.createElement("div");
        e.setAttribute("class", a);
        document.body.appendChild(e);
        setTimeout(function() {
            document.body.removeChild(e)
        }, 100)
    }
 
    function d(e) {
        return {
            height : e.offsetHeight,
            width : e.offsetWidth
        }
    }
 
    function v(i) {
        var s = d(i);
        return s.height > e && s.height < n && s.width > t && s.width < r
    }
 
    function m(e) {
        var t = e;
        var n = 0;
        while (!!t) {
            n += t.offsetTop;
            t = t.offsetParent
        }
        return n
    }
 
    function g() {
        var e = document.documentElement;
        if (!!window.innerWidth) {
            return window.innerHeight
        } else if (e && !isNaN(e.clientHeight)) {
            return e.clientHeight
        }
        return 0
    }
 
    function y() {
        if (window.pageYOffset) {
            return window.pageYOffset
        }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }
 
    function E(e) {
        var t = m(e);
        return t >= w && t <= b + w
    }
 
    function S() {
        var e = document.createElement("audio");
        e.setAttribute("class", l);
        e.src = i;
        e.loop = false;
        e.addEventListener("canplay", function() {
            setTimeout(function() {
                x(k)
            }, 500);
            setTimeout(function() {
                N();
                p();
                for (var e = 0; e < O.length; e++) {
                    T(O[e])
                }
            }, 15500)
        }, true);
        e.addEventListener("ended", function() {
            N();
            h()
        }, true);
        e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
        document.body.appendChild(e);
        e.play()
    }
 
    function x(e) {
        e.className += " " + s + " " + o
    }
 
    function T(e) {
        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }
 
    function N() {
        var e = document.getElementsByClassName(s);
        var t = new RegExp("\\b" + s + "\\b");
        for (var n = 0; n < e.length; ) {
            e[n].className = e[n].className.replace(t, "")
        }
    }
 
    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            if (E(A)) {
                k = A;
                break
            }
        }
    }
    if (A === null) {
        console.warn("Could not find a node of the right size. Please try a different page.");
        return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            O.push(A)
        }
    }
})()    '>High一下</a> </li>

网上找的教程是直接把这段代码当成一个菜单项加在博客主题配置的_config.yml文件中

menu:
  high: javascript:void(0)
menu_icons:
  high: play

像这种格式添加,这里只是举个例子,实际操作一定要找到对应的模块添加。(先说明一下个人使用的是NexT主题)第一个 high 的javascript:void(0)是指a标签的跳转链接,其实这里的功能就是为了让它不跳转的,另外还有一个功能,可以把空链接的a标签悬浮变成手型的鼠标。第二个 high对应的play是展示的图标,NexT主题使用的是fontawesome图标,这里的play就是其对应的图标,想自己 diy 一下就去fontawesome上找个自己喜欢的。

这样的方法简单粗暴有效,并且还有一个好处,可以直接把这个链接保存成浏览器的书签,这样就能在任何网页都能够调用这个 High一下 的方法。且不评价这个方式好不好,但是如果这个功能就这样结束,那就太没意思了。所以,得改。

三、high 一下独立 cdn

最初的想法是把high一下独立成一个js文件,方便使用 cdn 来调用。这个挺简单,js 提取出来成为一个函数,然后给特定的元素绑定点击触发的事件即可。NexT主题加载外部 js 文件在 layout->_scripts->vendors.swg中,我模仿了加载fancybox的方式,添加了这段代码:

{% if theme.high %}
  {% set js_vendors.high  = 'high/high.js?v=1.0.0' %}
{% endif %}

这样的处理就可以在主题的配置文件中使用配置选择是否打开high一下功能,现在就还需要把high.js放到对应的文件夹中,我这边的路径是next->source->vendors->high->high.js。后来又发现high.js的源码中还有着这么一段:

var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";

外部还引用了一个亚马逊云的 css 文件,兵来将挡水来土掩,css文件也要转移:

var f = "/vendors/high/high.css";

css 放到和 js 同一个目录下。
源码里还有这么一段:

var i = musicUrl || "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";

这个就是播放的歌曲地址里,这个也可以随意改。
但是!但是!但是!重要的事情提醒三次,这个 js 是专门根据这首曲子写的,我尝试换了其他的曲子,效果都不理想,所以就只能将就用这首曲子了。

四、high 一下自定义页面歌曲

就这样就结束还是有点不甘心,我是希望能做到每个页面都能够自定义播放的曲子。虽然其他曲子都对不上这个 js的节奏,但是这个想法的创意很棒,必须得实现!
首先是在需要自定义曲子的文章中加上:

<div id="musicUrl" url="***"><div>

然后最终版high.js代码是这样:

document.getElementsByClassName('menu-item-high')[0].addEventListener('click', (function(){
    var play = false;
    var musicUrl = document.getElementById('musicUrl');
    if(musicUrl){
        musicUrl = musicUrl.getAttribute('url');
    }else{
        musicUrl = null;
    }
    return function(){
        if(play){
            console.log('Enjoying');
            return;
        }
        play = true;
        function c() {
            var e = document.createElement("link");
            e.setAttribute("type", "text/css");
            e.setAttribute("rel", "stylesheet");
            e.setAttribute("href", f);
            e.setAttribute("class", l);
            document.body.appendChild(e)
        }
         
        function h() {
            var e = document.getElementsByClassName(l);
            for (var t = 0; t < e.length; t++) {
                document.body.removeChild(e[t])
            }
        }
        
        function p() {
            var e = document.createElement("div");
            e.setAttribute("class", a);
            document.body.appendChild(e);
            setTimeout(function() {
                document.body.removeChild(e)
            }, 100)
        }
         
        function d(e) {
            return {
                height: e.offsetHeight,
                width: e.offsetWidth
            }
        }
         
        function v(i) {
            var s = d(i);
            return s.height > e && s.height < n && s.width > t && s.width < r
        }
         
        function m(e) {
            var t = e;
            var n = 0;
            while (!!t) {
                n += t.offsetTop;
                t = t.offsetParent
            }
            return n
        }
         
        function g() {
            var e = document.documentElement;
            if (!!window.innerWidth) {
                return window.innerHeight
            } else if (e && !isNaN(e.clientHeight)) {
                return e.clientHeight
            }
            return 0
        }
        
        function y() {
            if (window.pageYOffset) {
                return window.pageYOffset
            }
            return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
        }
         
        function E(e) {
            var t = m(e);
            return t >= w && t <= b + w
        }
         
        function S() {
            var e = document.createElement("audio");
            e.setAttribute("class", l);
            e.src = i;
            e.loop = false;
            e.addEventListener("canplay", function() {
                setTimeout(function() {
                    x(k)
                }, 500);
                setTimeout(function() {
                    N();
                    p();
                    for (var e = 0; e < O.length; e++) {
                        T(O[e])
                    }
                }, 15500)
            }, true);
            e.addEventListener("ended", function() {
                N();
                h();
                paly = false;
            }, true);
            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
            document.body.appendChild(e);
            e.play()
        }
         
        function x(e) {
            e.className += " " + s + " " + o
        }
         
        function T(e) {
            e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
        }
        
        function N() {
            var e = document.getElementsByClassName(s);
            var t = new RegExp("\\b" + s + "\\b");
            for (var n = 0; n < e.length; ) {
                e[n].className = e[n].className.replace(t, "")
            }
        }
         
        var e = 30;
        var t = 30;
        var n = 350;
        var r = 350;
        var i = musicUrl || "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
        var s = "mw-harlem_shake_me";
        var o = "im_first";
        var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
        var a = "mw-strobe_light";
        var f = "/vendors/high/high.css";
        var l = "mw_added_css";
        var b = g();
        var w = y();
        var C = document.getElementsByTagName("*");
        var k = null;
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                if (E(A)) {
                    k = A;
                    break
                }
            }
        }
        if (A === null) {
            console.warn("Could not find a node of the right size. Please try a different page.");
            return
        }
        c();
        S();
        var O = [];
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                O.push(A)
            }
        }
    };
})(), false);

这样就能自定义每篇文章的 high 的曲子都不一样了,当然也都纯属娱乐,不要过于较真。(因为有挺多朋友说我神经,所以就暂时先把这个功能关闭了)。

附上个人博客对应博文地址:
http://lancelot_lewis.coding.me/2016/05/14/blog/hexo-high/

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 166,633评论 24 703
  • 这篇文章发表在我的个人博客上,为了更好的阅读体验,请戳这里:jmyblog > 首先声明:这并不是一篇教程。 这不...
    谁把钱丢了阅读 2,104评论 1 10
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 9,913评论 4 55
  • 这个世界上有一种情怀叫感恩有你。每每听到时间管理课程里叶老师的感恩有你这句话时,都会不由自主的产生敬畏。特别是最近...
    2组13号石志霞阅读 188评论 0 0
  • 2017-10-12 姓名:徐祖德 公司:广东思沃精密机械有限公司 230期_利他1组 272期_乐观2组志工 【...
    徐祖德阅读 32评论 0 0
  • 真正的平静,不是避开车马喧嚣,而是在心中修篱种菊。 ——林徽因 熙熙攘攘的车厢内,...
    星不语阅读 176评论 1 2
  • 人皆养子望聪明,我被聪明误一生。惟愿孩儿愚且鲁,无灾无难到公卿。——苏轼《洗儿诗》 从古至今许多的词语被异化,从而...
    巴图鲁阅读 517评论 44 56