玩转hexo博客之next

今天把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>
  • 添加网易云音乐

    打开网页版网易云音乐。

    如果只是加入单曲,只需要搜索歌曲,点开歌曲名,点击生成外链播放器,复制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即可,样子是这样的

类似方法还可以嵌入虾米播播

添加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好用一点,也更有极客范儿。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章