Hexo静态博客搭建


前言

记录Hexo搭建过程以及后期修改,主题使用的是NexT 5.1.4

Hexo搭建和NexT主题的修改

添加网页标题崩溃特效

在next\source\js\src\路径下增加collapse.js,创建完成后的路径为next\source\js\src\collapse.js然后在collapse.js中增加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 离开当前页面时修改网页标题,回到当前页面时恢复原来标题 */
window.onload = function() {
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
if(document.hidden) {
$('[rel="icon"]').attr('href', "/favicon.ico");
$('[rel="shortcut icon"]').attr('href', "/favicon.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
} else {
$('[rel="icon"]').attr('href', "/favicon.ico");
$('[rel="shortcut icon"]').attr('href', "/favicon.ico");
document.title = '咦,页面又好了!';
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 2000);
}
});
}

其中favicon.ico为个人站点的图标图标路径为next\source\images

###如何引用
在路径为next\layout\中找到_layout.swig文件中添加如下内容

1
2
 <!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/collapse.js"></script>

增加相册

自定义排序(倒叙)

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js
需要添加的代码:

1
2
3
4
5
6
7
8
9
10
posts.data = posts.data.sort(function(a, b) {
if (a.top && b.top) { // 两篇文章top都有定义
if (a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
} else if (a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233
return -1;
} else if (!a.top && b.top) {
return 1;
} else return b.date - a.date; // 都没定义按照文章日期降序排
})

generator.js全部内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
var config = this.config;
var posts = locals.posts.sort(config.index_generator.order_by);
var paginationDir = config.pagination_dir || 'page';
var path = config.index_generator.path || '';
posts.data = posts.data.sort(function(a, b) {
if (a.top && b.top) { // 两篇文章top都有定义
if (a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
} else if (a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
} else if (!a.top && b.top) {
return 1;
} else return b.date - a.date; // 都没定义按照文章日期降序排
})

return pagination(path, posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
-------------本文结束感谢您的阅读-------------