Hexo NexT 添加近期文章功能

特别喜欢原来自己网站的最近文章功能,之前也花了很多精力设计。最近文章可以很方便的看到本博客最近更新了哪些内容,可惜Hexo的Next主题并没有这个功能,那我就把它加上来。网上的参考文章都是针对较老版本的Swig文件,而现在Hexo已经迁移到了NJK模板上,所以这个修改花了我个把小时才完成。

方案

新建source/_data/sidebar.njk文件,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{# RecentPosts #}
{%- if theme.recent_posts %}
<div class="links-of-recent-posts motion-element">
<div class="links-of-recent-posts-title">
{%- if theme.recent_posts.icon %}
<i class="{{ theme.recent_posts.icon }} fa-fw"></i>
{%- endif %}
{{ theme.recent_posts.title }}
</div>
<ul class="links-of-recent-posts-list">
{%- set posts = site.posts.sort('date', 'desc').toArray() %}
{%- for post in posts.slice('0', theme.recent_posts.max_count) %}
<li class="links-of-recent-posts-item">
{{ next_url(post.path, post.title, {title: post.path}) }}
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}

修改_config.next.yml,打开custom_file_path中的sidebar和style两个内容,并新增recent_posts内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl


recent_posts:
# 块标题
title: 最近文章
# 图标
icon: fa fa-history
# 最多多少文章链接
max_count: 18

剩下的,需要修改styl文件,美化界面。新增source/_data/styles.styl文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 近期文章
.links-of-recent-posts
font-size: 0.8125em
margin-top: 10px

.links-of-recent-posts-title
font-size: 1.03em
font-weight: 600
margin-top: 0

.links-of-recent-posts-list
list-style: none
margin: 0
padding: 0

P.S. 以上内容可以根据个人需要进行调整。

参考

1
https://www.chingow.cn/posts/c7372a12.html