Hexo博客Next主题添加相关文章推荐功能

发表于 更新于 分类于 ， 阅读次数： 阅读次数： Changyan： 本文字数： 422 阅读时长 ≈ 2 分钟

使用Hexo-Related-Posts插件添加相关文章推荐。Hexo-Related-Popular-Posts​插件​​

Hexo-Related-Posts插件

安装插件

于博客站点根目录打开Git Bash，运行下面的命令：

1
npm install hexo-related-posts --save

主题配置

Next主题的配置文件_config.next.yml​

1
2
3
4
5
6
7
8
9
10
11
related_posts:
  enable: true
  # Custom header, leave empty to use the default one 设置推荐区块的标题
  title:   
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

修改样式

打开文件hexo\node_modules\hexo-theme-next\layout\_partials\post\post-related.njk​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="links-of-blogroll-title">
  {%- if theme.related_posts.icon %}<i class="{{ theme.related_posts.icon }} fa-fw"></i>{% endif %}
  {{ __('post.related_posts') }} 
<ul class="popular-posts">
{%- for path in page.related_posts %}
  {%- set popular_post = site.posts.findOne({ path: path }) %}
  <li class="popular-posts-item">
    <a class="popular-posts-link" href="{{ url_for(popular_post.path) }}" rel="bookmark">
    {{ popular_post.title }}
    {%- if popular_post.date %}
      <time class="popular-posts-time">{{ date(popular_post.date) }}</time>
    {%- endif %}  
    </a>
  </li>
{%- endfor %}
</ul> 
</div>

在侧边栏插入

打开文件hexo\node_modules\hexo-theme-next\layout\_macro\sidebar.njk​，插入下面的语句：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{%- if theme.related_posts.enable %}
  {%- if theme.pjax %}
    <div class="pjax">
  {%- endif %}
  {%- if page.related_posts and page.related_posts.length > 0 %}
    <div class="sidebar-inner sidebar-post-related">
      <div class="animated">
        {{ partial('_partials/post/post-related.njk') }}
      </div>
    </div>
  {%- endif %}  
  {%- if theme.pjax %}
    </div>
  {%- endif %}
{%- endif %}

插入到文章底部

打开文件hexo\node_modules\hexo-theme-next\layout\_macro\post.njk​，插入下面的语句：

1
2
3
{%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
	{{ partial('_partials/post/post-related.njk') }}
{%- endif %}

​​

[弃置]Hexo-Related-Popular-Posts不好看

通过Hexo-Related-Popular-Posts插件实现在文章下面显示相关文章推荐。

安装插件

https://github.com/tea3/hexo-related-popular-posts

1
npm install hexo-related-popular-posts --save

主题配置

Next主题的配置文件_config.next.yml​

1
2
3
4
5
6
7
8
9
10
11
related_posts:
  enable: true
  # Custom header, leave empty to use the default one 设置推荐区块的标题
  title:   
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

使用

将popular_posts( {} , post )​插入到文章模板中

1
{{popular_posts( {} , post )}}

参考

Hexo + NexT 深度个性化配置 (2020.1 更新) | UPWNothing's Playground