给Hexo博客增加文章推荐

最近在整理Hexo博客的配置时，发现以前配置文章推荐，做了一半后就不了了之了，今天就把剩下的完成吧。

安装插件

Hexo的文章推荐插件不多，找了半天就找到一个比较合适的– hexo-recommended-posts。这款插件实际上兼具文章推荐和友链的功能。它可以借助后端服务与同样使用这款插件的网站实现链接自动化匹配互换，也可以使用离线模式，仅推荐本站的文章。不过我配置完成后，一直都是推荐本站的文章，目前还没找到原因。

安装插件

npm install hexo-recommended-posts --save

配置插件

插件作者称支持零配置直接使用，但是实际需要考虑各种主题的不同，像我使用的主题hexo-theme-Anisina就不能直接使用，还是需要做一些配置和写一些代码。

添加配置

在网站的_config.yml文件中加入以下配置：

recommended_posts:
  server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 2 #内部文章数量
  externalLinks: 2 #外部文章数量
  autoDisplay: false, #自动在文章底部显示推荐文章
  excludePattern: []
  fixedNumber: false # 控制是否返回固定数量的推荐文章
  titleHtml: <h3>你可能会喜欢<span style="font-size:10; color:gray"></span></h3> #自定义标题

其中 excludePattern 可以添加想要被过滤的链接的正则表达式, 如配置为 ["huluohu.com"], 则所有包含 huluohu.com 的链接都会从推荐文章中过滤掉；

fixedNumber 字段用来控制是否返回固定数量的推荐文章, 如果默认推荐文章不够的话会填充当前文章的前后文章作为推荐文章。

编写widget

在你使用的主题的layout–widget目录下创建widget文件，我使用的是ejs模版，使用其他模版的主题类似：

代码如下：

<div class="widget">
    <% var post_list = recommended_posts(page, site); %>
    <% if(post_list.length > 0) { %>
        <div class="recommended_posts">
            <h3><%= __('你可能会喜欢') %></h3>
            <ul>
                <% post_list.forEach(function(link) { %>
                    <li><a href="<%= link.permalink %>"><%= link.title %></a></li>
                <% }) %>
            </ul>
        </div>
    <% } %>

</div>

集成推荐widget

找到主题的post模版页面，一般在layout目录下

在你认为合适的地方添加以下代码，引入推荐widget

<!-- recommended posts -->
<div class="row">
    <%- partial('_widget/intellij_recommended', {page: page, site: site}) %>
</div>

查看效果

发布博客

hexo g -d

推荐文章效果，作者说的跨站推荐貌似没有生效，看来还得再琢磨琢磨。

• ← 前一篇
• 下一篇 →