本文出自微凉一季的博客http://jijiaxin89.com/2015/08/21/%E7%8E%A9%E8%BD%AChexo%E5%8D%9A%E5%AE%A2%E4%B9%8Bnext/ 欢迎转载，转载请注明出处
今天把jacman博客样式换成了next，主要是突然感觉jacman太过鲜艳了，像一个孩子，不够朴素，看久了感觉肤浅，之前用是因为一眼看上去有点android materials design的感觉，jacman博客用手机看或许有更好的体验。相反next，初看简约无华多看两眼又觉得厚重，像一个老者，符合技术博客的风格，虽说我的博客顶多只会一半用来技术笔记，更多想用来发展文学爱好，但还是先用来装装比吧！
博客，是站在巨人肩膀上搭建的，感谢开源，让我尽情享受拿来主义，但毕竟不是做前端的，有一些坑掉进去爬出来还是费了一些力气的，所以做个记录，利人利己。
总的来说，有了使用jacman的爬坑经验，这次更换next还是非常顺利的，几乎没有什么阻碍，一会就更换完毕了，虽然没啥技术含量，但是毕竟是自己一点一滴填充进去的，看到页面出来的时候，是很欣欣然滴，博客就像是自己的孩子，需要好好呵护，对，** 我不为输赢，我就是认真 ** _。
废话不多说了，开始吐辅
以next为例记录一下润色静态博客的方法，可能方法不止适用于next
next使用文档比jacman详尽清楚地多，基本看着手册一步一步来就能很顺利的搭建起来
这里只选择性记录下
添加云标签
添加分类也类似,其他基本跟jacman大同小异，有一些点统计之类的配置由主题配置移到了主目录配置。
- hexo new page "tags"
- 编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：
title: Tagcloud
date: 2014-12-22 12:39:04
type: "tags"
comments: false # 关闭这个页面的多说或者 Disqus 评论
- 在菜单中添加链接。编辑 主题配置文件 ，添加 tags 到 menu 中，如下:
menu:
home: /
archives: /archives
tags: /tags
添加音乐播放器
以前觉得网页嵌入播放器很牛逼的感觉，原来就是一句代码的事儿！感谢外连接，感谢开源，让这个世界变得更美好。
** markdown语法是完全兼容html代码的，直接把html代码扔进去就oook咯。**
- 添加豆瓣音乐
复制下面代码到你的博文任意位置，然后Hexo s预览。
加入豆瓣音乐 歌曲是随机播放，游客可切歌，不能定制播哪首歌，而且不能按钮停止，只能音量调到0，无语，有利有弊的吧。
尽量放在最下面，如果你放在最上面，很有可能别人还未点击进入博文，你的博客就有了背景音乐了，要想赶紧播放音乐的另说。
<center> <iframe name="iframe_canvas" src="http://douban.fm/partner/baidu/doubanradio" scrolling="no" frameborder="0" width="400" height="200"></iframe> </center>
咦，简书貌似不支持嵌入音乐
<center> <iframe name="iframe_canvas" src="http://douban.fm/partner/baidu/doubanradio" scrolling="no" frameborder="0" width="400" height="200"></iframe> </center>
- 添加网易云音乐
打开网页版网易云音乐。
如果只是加入单曲，只需要搜索歌曲，点开歌曲名，点击生成外链播放器，复制html代码（可以选择是否自动播放），将html代码无需任何修改放入markdown文章里就OK了。
如果想要加入歌单，就需要自己创建歌单，然后分享歌单，找到自己的分享动态，点进去可以看到有“生成外链播放器”这些字眼，其余操作就和上面一样了。不过，你的歌单有变化的话，这个外链的歌曲同样跟着变，这一点挺棒的。
例如，播放待你长发及腰这首歌，自动播放只需要嵌入一下代码
<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>
嵌入不自动播放只需要把以上代码中的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一下
再次感谢开源
效果很赞，整个页面渐进式摇摆，摇摆，还有音乐
在 Hexo\themes\next\layout_partials\header.swig 中的 ul 标签加入如下 li 代码：
<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>
多说自定义css
更详尽资源
在多说后台 -> 设置 -> 基本设置 -> 自定义CSS -> copy上边资源拿来的代码
另外使用多说前需要先在 多说 创建一个站点。这点跟jacman有所不同，jacman不需要创建站点，只需要用户名就行了
配置多说以及统计等等第三方服务
站内搜索
jaman配置搜索失效了，我看很多其他jacman的博客搜索也没效果，我先后换了google，百度， Swiftype tinysou微搜都不好用，然而next一下就起效了，真的很赞
Swiftype
- 注册Swiftype Swiftype 注册页面
- 注册完成后，创建一个新的搜索引擎，并按照提示完成创建步骤。
- 搜索引擎创建完成后，在菜单中选择 Integrate -> Install Search开启搜索定制，安装步骤完成定制。最后一步记得点击 Active 按钮。
- 返回定制引擎的第二个步骤 INSTALL CODE，复制出你的 swiftype_key。 install 和2.0.0之间的
- 关键！ 编辑站点配置文件，新增字段 swiftype_key，值设置成第四步中赋值出来的 key
# Swiftype Search Key
swiftype_key: xxxxxxxxx
呃呃，还有很多好玩的东西基本通过官方的手册都能成功，就不赘述了.
总体感觉，next比jacman好用一点，也更有极客范儿。
