hexo-indigo主题添加置顶功能

参考文章：解决Hexo博客文章置顶问题

1. 自定义html排序功能

原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

需添加的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

generator.js完整内容：

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
26
27
28
29
30
31
32
33
34
35
36
'use strict';

const pagination = require('hexo-pagination');


module.exports = function(locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);

	posts.data = posts.data.sort(function(a, b) {
    	if(a.top && b.top) { // 两篇文章top都有定义
        	if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        	else return b.top - a.top; // 否则按照top值降序排
    	}
    	else if(a.top && !b.top) {     // 以下是只有一篇文章top有定义，那么将有top的排在前面
        	return -1;
    	}
    	else if(!a.top && b.top) {
        	return 1;
    	}
    	else return b.date - a.date; // 都没定义按照文章日期降序排
	});


  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

修改完成后，只需要在front-matter中设置需要置顶文章的top值，将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是，这个文件不是主题的一部分，也不是Git管理的，备份的时候比较容易忽略。

使用实例：

使用实例
使用实例

只需要设置top值即可完成排序置顶操作，并且还可以根据不同top值，选择置顶文章的先后次序

2. 添加置顶标签

参考文章的博主使用的是yelee主题，有自己的置顶标签，在indigo主题里，我们可以自己做。

  • 如果要在文章中添加置顶标签，则打开themes\indigo\layout\_partial\post.ejs文件，接着定位到<div class="post-meta"> ，在它的下面添加这段代码：

    1
    2
    3
    4
    5
    6
    <!--添加置顶标签-->
    <% if(post.top > 1){ %>
    	<i class="fa fa-thumb-tack"></i>
        <font color=7D26CD>置顶</font>
        <span class="post-meta-divider">|</span>
    <% } %>

  • 如果要在博客主页的预览页面添加置顶标签，则打开themes\indigo\layout\_partial\index_item.ejs文件，接着定位到<div class="post-meta"> ，在它的下面添加这段代码：

    1
    2
    3
    4
    5
    6
    <!--添加置顶标签-->
    <% if(post.top > 1){ %>
    	<i class="fa fa-thumb-tack"></i>
        <font color=7D26CD>置顶</font>
        <span class="post-meta-divider">|</span>
    <% } %>

  • 如果还想在其他页面添加，则打开对应的 ejs文件，添加上述代码即可

预览效果：

预览效果
预览效果