在NexT的侧边栏添加近期文章板块

最近听说内链可以改善SEO，于是乎，我想在NexT的侧边栏添加近期文章板块

在网络上查找的方案大致如下

第一种方法

{% 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 %}

将此代码贴在next/layout/macro/sidebar.swig中的if theme.links对应的endif后面
为了配置方便，在主题的config.yml中添加了几个变量，如下：

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

以上操作之后NexT 7.8.0在侧边栏有“近期文章”的文字标志。但是没有链接。

于是我换了另外一种办法，基于NexT 8.X

第二种办法

1. 新建 source/_data/sidebar.njk 文件，内容如下：

{# RecentPosts #}
{%- if theme.recent_posts %}
  <div class="links-of-recent-posts motion-element">
    <div class="links-of-recent-posts-title">
      {%- if theme.recent_posts.icon %}
      <i class="{{ theme.recent_posts.icon }} fa-fw"></i>
      {%- endif %}
      {{ theme.recent_posts.title }}
    </div>
    <ul class="links-of-recent-posts-list">
      {%- set posts = site.posts.sort('date', 'desc').toArray() %}
      {%- for post in posts.slice('0', theme.recent_posts.max_count) %}
        <li class="links-of-recent-posts-item">
          {{ next_url(post.path, post.title, {title: post.path}) }}
        </li>
      {%- endfor %}
    </ul>
  </div>
{%- endif %}

2.修改config.next.yml，取消 custom_file_path 中的 sidebar 和 style 两个注释，并新增 recent_posts 内容。

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

recent_posts:
# 块标题
  title: 最近文章
# 图标
  icon: fa fa-history
# 最多多少文章链接
  max_count: 5

3.修改 source/_data/styles.styl 文件，文件不存在新建即可。添加如下代码：

// 近期文章
.links-of-recent-posts
  font-size: 0.8125em
  margin-top: 10px

.links-of-recent-posts-title
  font-size: 1.03em
  font-weight: 600
  margin-top: 0

.links-of-recent-posts-list
  list-style: none
  margin: 0
  padding: 0

然后发现这个只在站点概括中，在文章目录中不存在

因为大多数访客是不会主动点击站点概括的，那么如何把近期文章板块加入到文章目录的侧边栏中去呢？

我结合了第一种方法

因为第一种办法，能够在目录中显示近期文章四个字，那么说明第一种方法可行，但是可能已经过时或者是笔者配置不正确。

解决办法

把上面新建的sidebar.njk代码复制在next/layout/_macro/sidebar.swig中的适应位置，如果没有修改添加过其他板块，可以在{%- if theme.back2top.enable and theme.back2top.sidebar %}的前面粘贴

因为本博客添加了tag云，所以笔者放在了{% if site.tags.length > 1 %}前面

附带问题

在成功部署后，发现链接前面加了圆点，影响排版

解决办法

在next/layout/_macro/sidebar.swig加入的代码中

<ul class="sidebar-nav motion-element">
    …………
</ul>

修改为

<ul class="sidebar-nav motion-element" style="list-style: none;">
    …………
</ul>

至此问题解决完毕