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

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

修改sidebar.swig文件

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

{% 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 这段代码的前面，如下:

{# 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个变量，如下：

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

验证效果

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

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

参考

• Hexo 系列(3) Next 主题配置