吐槽改进日志

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

字数统计: 1.1k字   |   阅读时长: 5分

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

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的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