HEXO添加置顶功能
使用库:参考 http://wangwlj.com/2018/01/09/blog_pin_post/
目前已经有修改后支持置顶的仓库,可以直接用以下命令安装。(cmd 到博客根目录,nmp运行)
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章:
---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---
到目前为止,置顶功能已经可以实现了。
设置置顶标志
打开:/blog/themes/next/layout/_macro 目录下的post.swig文件,定位到
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
简单方法:可能有问题
参考 https://zhwhong.cn/2017/03/23/deal-with-hexo-article-top-problem/
原理:在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; // 都没定义按照文章日期降序排
});
修改完成后,只需要在front-matter中设置需要置顶文章的top值,将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是,这个文件不是主题的一部分,也不是Git管理的,备份的时候比较容易忽略。
以下是最终的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
}
});
};
HEXO添加置顶功能的更多相关文章
- PHPCMS实现文章置顶功能的方法
我个人喜欢把PHPCMS当作博客来用,而作为一个博客,怎能少了文章置顶功能呢?其中用PHPCMS实现置顶功能非常简单,无非是修改下推荐位的名称为置顶,然后在文章列表中推送需要置顶的文章罢了. 不过博客 ...
- Android自定义ScrollView实现一键置顶功能
效果图如下: (ps:动态图有太大了,上传不了,就给大家口述一下要实现的功能吧) 要实现的功能:当ScrollView向上滑动超过一定距离后,就渐变的出现一个置顶的按钮,当滑动距离小于我们指定的距离时 ...
- IOS 作业项目 TableView两个section中cell置顶功能实现
点击cell会置顶,其他的下移
- QT 窗口置顶功能
Qt中,保持窗口置顶的设置为: Qt::WindowFlags m_flags = windowFlags(); setWindowFlags(m_flags | Qt::WindowStaysOnT ...
- sql 置顶功能的查询
sql中有置顶的需求,文章很多条,分页查询,要求置顶的在最前面: 只需要使用: order by 置顶字段 即可
- php 排序和置顶功能实现
(1)排序操作思路 一般来说都是按照发布时间排序.时间戳大的靠前,所以用倒序desc,而不是asc (2)置顶操作思路: 点击置顶时,修改数据库addtime字段值为当前时间即可.因为排序是按照时间戳 ...
- jquery实现页面置顶功能代码
<html> <head> <title></title><script type='text/javascript> //回到顶部功能 f ...
- jquery实现标签上移、下移、置顶
eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...
- winform窗体置顶
winform窗体置顶 金刚 winform 置顶 今天做了一个winform小工具.需要设置置顶功能. 网上找了下,发现百度真的很垃圾... 还是必应靠谱些. 找到一个可以链接. https://s ...
随机推荐
- 2V转3V的电源芯片电路图,2.4V转3V电路
两节镍氢电池1.2V+1.2V是2.4V的标称电压,2.4V可以转3V输出电路应用. 在2.4V转3V和2V转3V的应用中,输出电流可最大600MA. 2V的低压输入,可以采用PW5100低压输入专用 ...
- Java运算符及包机制
Java中的运算符及包机制 算术运算符:+ - * / % ++ -- 赋值运算符:=,+=,-=,*=,/= 关系运算符:>,<,>=,<=,==,!=,instanceof ...
- win server 2019服务器的iis配置以及网站的简单发布
1.首先远程连接到服务器 2.打开服务器管理器 3添加角色和功能 4.安装类型:选择基于角色或基于功能的安装 →服务器角色:从服务器池中选择服务器 5.服务器角色选择Web服务器(iis) 6.功能 ...
- Bitter.Core系列八:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 事务
Bitter.Core 编写事务相当简单,Bitter.Core 尽可能的将代码编写量降为最低,例外一方方面保证客户主观能控制代码.Bitter.Core 事务提交,支持Builkcopy事务,原生事 ...
- ES 2021 来了,详细解读5个新特性,附案例
ES 2021是世界上最受欢迎的编程语言的最新版本〜 本次迭代中包含了五个新特性,让我们来一睹为快. 1.全部替换replaceAll: js默认的replace 方法仅替换字符串中一个模式的第一个实 ...
- RPC 接口必须是业务职责
https://mp.weixin.qq.com/s/MYSF8lCF92ItG_Lc8nOspg 一个加班多新人多团队,我们的代码问题与重构 陈于喆 高可用架构 2020-10-21 微服务编码 ...
- 1.kafka基础架构
kafka基础架构 ## 什么是kafka? Kafka是一个分布式的基于发布/订阅模式的消息队列,主要应用于大数据实时处理领域. 1.什么是消息队列? 2.使用消息队列的好处 1)解耦 允许你独立的 ...
- 字节跳动在 Go 网络库上的实践
https://mp.weixin.qq.com/s/wSaJYg-HqnYY4SdLA2Zzaw RPC 框架作为研发体系中重要的一环,承载了几乎所有的服务流量.本文将简单介绍字节跳动自研网络库 n ...
- Optimistic concurrency control 死锁 悲观锁 乐观锁 自旋锁
Optimistic concurrency control https://en.wikipedia.org/wiki/Optimistic_concurrency_control Optimist ...
- 数据备份与恢复 半持久化 全持久化 fork aof rdb Backing up Disaster recovery 备份 容灾
Redis数据备份与恢复 - 流年晕开时光 - 博客园 https://www.cnblogs.com/deny/p/11531355.html Redis数据备份与恢复 Redis所有数据都是保存在 ...