Hexo high一下小功能
2016-05-14 本文已影响0人
lancelot_lewis
额外一点小功能可以为博客增光添彩。
一、引言
博客建立之初，有各种奇奇怪怪的想法，有网上找相关教程看到的，也有自己突发奇想的，这里介绍一下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/
