本文出自微涼一季的博客http://jijiaxin89.com/2015/08/21/%E7%8E%A9%E8%BD%AChexo%E5%8D%9A%E5%AE%A2%E4%B9%8Bnext/ 歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明出處

今天把jacman博客樣式換成了next，主要是突然感覺(jué)jacman太過(guò)鮮艷了，像一個(gè)孩子，不夠樸素，看久了感覺(jué)膚淺，之前用是因?yàn)橐谎劭瓷先ビ悬c(diǎn)android materials design的感覺(jué)，jacman博客用手機(jī)看或許有更好的體驗(yàn)。相反next，初看簡(jiǎn)約無(wú)華多看兩眼又覺(jué)得厚重，像一個(gè)老者，符合技術(shù)博客的風(fēng)格，雖說(shuō)我的博客頂多只會(huì)一半用來(lái)技術(shù)筆記，更多想用來(lái)發(fā)展文學(xué)愛(ài)好，但還是先用來(lái)裝裝比吧！
博客，是站在巨人肩膀上搭建的，感謝開(kāi)源，讓我盡情享受拿來(lái)主義，但畢竟不是做前端的，有一些坑掉進(jìn)去爬出來(lái)還是費(fèi)了一些力氣的，所以做個(gè)記錄，利人利己。
總的來(lái)說(shuō)，有了使用jacman的爬坑經(jīng)驗(yàn)，這次更換next還是非常順利的，幾乎沒(méi)有什么阻礙，一會(huì)就更換完畢了，雖然沒(méi)啥技術(shù)含量，但是畢竟是自己一點(diǎn)一滴填充進(jìn)去的，看到頁(yè)面出來(lái)的時(shí)候，是很欣欣然滴，博客就像是自己的孩子，需要好好呵護(hù)，對(duì)，** 我不為輸贏，我就是認(rèn)真 ** ^_。
廢話不多說(shuō)了，開(kāi)始吐輔

以next為例記錄一下潤(rùn)色靜態(tài)博客的方法，可能方法不止適用于next
next使用文檔比jacman詳盡清楚地多，基本看著手冊(cè)一步一步來(lái)就能很順利的搭建起來(lái)
這里只選擇性記錄下

添加云標(biāo)簽

添加分類也類似,其他基本跟jacman大同小異，有一些點(diǎn)統(tǒng)計(jì)之類的配置由主題配置移到了主目錄配置。

• hexo new page "tags"
• 編輯剛新建的頁(yè)面，將頁(yè)面的類型設(shè)置為 tags ，主題將自動(dòng)為這個(gè)頁(yè)面顯示標(biāo)簽云。頁(yè)面內(nèi)容如下：

title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"
comments: false # 關(guān)閉這個(gè)頁(yè)面的多說(shuō)或者 Disqus 評(píng)論

• 在菜單中添加鏈接。編輯 主題配置文件 ，添加 tags 到 menu 中，如下:

menu:
  home: /
  archives: /archives
  tags: /tags

添加音樂(lè)播放器

以前覺(jué)得網(wǎng)頁(yè)嵌入播放器很牛逼的感覺(jué)，原來(lái)就是一句代碼的事兒！感謝外連接，感謝開(kāi)源，讓這個(gè)世界變得更美好。
** markdown語(yǔ)法是完全兼容html代碼的，直接把html代碼扔進(jìn)去就oook咯。**

• 添加豆瓣音樂(lè)
  復(fù)制下面代碼到你的博文任意位置，然后Hexo s預(yù)覽。
  加入豆瓣音樂(lè) 歌曲是隨機(jī)播放，游客可切歌，不能定制播哪首歌，而且不能按鈕停止，只能音量調(diào)到0，無(wú)語(yǔ)，有利有弊的吧。
  盡量放在最下面，如果你放在最上面，很有可能別人還未點(diǎn)擊進(jìn)入博文，你的博客就有了背景音樂(lè)了，要想趕緊播放音樂(lè)的另說(shuō)。
  <center> <iframe name="iframe_canvas" src="http://douban.fm/partner/baidu/doubanradio" scrolling="no" frameborder="0" width="400" height="200"></iframe> </center>
  咦，簡(jiǎn)書(shū)貌似不支持嵌入音樂(lè)

<center> <iframe name="iframe_canvas" src="http://douban.fm/partner/baidu/doubanradio" scrolling="no" frameborder="0" width="400" height="200"></iframe> </center>

• 添加網(wǎng)易云音樂(lè)

打開(kāi)網(wǎng)頁(yè)版網(wǎng)易云音樂(lè)。
如果只是加入單曲，只需要搜索歌曲，點(diǎn)開(kāi)歌曲名，點(diǎn)擊生成外鏈播放器，復(fù)制html代碼（可以選擇是否自動(dòng)播放），將html代碼無(wú)需任何修改放入markdown文章里就OK了。
如果想要加入歌單，就需要自己創(chuàng)建歌單，然后分享歌單，找到自己的分享動(dòng)態(tài)，點(diǎn)進(jìn)去可以看到有“生成外鏈播放器”這些字眼，其余操作就和上面一樣了。不過(guò)，你的歌單有變化的話，這個(gè)外鏈的歌曲同樣跟著變，這一點(diǎn)挺棒的。
例如，播放待你長(zhǎng)發(fā)及腰這首歌，自動(dòng)播放只需要嵌入一下代碼

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=28947001&auto=1&height=66"></iframe>

嵌入不自動(dòng)播放只需要把以上代碼中的auto改為=0即可，樣子是這樣的
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=29378283&auto=0&height=66"></iframe>
類似方法還可以嵌入蝦米播播

添加high一下

再次感謝開(kāi)源
效果很贊，整個(gè)頁(yè)面漸進(jìn)式搖擺，搖擺，還有音樂(lè)
在 Hexo\themes\next\layout_partials\header.swig 中的 ul 標(biāo)簽加入如下 li 代碼：

<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>

多說(shuō)自定義css

更詳盡資源
在多說(shuō)后臺(tái) -> 設(shè)置 -> 基本設(shè)置 -> 自定義CSS -> copy上邊資源拿來(lái)的代碼
另外使用多說(shuō)前需要先在 多說(shuō) 創(chuàng)建一個(gè)站點(diǎn)。這點(diǎn)跟jacman有所不同，jacman不需要?jiǎng)?chuàng)建站點(diǎn)，只需要用戶名就行了
配置多說(shuō)以及統(tǒng)計(jì)等等第三方服務(wù)

站內(nèi)搜索

jaman配置搜索失效了，我看很多其他jacman的博客搜索也沒(méi)效果，我先后換了google，百度， Swiftype tinysou微搜都不好用，然而next一下就起效了，真的很贊
Swiftype

• 注冊(cè)Swiftype Swiftype 注冊(cè)頁(yè)面
• 注冊(cè)完成后，創(chuàng)建一個(gè)新的搜索引擎，并按照提示完成創(chuàng)建步驟。
• 搜索引擎創(chuàng)建完成后，在菜單中選擇 Integrate -> Install Search開(kāi)啟搜索定制，安裝步驟完成定制。最后一步記得點(diǎn)擊 Active 按鈕。
• 返回定制引擎的第二個(gè)步驟 INSTALL CODE，復(fù)制出你的 swiftype_key。 install 和2.0.0之間的
• 關(guān)鍵！ 編輯站點(diǎn)配置文件，新增字段 swiftype_key，值設(shè)置成第四步中賦值出來(lái)的 key

# Swiftype Search Key
swiftype_key: xxxxxxxxx

呃呃，還有很多好玩的東西基本通過(guò)官方的手冊(cè)都能成功，就不贅述了.
總體感覺(jué)，next比jacman好用一點(diǎn)，也更有極客范兒。