说实话这个寒假真的是挺久的,希望疫情快点好转起来!
之前一直想着要让自己博客中的文章按照更新时间来排序,因为自己在学习的过程中总是会去更新之前的文章,特别是有时候更新量还挺大的,不放到前面来感觉有点可惜哈哈。但是由于没有时间而且不知道怎么做,一直没实现。今天突然想起这个事情,琢磨了好久终于搞出来了。
此次改动之后,我将博客侧栏中的“归档”修改为“最新发布”,依然是按照文章发布时间归档的。
主页文章按更新时间排序
实现前提:使用hexo搭建博客。
我先看了看hexo的配置文件中有没有可以直接设置的地方,试了几个关键词搜索之后发现果然有,这里原本是按照发布日期排序的。
1 | # Home page setting |
看了一些hexo自动生成的代码之后,我发现了几个与date
用法类似的参数,其中updated
与date
相对应。于是我将-date
替换成了-updated
,然后hexo start
之后发现没起作用。
于是我参照着官方文档里的仅有的一点点说明,改成了-name
试试能不能按名称排序,but failed。
没办法,我只好开始了漫长的对所有但凡是包含“date”的文件的阅览过程…网上也找不到任何资料,估计有这种想法的只有我吧哈哈。
终于,我在node_modules\hexo-generator-index-pin-top\lib\generator.js
文件中找到了似乎是用于排序的代码,该文件是为了添加文章置顶功能的,但当置顶等级设置相同时,按照发布日期进行排序。
由于本人对JavaScript只是粗略了解,因此依样画葫芦作了一些修改,改完之后该文件中的内容如下所示。
1 | ; |
再次hexo s
,生效,开心。
侧栏按文章更新时间排序
实现前提:使用hexo搭建博客。
这是我在网上找到的另一种方法,由于和next主题不是特别搭配,因此最终没有使用。
首先在侧栏对应的目录下创建一个名为blog-sidebar.swig
的渲染文件。(比如我的侧栏在header.swig
中编辑,对应的目录为themes\next\layout\_partials
,这里我使用了next主题,不同的话自行更改)
在该文件中添加如下代码。
1 | <div class="recent-posts"> |
然后来到编辑侧栏的文件,在合适的位置添加如下代码。
1 | <div class="blog-sidebar-left"> |
建议添加在nav标签内部,原因我在front-end笔记:使用div实现居中显示一文中曾作说明。
侧栏添加其它文章排序方式
实现前提:使用hexo搭建博客,使用next主题并使用leancloud做站点统计。
实现上面的功能之后,我又添加了“最近阅读”和“热度排名”两项。下面来说说我具体是怎么做的。
注:由于leancloud访问不是很稳定,在线浏览时或许会出错,但下面的方法确实是可行的。
按阅读量排行
在博客目录下执行hexo n page rank
新建一个rank页面,编辑其中的index.md
文件,添加如下代码。
1 | <div id="rank"></div> |
注意,请将上面代码中的YOUR_APPID
和YOUR_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 | <div id="new"></div> |