新版本icarus主题下实现文章首页置顶

以下操作是在 icarus 主题的 4.1.1 版本下完成的。

因 icarus 主题的作者此前升级主题时，将源码从 ejs 语言变成了 jsx 的，所以现有网上关于文章首页置顶的教程代码都不太好使。自己在此记录下为实现置顶，新的操作是怎样的。

首先声明，以下操作是在 icarus 的 4.1.1 版本下进行的。具体而言，为添加一个置顶标识，可通过以下三个步骤完成：

1、将需要置顶的文章的 front-matter 中添加 top 属性，并设置为 true。例如：

title: 相聚北京，邂逅未知的自己
author: pyli
date: 2019-08-09 10:20:59
tags: 
- 纪实
categories: 
- 助学夏令营
- 2019-夏令营
excerpt: 2019 北京助学助教夏令营纪实
cover: "https://github.com/lpy716/hello-world/blob/2019-SC_foto/cover_c.jpg?raw=true"
top: true

2、打开个人站点在本地根目录下的 node_modules\hexo-generator-index\lib\generator.js 文件，将其修改为：

'use strict';

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

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);
+
+ posts.data = posts.data.sort(function(a, b) {
+     if(a.top && b.top) {
+         if(a.top == b.top) return b.date - a.date;
+         else return b.top - a.top;
+     }
+     else if(a.top && !b.top) {
+         return -1;
+     }
+     else if(!a.top && b.top) {
+         return 1;
+     }
+     else return b.date - a.date;
+ });

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

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

3、打开同一根目录下的 themes\icarus\layout\common\article.jsx 文件，进行如下修改：

<article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
    {page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
        <div class="level-left">
+           {/* Top */}
+           {page.top ? <span class="level-item tag is-danger" style="background-color: #3273dc;">
+               {'TOP'} 
+           </span> : null}
            {/* Creation Date */}
            {page.date && <span class="level-item" dangerouslySetInnerHTML={{
                __html: _p('article.created_at', `<time dateTime="${date_xml(page.date)}" title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
            }}></span>}