【个人网站搭建】hexo框架+Next主题侧栏添加近期文章显示功能

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