Hexo定制化-文章末尾推荐与侧边栏随机推荐

  |  

摘要: 改进增加文章推荐的机制

【对算法,数学,计算机感兴趣的同学,欢迎关注我哈,阅读更多原创文章】
我的网站:潮汐朝夕的生活实验室
我的公众号:算法题刷刷
我的知乎:潮汐朝夕
我的github:FennelDumplings
我的leetcode:FennelDumplings


文章末尾推荐

这里使用一个 Hexo 跨博客文章推荐插件,github 链接如下: hexo-recommended-posts。首先用以下命令安装该插件。

1
npm install hexo-recommended-posts --save

此后,在写完一篇文章之后,可以先执行一下命令再在本地起服务:

1
2
hexo recommend
hexo s

结果如下:

可以看到过程中会从一个服务器上拉取,然后在 source/_data 下生成了一个 json 文件,这里面记录了推荐列表。

也可以 hexo clean && hexo g && hexo recommend && hexo d 在服务器上更新部署,或者 hexo s 在本地进行浏览。

可以自己做一些配置,在 _config.yml 中复制以下内容,这是默认配置,然后根据自己的喜好修改即可,例如不想要(由Hexo文章推荐插件驱动这句话的话可以去掉)。

1
2
3
4
5
6
7
8
9
recommended_posts:
server: https://api.truelaurel.com # 后端推荐服务器地址
timeoutInMillis: 10000 # 服务时长,超过此时长,则使用离线推荐模式
internalLinks: 3 # 内部文章数量
externalLinks: 1 # 外部文章数量
fixedNumber: false
autoDisplay: true # 自动在文章底部显示推荐文章
excludePattern: []
titleHtml: <h1>推荐文章<span style="font-size:0.45em; color:gray">(由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动)</span></h1> # 自定义标题

随机推荐

随机推荐就是侧边栏中 RANDOM 标签下显示的随机的 5 篇文章。配置方式如下。

首先打开主题的 themes/hueman/_config.yml 文件,在 widgets 下有一个 recent_posts,这是之前已有的最新发布的 5 篇文章,随机 5 篇文章也可以参考着来,新增一个 random_posts 如下:

1
2
3
4
5
6
7
8
9
10
11
widgets:
- catalog
- recent_posts
# - sticky_posts
- random_posts
- category
- archive
# - tag
- tagcloud
- links
# - google_adsense

然后新建 themes/hueman/layout/widget/random_posts.ejs 文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<% if (site.posts.length) { %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('sidebar.random') %></h3>
<div class="widget">
<ul id="recent-post" class="<%= (theme.customize.thumbnail?'':'no-thumbnail') %>">
<% site.posts.random().limit(5).each(function(post) { %>
<% if (!post.hidden) { %>
<li>
<% if (theme.customize.thumbnail === true) { %>
<div class="item-thumbnail">
<%- partial('common/thumbnail.ejs', {post: post}) %>
</div>
<% } %>
<div class="item-inner">
<p class="item-category"><%- list_categories(post.categories, {show_count: false, depth:2, class: 'article-category', style: 'none', separator: '<i class="icon fa fa-angle-right"></i>'}) %></p>
<p class="item-title"><a href="<%- url_for((post.link?post.link:post.path)) %>" class="title"><%= post.title %></a></p>
<p class="item-date"><time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date) %></time></p>
</div>
</li>
<% } %>
<% }) %>
</ul>
</div>
</div>
<% } %>

其中 ul id="recent-post" 对应 ./source/css/_partial/sidebar.styl 中的 recent-post 这一段,这里直接用就好。

这里把参考的 recent_posts.ejs 也贴在下面,改动不大。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<% if (site.posts.length) { %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('sidebar.recents') %></h3>
<div class="widget">
<ul id="recent-post" class="<%= (theme.customize.thumbnail?'':'no-thumbnail') %>">
<% site.posts.sort('date', -1).limit(5).each(function(post) { %>
<li>
<% if (theme.customize.thumbnail === true) { %>
<div class="item-thumbnail">
<%- partial('common/thumbnail.ejs', {post: post}) %>
</div>
<% } %>
<div class="item-inner">
<p class="item-category"><%- list_categories(post.categories, {show_count: false, depth:2, class: 'article-category', style: 'none', separator: '<i class="icon fa fa-angle-right"></i>'}) %></p>
<p class="item-title"><a href="<%- url_for((post.link?post.link:post.path)) %>" class="title"><%= post.title %></a></p>
<p class="item-date"><time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date) %></time></p>
</div>
</li>
<% }) %>
</ul>
</div>
</div>
<% } %>

打开 languages/en.yml,在 sidebar 下增加 random 这一行,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
sidebar:
follow: 'follow'
newer: 'newer'
older: 'older'
recents: 'recents'
sticky: 'Popular'
random: 'Random'
archives: 'archives'
categories: 'categories'
links: 'links'
tags: 'tags'
tag_cloud: 'tag cloud'
catalogue: 'Catalog'

按阅读量推荐

按阅读量推荐涉及到文章阅读次数的统计,有点复杂,以后再实现。


Share