hexo主题Icarus浅度修改教程

hexo主题Icarus浅度修改教程

1.取消不需要的侧边栏widgets

这里其实很简简单,可能有些同学直接注释的时候发现在部署的时候可能会出错,其实是因为注释需要将开头的符号【 - 】 也一起注释掉

- #这个不注释的话可能会出现错误
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#     # Widget name
# type: tagcloud
# # Where should the widget be placed, left or right
# position: left

# -
# # Widget name
# type: archive
# # Where should the widget be placed, left or right
# position: left
# -
# # Widget name
# type: tag
# # Where should the widget be placed, left or right
# position: left

2.解决Hexo博客文章置顶问题

Hexo默认只提供了按发布日期的排序,只好网上找了些资料修改。

原理:在Hexo生成首页HTML时,将top值高的文章排在前面,达到置顶功能。

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js,在生成文章之前进行文章top值排序。

需添加的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    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; // 都没定义按照文章日期降序排

});

修改完成后,只需要在front-matter中设置需要置顶文章的top值,将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是,这个文件不是主题的一部分,也不是Git管理的,备份的时候比较容易忽略。

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
30
31
32
33
'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);

posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});

var paginationDir = config.pagination_dir || 'page';

return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

3.背景添加动态线条效果

在 \Hexo\themes\icarus\layout\layout.ejs 文件中(最下面)添加如下代码:

1
2
3
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

其中:

  • color:表示线条颜色,三个数字分别为(R,G,B),默认:(0,0,0)
  • opacity:表示线条透明度(0~1),默认:0.5
  • count:表示线条的总数量,默认:150
  • zIndex:表示背景的z-index属性,css属性用于控制所在层的位置,默认:-1

4.侧边栏“最新文章”栏

这个东西啊,个人感觉真的没什么实用性。可以把它改成类似于优秀文章推广之类的,就比较好了。
打开\icarus\layout\widget\recent_posts.locals.js 找到:

1
const _posts = posts.sort('date', -1).limit(5).map(post =>

改成

1
const _posts = posts.sort('priority', -1).limit(5).map(post =>

然后只需要在每篇文章上面的配置里加上priority: xxx,其中xxx是你自由确定的优先级(1,2,3之类的数字),就可以自由更改显示在那里的文章了。

当然也可以调整显示在那里的文章数量,像这样:

1
const _posts = posts.sort('priority', -1).limit(10).map(post =>

就是显示10篇文章。10也可以改成其它数字。

然后更改栏目名称。打开\icarus\languages\zh-CN.yml,找到:

1
recents: '最新文章'

一句,把“最新文章”替换成“阅读推荐”就好了。

评论 (tip: 昵称框输入QQ号即可评论)

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×