額外一點(diǎn)小功能可以為博客增光添彩缨该。
一、引言
博客建立之初蛤袒，有各種奇奇怪怪的想法膨更，有網(wǎng)上找相關(guān)教程看到的，也有自己突發(fā)奇想的珍德，這里介紹一下high一下功能矗漾。
二敞贡、high 一下源碼
<li> <a title="把這個(gè)鏈接拖到你的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 = "http://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 = "http://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>
網(wǎng)上找的教程是直接把這段代碼當(dāng)成一個(gè)菜單項(xiàng)加在博客主題配置的_config.yml文件中
menu:
high: javascript:void(0)
menu_icons:
high: play
像這種格式添加琳钉，這里只是舉個(gè)例子，實(shí)際操作一定要找到對(duì)應(yīng)的模塊添加啦桌。（先說(shuō)明一下個(gè)人使用的是NexT主題）第一個(gè) high 的javascript:void(0)是指a標(biāo)簽的跳轉(zhuǎn)鏈接甫男，其實(shí)這里的功能就是為了讓它不跳轉(zhuǎn)的验烧，另外還有一個(gè)功能，可以把空鏈接的a標(biāo)簽懸浮變成手型的鼠標(biāo)若治。第二個(gè) high對(duì)應(yīng)的play是展示的圖標(biāo)，NexT主題使用的是fontawesome圖標(biāo)礼烈，這里的play就是其對(duì)應(yīng)的圖標(biāo)婆跑，想自己 diy 一下就去fontawesome上找個(gè)自己喜歡的滑进。
這樣的方法簡(jiǎn)單粗暴有效，并且還有一個(gè)好處峡碉，可以直接把這個(gè)鏈接保存成瀏覽器的書(shū)簽驮审，這樣就能在任何網(wǎng)頁(yè)都能夠調(diào)用這個(gè) High一下 的方法疯淫。且不評(píng)價(jià)這個(gè)方式好不好，但是如果這個(gè)功能就這樣結(jié)束未斑，那就太沒(méi)意思了币绩。所以，得改芽突。
三董瞻、high 一下獨(dú)立 cdn
最初的想法是把high一下獨(dú)立成一個(gè)js文件钠糊，方便使用 cdn 來(lái)調(diào)用。這個(gè)挺簡(jiǎn)單艘刚，js 提取出來(lái)成為一個(gè)函數(shù)截珍，然后給特定的元素綁定點(diǎn)擊觸發(fā)的事件即可。NexT主題加載外部 js 文件在 layout->_scripts->vendors.swg中云稚，我模仿了加載fancybox的方式静陈，添加了這段代碼：
{% if theme.high %}
{% set js_vendors.high = 'high/high.js?v=1.0.0' %}
{% endif %}
這樣的處理就可以在主題的配置文件中使用配置選擇是否打開(kāi)high一下功能，現(xiàn)在就還需要把high.js放到對(duì)應(yīng)的文件夾中拐格，我這邊的路徑是next->source->vendors->high->high.js捏浊。后來(lái)又發(fā)現(xiàn)high.js的源碼中還有著這么一段：
var f = "http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
外部還引用了一個(gè)亞馬遜云的 css 文件撞叨，兵來(lái)將擋水來(lái)土掩，css文件也要轉(zhuǎn)移：
var f = "/vendors/high/high.css";
css 放到和 js 同一個(gè)目錄下胡岔。
源碼里還有這么一段：
var i = musicUrl || "http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
這個(gè)就是播放的歌曲地址里靶瘸，這個(gè)也可以隨意改毛肋。
但是！但是诗眨！但是辽话！重要的事情提醒三次卫病，這個(gè) js 是專(zhuān)門(mén)根據(jù)這首曲子寫(xiě)的典徘，我嘗試換了其他的曲子逮诲，效果都不理想幽告，所以就只能將就用這首曲子了裆甩。
四嗤栓、high 一下自定義頁(yè)面歌曲
就這樣就結(jié)束還是有點(diǎn)不甘心，我是希望能做到每個(gè)頁(yè)面都能夠自定義播放的曲子叨叙。雖然其他曲子都對(duì)不上這個(gè) js的節(jié)奏堪澎，但是這個(gè)想法的創(chuàng)意很棒樱蛤，必須得實(shí)現(xiàn)！
首先是在需要自定義曲子的文章中加上：
<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 || "http://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 的曲子都不一樣了，當(dāng)然也都純屬娛樂(lè)就轧，不要過(guò)于較真妒御。（因?yàn)橛型Χ嗯笥颜f(shuō)我神經(jīng)，所以就暫時(shí)先把這個(gè)功能關(guān)閉了）送讲。
附上個(gè)人博客對(duì)應(yīng)博文地址：
http://lancelot_lewis.coding.me/2016/05/14/blog/hexo-high/
