Hexo-NexT 添加最近更新板块

由于经常性更新一些文章,为更好地展示,因此添加最近更新板块,和之前的一篇文章next主题添加近期文章板块 | YouForever相似。通过搜索并没有找到相关的内容,因此自己根据添加近期文章折腾出来了,在此分享。

主要的添加内容为:

themes\next\layout\_macro\sidebar.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.updated_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.updated_posts_layout }}">
<div class="links-of-blogroll-title">
<i class="fa fa-edit fa-{{ theme.updated_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.updated_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-updated') %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

根据个人习惯或需求选择位置,一般在if theme.links块的前后,我将其添加到if theme.links之前,如下所示。

themes\next\layout\_macro\sidebar.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 {# Blogroll #}

+ {% if theme.updated_posts %}
+ <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.updated_posts_layout }}">
+ <div class="links-of-blogroll-title">
+ <i class="fa fa-edit fa-{{ theme.updated_posts_icon | lower }}" aria-hidden="true"></i>
+ {{ theme.updated_posts_title }}
+ </div>
+ <ul class="links-of-blogroll-list">
+ {% set posts = site.posts.sort('-updated') %}
+ {% for post in posts.slice('0', '5') %}
+ <li>
+ <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
+ {% endif %}

{% if theme.links %}
……

然后在主题配置文件中末尾加入

themes\next\_config.yml
1
2
3
4
# 添加更新文章板块
updated_posts_title: 最近更新
updated_posts_layout: block
updated_posts: true

最终效果如图:

效果图

微信公众号
坚持原创技术分享,您的支持将鼓励我继续创作!
0%