Hexo添加相关文章的功能

2019-09-01

这类问题使用谷歌google搜索的结果价值高很多！不行再换Bing搜索…

用户阅读完网页后，在页尾有相关文章，也叫相关内容，相关阅读，推荐阅读，猜你喜欢版块，非常有必要。用户会随着相关文章的引导继续浏览，如果没有这个版块，用户一般会关闭网页，而不是返回首页继续阅读，也很少会点击下一篇继续浏览！

所以，相关文章功能对于网站非常重要！

实现相关文章的方法有两个：

一是使用百度推荐，CNZZ云推荐等插件，但是不好用，并且倒闭得只剩下百度推荐；

二是使用系统自带功能，比如WordPress等程序都自带此功能，而Hexo和Hugo等静态博客生成器只需要简单配置也可以实现这个功能。推荐！

Hexo添加相关文章功能的实现方法

推荐方法：来自官方的教程

打开网页hexo.io/plugins/，搜索related，找到插件hexo-related-popular-posts

打开英文教程，添加相关文章功能的流程如下：

1、安装插件【必须的，报错重装】

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

2、以主题crisp为例，编辑crisp\layout_partial内的post.ejs文件，在合适的地方插入以下代码。

  <%-
    popular_posts( {} , post )
  %>

所谓合适的位置，我建议在正文的末尾，比如本主题的正文结束部位如下

  <h1 class="post-title"><%- post.title %></h1>
  <section class="post-content article-entry">
    <%- post.content %>
  </section>
  代码插入在这里
  <footer class="post-footer">
    <!--
    <section class="author">

官网提供的相关文章代码默认展现5个相关文章，如果自定义更多设置，可以参考官网下一步的教程，本人喜欢展示10个相关文章，我的代码如下：

<hr>  
<h3>相关文章</h3>
  <%-
    popular_posts({ maxCount: 10 } , post )
  %>

如果想展现带图片的相关文章，代码如下（皆可配置css）

<%- 
    popular_posts( {maxCount: 10, isImage: true, isExcerpt: true} , page ) 
%>

方法二参考：github.com/huiwang/hexo-recommended-posts

配置主题的配置文件 _config.yml

recommended_posts:
  server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 10 #内部文章数量，建议10
  externalLinks: 1 #外部文章数量
  fixedNumber: false
  autoDisplay: true #自动在文章底部显示推荐文章
  excludePattern: []
  titleHtml: <h3>相关文章<span style="font-size:18px; line-height:200%"></span></h3> #自定义标题，h1可以修改h3修改相关文章这四个字的大小，其他css是自定义相关文章标题的字体和行距

Hexo有几个比较流行的渲染器：EJS、SWIG、PUG

以下是尝试失败的方法，记录如下：

第一个失败方法：

主题文件夹下的script文件夹中建立一个related_post.js的文件，加入大段js内容，然后再到需要调用相关文章的页面模板中添加 <%- related posts(post, site.posts) %> 即可。

配置完毕，页面无法打开！

这种方法类似hugo添加相关文章的功能，都是基于标签，这种方法是主流的思路！

第二个失败方法：

通过hexo插件 hexo-recommended-posts 实现相关文章功能！

在站点根目录下运行：npm install hexo-related-popular-posts –save

在主题配置文件 _config.yml 中开启相关文章推荐功能：

related_posts:
  enable: true
  title:  # custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 10

此时会在每篇文章结尾根据标签相关性和内容相关性来推荐相关文章！

这个方法失败，可能是因为和主题不适配。