Hexo博客Next主題文章置頂相關

我需要寫一些文章做推薦相關，需要文章置頂功能
博客效果

置頂方法配置

一、修改庫文件

原理

在Hexo生成首頁HTML時，將top值高的文章排在前面，達到置頂功能。

修改方法

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

需添加的代碼：

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; // 都沒定義按照文章日期降序排
});

其中涉及Javascript的比較函數：

cmp(var a, var b) {
    return  a - b; // 升序，降序的話就 b - a
}

修改完成後，只需要在front-matter中設置需要置頂文章的top值，將會根據top值大小來選擇置頂順序top值越大越靠前。需要注意的是，這個文件不是主題的一部分，也不是Git管理的，備份的時候比較容易忽略。

修改內容

以下是最終的generator.js內容，可以直接複製替換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';

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

二、插件配置

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

置頂文章配置

然後在需要置頂的文章的Front-matter中加上top: true或者top數字top: 1：

title: 置頂
date: 2019-09-09 09:09:09
top: true
top: 1

按照數字大小依次往下置頂排序

置頂標誌

置頂的文章會顯示在主頁最上面，沒有明確的置頂標誌，我們需要鍵入置頂標誌。

設置置頂標誌

打開：/blog/themes/next/layout/_macro目錄下的post.swig文件，定位到<div class="post-meta">標籤下，插入如下代碼：

          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置頂</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

效果展示：

        <div class="post-meta">
          <span class="post-time">
在此之下插入代碼，包含在 span塊內        
          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置頂</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

---

參考文章1
參考文章2

我的個人博客主頁，歡迎訪問

我的CSDN主頁，歡迎訪問

我的GitHub主頁，歡迎訪問