next主题增加近期文章侧边栏

发表于 更新于 分类于 阅读次数： 本文字数： 2k 阅读时长 ≈ 2 分钟
next主题边栏显示文章列表效果

边栏显示文章列表效果

挺奇怪next没用提供这样的功能，文章一多一篇篇翻实在是累，还好找到了有人实现最近文章的功能，那么做文章列表也就同理了

我修改过的代码
首先是：

路径： /hexo-theme-next/layout/_macro/sidebar.njk
在最后一个{% endif %}后面加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% if theme.recent_posts.enable %}
    <div class="links-of-blogroll" style="margin-top:20px; border-style:dotted none none none; padding-top:5px; text-align:left;padding-left: 20px; padding-right: 10px; padding-bottom: 5px;">
      <div class="links-of-blogroll-title" style="padding-bottom: 5px; padding-top: 5px; padding-left: 0px; padding-right: 20px; font-size: 1.6em; argin-right: 5px;">
    <!-- 选择合适的icon -->
    {%- if theme.recent_posts.icon %}<i class="{{ theme.recent_posts.icon }}" aria-hidden="true"></i>{%- endif %}
        <b style="font-size: 0.65em; padding-left: 8px; position: relative; top: -2px;">{{ theme.recent_posts.description }}</b>
      </div>
      <ul class="links-of-blogroll-list">
    <!-- 文章排序规格,-updated 按照文章更新时间倒排 -->
        {% set posts = site.posts.sort('-updated').toArray() %}
    <!-- 显示20数目的文章 -->
        {% for post in posts.slice('0','20') %}
          <li class="postsSidebarNumb" style="text-indent: -1em;">
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}

出于美观我把一些css代码内嵌进去了其实不推荐这样做（寄

_config.yml

路径： /hexo-theme-next/_config.yml

1
2
3
4
5
# 近期文章配置  
recent_posts:
  enable: true
  icon: fab fa-markdown
  description: 文章列表

main.styl

路径：/hexo-theme-next/source/css/main.styl
是因为我想给文章列表加上计数，直接在css里用伪类做（要不是伪类不能html内嵌写进去我也不写这里

1
2
3
4
5
6
7
8
9
10
//侧边栏计数伪类
body {
counter-reset: postsSidebarNumbsection; 
}

.postsSidebarNumb::before {
  counter-increment: postsSidebarNumbsection;
  content: counter(postsSidebarNumbsection) ": ";
}

效果图

效果图