最近听说内链可以改善SEO,于是乎,我想在NexT的侧边栏添加近期文章板块
在网络上查找的方案大致如下
第一种方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| {% 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
中添加了几个变量,如下:
1 2 3
| recent_posts_title: 近期文章 recent_posts_layout: block recent_posts: true
|
以上操作之后NexT 7.8.0在侧边栏有“近期文章”的文字标志。但是没有链接。
于是我换了另外一种办法,基于NexT 8.X
第二种办法
- 新建 source/_data/sidebar.njk 文件,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| { {%- 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 内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| custom_file_path: sidebar: source/_data/sidebar.njk style: source/_data/styles.styl
recent_posts:
title: 最近文章
icon: fa fa-history
max_count: 5
|
3.修改 source/_data/styles.styl 文件,文件不存在新建即可。添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| // 近期文章 .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云,所以笔者放在了`