hexo置頂文章及樣式美化

九十發表於2018-05-14
Hexo

問題描述

文章置頂功能實現, top值越高越在前。由於官方並未給出置頂功能, 所以要手動修改。 sticky: 顯示圖釘樣式 top: 置頂功能實現

原理

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

效果

置頂效果

修改

找到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;
    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; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
複製程式碼

找到themes\主題\source\css_custom\custom.styl檔案。新增如下：

/*置頂*/
article:not(:first-of-type) .post-block .set-top div{display:none;}
article:last-of-type .post-block .set-top div{display:none;}
article:first-of-type .post-block .set-top {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}
article:first-of-type .post-block .set-top div{
    line-height: 18px;
    text-align: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 3px 0;
    top: 12px;
    width: 113px;
    background-color: #0bf;
    color: #fff;
    box-shadow: -3px 5px 6px -5px rgba(0,0,0,.5);
    background: -webkit-linear-gradient(left , rgba(48,182,209,0.99),rgba(43,70,191,0.99) 100%);
}
article:first-of-type .set-top>div:before {
    content: "";
    position: absolute;
    left: 6px;
    top: 100%;
    z-index: -1;
    border-left: 4px solid #31a4ce;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-top: 4px solid #31a4ce;
}
article:first-of-type .set-top>div:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 100%;
    z-index: -1;
    border-left: 4px solid transparent;
    border-right: 4px solid #2f5ec3;
    border-bottom: 4px solid transparent;
    border-top: 4px solid #2f5ec3;
}
複製程式碼

使用

title: hexo置頂文章及樣式美化
date: 2018-05-14 17:51:12
tags: - hexo
categories: - 技能簿
top: 100
複製程式碼

相關文章