hexo笔记:文章排序

说实话这个寒假真的是挺久的,希望疫情快点好转起来!
之前一直想着要让自己博客中的文章按照更新时间来排序,因为自己在学习的过程中总是会去更新之前的文章,特别是有时候更新量还挺大的,不放到前面来感觉有点可惜哈哈。但是由于没有时间而且不知道怎么做,一直没实现。今天突然想起这个事情,琢磨了好久终于搞出来了。
此次改动之后,我将博客侧栏中的“归档”修改为“最新发布”,依然是按照文章发布时间归档的。


主页文章按更新时间排序

实现前提:使用hexo搭建博客。
我先看了看hexo的配置文件中有没有可以直接设置的地方,试了几个关键词搜索之后发现果然有,这里原本是按照发布日期排序的。

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

看了一些hexo自动生成的代码之后,我发现了几个与date用法类似的参数,其中updateddate相对应。于是我将-date替换成了-updated,然后hexo start之后发现没起作用。
于是我参照着官方文档里的仅有的一点点说明,改成了-name试试能不能按名称排序,but failed。
没办法,我只好开始了漫长的对所有但凡是包含“date”的文件的阅览过程…网上也找不到任何资料,估计有这种想法的只有我吧哈哈。
终于,我在node_modules\hexo-generator-index-pin-top\lib\generator.js文件中找到了似乎是用于排序的代码,该文件是为了添加文章置顶功能的,但当置顶等级设置相同时,按照发布日期进行排序。
由于本人对JavaScript只是粗略了解,因此依样画葫芦作了一些修改,改完之后该文件中的内容如下所示。

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 当两篇文章top都有定义时
if(a.top == b.top) return b.updated - a.updated; // 若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.updated - a.updated; // 若都没定义,则按照文章更新日期降序排列
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

再次hexo s,生效,开心。


侧栏按文章更新时间排序

实现前提:使用hexo搭建博客。
这是我在网上找到的另一种方法,由于和next主题不是特别搭配,因此最终没有使用。
首先在侧栏对应的目录下创建一个名为blog-sidebar.swig的渲染文件。(比如我的侧栏在header.swig中编辑,对应的目录为themes\next\layout\_partials,这里我使用了next主题,不同的话自行更改)
在该文件中添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="recent-posts">
<div class="item_headline" style="Text-align:center">
<span>最近更新<span>
</div>
<ul class="posts-list-block">
{% set posts = site.posts.sort('-updated') %}
{% for post in posts.slice('0', '10') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>

然后来到编辑侧栏的文件,在合适的位置添加如下代码。

1
2
3
<div class="blog-sidebar-left">
{% include 'blog-sidebar.swig' %}
</div>

建议添加在nav标签内部,原因我在front-end笔记:使用div实现居中显示一文中曾作说明。


侧栏添加其它文章排序方式

实现前提:使用hexo搭建博客,使用next主题并使用leancloud做站点统计。
实现上面的功能之后,我又添加了“最近阅读”和“热度排名”两项。下面来说说我具体是怎么做的。

注:由于leancloud访问不是很稳定,在线浏览时或许会出错,但下面的方法确实是可行的。

按阅读量排行

在博客目录下执行hexo n page rank新建一个rank页面,编辑其中的index.md文件,添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="rank"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("YOUR_APPID", "YOUR_APPKEY");</script>
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit(10);
query.find().then(function (todo) {
for (var i=0;i<10;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<p>"+"<font color='#1C1C1C'>"+time+"<i class='fa fa-eye' aria-hidden='true'></i>->"+"</font>"+"<a href='"+"YOUR_URL"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("rank").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

注意,请将上面代码中的YOUR_APPIDYOUR_APPKEY替换为你learncloud中的对应ID和key,可在设置中查看。此外,还要将YOUR_URL替换为你的博客地址,包含协议并以/结束,例如我的:https://Gsy00517.github.io/

注意:请务必注意定义content变量时单引号和双引号的使用。

这时部署的话还是看不到这个page的,要看到排序,还需如下设置。
打开主题配置文件,在对应menu的位置添加rank: /rank/ || signal。这里的图标可以到Font Awesome上去找,非常丰富,我这里用的是signal。
如果你使用了语言包,别忘了到语言包内添加对应的翻译,比如我在hexo\theme\next\languages\zh-Hans.yml文件中对应menu的位置添加了rank: 热度排名

按最近阅读排行

在leancloud中,阅读量最近的更新时间用参数updatedAt表示,这是一个格式为YYYY-MM-DD HH:mm:ss的时间,不过我们也可以对它降序排列。
实现方法于上面的大同小异,这是我调整的代码,可在此基础上创造发挥,亲测有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="new"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("YOUR_APPID", "YOUR_APPKEY");</script>
<script type="text/javascript">
var updatedAt=""
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('updatedAt');
query.limit(10);
query.find().then(function (todo) {
for (var i=0;i<10;i++){
var result=todo[i].attributes;
title=result.title;
updatedAt=result.updatedAt;
url=result.url;
var content="<p>"+"<a href='"+"YOUR_URL"+url+"' target='_blank'>"+title+"</a>"+"</p>";
document.getElementById("new").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>


碰到底线咯 后面没有啦

本文标题:hexo笔记:文章排序

文章作者:高深远

发布时间:2020年02月07日 - 15:13

最后更新:2020年02月09日 - 16:13

原始链接:https://gsy00517.github.io/hexo20200207151318/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%