Hexo: 给博客添加近期文章板块

博客文章置顶了几篇文章后,总觉得不能直观的找到最近发表的文章,因此想增加近期文章版块,网上查了相关资料,虽然Next模块不直接提供配置项,但很容易实现。

修改sidebar.swig文件

参考了文章 Hexo 系列(3) Next 主题配置,具体方法为:将下面代码贴在 next/layout/_macro/sidebar.swig 中的 if theme.links 对应的 endif 后面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% 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>

上面这段代码为博最近文章版块的相关代码。

根据sidebar.swig文件中 if theme.links 这段代码内容,很容易猜到是博客首页右侧友情链接的代码,我想把最近文章的版块放到友情链版块的上面,于是计划将这段代码放到 if theme.links 这段代码的前面,如下:

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
34
{# Blogroll #}
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% 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 %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

设置主题配置文件

在主题配置文件 /d/hexo/themes/next/_config.yml 中添加3个变量,如下:

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

验证效果

之后重启本地 Hexo 博客,查看效果如下:

已经出来了近期文章版块。

参考

最后推荐和张文升共同编写的《PostgreSQL实战》,本书基于PostgreSQL 10 编写,共18章,重点介绍SQL高级特性、并行查询、分区表、物理复制、逻辑复制、备份恢复、高可用、性能优化、PostGIS等,涵盖大量实战用例!

购买链接:https://item.jd.com/12405774.html

PostgreSQL实战
感谢支持!
0%