0x00 前言
文章中的文字可能存在语法错误以及标点错误,请谅解;
如果在文章中发现代码错误或其它问题请告知,感谢!
Hexo博客框架版本(hexo vesion):5.3.0
Next主题版本:v5.1.4
0x01 实现方法
打开themes/next/layout/_macro/sidebar.swig
文件,搜索theme.social
代码模块,在该模块代码的{% endif %}
增加如下代码:
{# recent posts #}
{% 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 class="recent_posts_li">
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
打开themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl
文件,在文件末尾添加如下代码:
li.recent_posts_li {
text-align: cengter;
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
打开themes/next/_config.yml
文件,在文件末尾添加如下代码:
# 近期文章设置
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
效果显示:
以上。
参考文档:
1.https://blog.csdn.net/as480133937/article/details/100138838