hexo next主题 添加最新文章板块

现在我们来看下如何给hexo博客next主题添加最新文章模块?
首先我们找到侧边栏模块 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
22
{% if theme.recent_posts.enable %}
<aside class="sidebar sidebar-ads sidebar-posts">
<div>
<div class="recent_posts_title">
{{ theme.recent_posts.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% set bg_colors = ['rgb(31, 216, 210)', 'rgb(4, 166, 247)', 'rgb(70, 101, 226)', 'rgb(94, 137, 229)', 'rgb(0, 206, 123)'] %}
{% for post in posts.slice('0', '5') %}
<li>
<div class="text-img" style="background:{{bg_colors[loop.index - 1]}};">{{ post.title.substr(0, 3) }}</div>
<div class="post-name">
<div>{{ date(post.date, config.date_format) }}</div>
<div><a href="{{ url_for(post.path) }}" title="{{ post.title }}" >{{ post.title }}</a></div>
</div>
</li>
{% endfor %}
</ul>
</div>
</aside>
{% endif %}

然后为了灵活管理,我们添加一些主题配置,先找到 next/_config.yml ,添加如下配置:

1
2
3
recent_posts:
enable: true
recent_posts_title: 最新发表文章

最后重新执行

1
2
hexo clean
hexo g

最后我们得到的效果是
侧边栏

坚持原创技术分享,您的支持将鼓励我继续创作!