hexo博客文章置顶功能实现的两种方法

2023-11-18

写在前面

本文主要描述了如何实现hexo文章置顶功能,讲述了通过修改源码和通过更改插件两种方式实现,以及如何添加置顶显示。文章可能还有很多不足,请大家谅解,欢迎大佬提意见。

本文使用的东西

  1. win10电脑
  2. hexo 4.0.0

1.使用到的插件简述

1.1hexo-generator-index插件

hexo-generator-index是官方默认的博客文章排序插件,在我们安装hexo时就存在该插件了,hexo博客正常运行离不开该插件。该插件实现了按文章发表时间倒序排序,没有实现文件置顶功能。

1.2hexo-generator-index-pin-top插件

hexo-generator-index-pin-top是一个文章置顶功能插件,在置顶之外实现文章按发表时间倒序功能,该插件用于替换hexo-generator-index插件

1.3原理

本文讲述的两种方式:

  1. 通过修改hexo-generator-index插件源码的方式来实现置顶功能;
  2. 使用hexo-generator-index-pin-top插件直接替换hexo-generator-index插件实现置顶功能。

2.修改源码方式

2.1优缺点

功能灵活,自己想怎么排序就怎么排序,但是实现稍微会麻烦一点点。

2.2功能实现

1.打开博客目录,打开博客目录下的“node_modules\hexo-generator-index\lib”目录,其中的“generator.js”文件就是我们所要修改的文件。

实现该功能需要在const posts = locals.posts.sort(config.index_generator.order_by);
代码下添加一下内容:

  posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章都有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; 	//都没有top标签,最新的文章在前面
});

修改后的代码如下图:
在这里插入图片描述

2.3使用

使用时只需要在文章中加入top属性即可,top越大文章越靠前。
在这里插入图片描述

3. 更改插件方式

3.1优缺点

实现简单,但是不够灵活,如果想再自定义一点排序方式还是要去改源码

3.2功能实现

卸载系统自带的排序插件

npm uninstall hexo-generator-index

添加替代插件

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

添加插件

3.3使用

使用时只需要在文章中加入top属性即可,top越大文章越靠前。
在这里插入图片描述

4.添加置顶标志

不同的主题,添加置顶方式方法各不一样,我这里以icarus主题为例,添加置顶标志,你们只要参考思路就可以了。

4.1找到需要修改的文件

1.打来博客目录的“themes”目录,选择自己正在使用的主题,我这里用的是icarus主题。
在这里插入图片描述
2.打开主题中的“layout”目录,根据里面文件的字面意思选择一个文件打开,看看是不是我们需要修改的文件。在icarus主题中要修改的文件为“layout\common\article.ejs”文件
在这里插入图片描述

4.2验证找的文件有没有正确

我们找到了可能是我们需要修改的文件,然后打开它。
如果你懂这个文件的语法就很容易可以判断是不是你要修改的文件。

如果你不懂语法也没关系,打开浏览器,访问博客首页,按“F12”打开html源代码,找到你要修改的位置。比如我要修改的源代码位置如下。
在这里插入图片描述
在我们认为是需要修改的文件里认真看有没有我们需要改位置的代码(我相信博客都搭起来了,你至少也能看懂一点点语法含义),如果找到了,那就证明这个文件就是我们要找的文件了。
在这里插入图片描述
在这里插入图片描述

4.3修改代码

既然位置找到了,我们就可以修改代码了。

1.首先我们要判断打开的链接是不是首页,置顶标志只在首页显示,而文章详情界面不仅会在首页显示还会在查看文章界面显示(至少大部分主题是这样),如果在查看文章界面也要显示置顶标记,那就忽略这一条。

2.判断top参数是否存在。存在就添加标记。

我添加的代码如下

<% if (index && post.top){ %>
	置顶
<% } %>

在这里插入图片描述
显示效果如下:
在这里插入图片描述
我只是简单实现了一下功能,没有进行样式控制,样式控制都是html+css很简单,不演示。

<% if (index && post.top){ %>
	样式控制的代码
<% } %>

注意:这个代码是icarus主题的,其他主题的不一定相同哦,不能随便原文抄。知道原理,参考一下代码上下文格式,就一个if语句,很容易就可以写出来了。

5.总结

本文到此结束,添加文章置顶功能还是比较容易的,如果有不清楚的地方欢迎评论留言(特别是添加置顶标志这一块,不同的主题都有一点不一样),看到的留言我都会回复的。本文到此结束,有什么不足的地方请大家不吝指正。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

hexo博客文章置顶功能实现的两种方法 的相关文章

  • 在github上搭建hexo个人博客(Linux-Ubuntu)

    什么是 Hexo xff1f Hexo 是一个博客框架 xff0c 用来生成静态网页 安装前提 安装 Hexo 很简单 但是在安装前 xff0c 需要检查电脑里有没有这两样东西 Node js Git 以下安装都是基于Ubuntu平台下 安
  • 使用hexo+github搭建免费个人博客详细教程

    Windows环境下Git安装 配置SSH key 安装node js npm 安装Hexo及配置 发布博客 前言 使用github pages服务搭建博客的好处有 xff1a 全是静态文件 xff0c 访问速度快 xff1b 免费方便 x
  • 2022最新hexo最新搭建教程

    本文时间 xff1a 2022 02 03 安装包版本如下 xff1a NodejsLTS16 13 2 Git2 35 0 成果预览 故人随笔 nodejs安装 1 双击安装包 2 Next 3 修改安装目录为 D Develop nod
  • 部署hexo遇到报错ERROR Deployer not found: git的解决办法

    部署hexo遇到报错ERROR Deployer not found git的解决办法 今天部署hexo的时候遇到一个报错 hexo c span class token operator amp amp span hexo g span
  • 域名绑定Github个人博客

    首先自吹一波 我个人的博客网址 我的个人博客 1 个人博客搭建 基础的建站工作以下一套视频足以KO 底部音乐栏可以研究一下帮助文档 帮助文档其实非常的重要 很多问题全都在最新版本的帮助文档里面 之前查了网上很多答案都不太对 最后研究了一下帮
  • Hexo在多台电脑上提交和更新

    文章目录 1 博客搭建 2 创建一个新文件夹new 用于上传hexo博客目录 3 github上创建hexo分支并设置为默认分支 创建hexo分支 将hexo分支设置为默认分支 4 进入新建的文件夹中git clone 再上传相关文件至he
  • hexo设置博客的主题

    文章目录 一 设置博客的主题 二 设置博客的动态背景 一 设置博客的主题 1 登录 https hexo io themes 2 选择自己喜欢的个人主题 然后点击对应的主题 进入代码界面后 点击进入下面的按钮 然后进行保存 到对应的文件夹下
  • Hexo 完整使用教程

    官网 官网地址 https hexo io zh cn 环境 1 node hexo 基于 node 所以首先要安装node环境 2 npm 包管理工具 环境配置请参考本站对应安装教程 快速开始 安装 hexo npm install g
  • hexo博客优化之文章置顶+置顶标签

    本文首发于wangwlj com 博文置顶 一种方法是手动对相关文件进行修改 具体可参考这篇文章 另一种方法就是 目前已经有修改后支持置顶的仓库 可以直接用以下命令安装 npm uninstall hexo generator index
  • hexo提交报错 unable to access ‘https://github.com/*/*.github.io.git/‘: Couldn‘t resolve host ‘github.com

    title gt hexo提交报错 unable to access https github com github io git Couldn t resolve host github com date 2016 10 08 19 08
  • 将hexo自定义域名升级https

    原文转载自我的博客https benym cn 前言 Tips 有什么问题可以在下方留言板留言哦 留下自己的邮箱 可以保证快速回复 最近在折腾博客 发现github上很多人说个人博客支持https很重要 原本的github io域名本来支持
  • Hexo+next主题美化静态博客

    前言 需要在Hexo下配置next主题 Hexo配置next主题教程 点我跳转 更改配置以后使用素质三连 hexo clean hexo g hexo s即可本地看到效果 hexo clean hexo g hexo s 注 部分参考自互联
  • 使用hexo搭建个人博客 在Github上一键部署

    文章目录 一 初步搭建本地Hexo博客 1 安装 安装前提 安装 Hexo 2 建站 生成项目 运行项目 二 更换博客主题 hexo theme matery 1 下载 2 更换主题 3 更换中文 4 修改主题项中的配置 新建分类 cate
  • hexo主题标签的使用

    https akilar top posts 615e2dec 这个是我看的教程 我直接复制的源码 友情链接 LrcShare 实现hexo标签的可以折叠 hexo标签的使用方法 要实现Hexo标签的可折叠 可以使用Hexo内置的foldi
  • 【Hexo】【Blog】更换主题【简】

    下载 Hexo themes Github NEXT主题 新建文件夹 这里想偷个懒一次装好 需要安装一些插件工具 有些小头疼 还是从GitHub拉下来再去改个性化的界面吧 ps 用git拉下来的话也比较慢 如果不换源的话 我依旧down下来
  • Windows下,Hexo+GitHub搭建博客

    一 注册GitHub账号 二 创建GitHub仓库 创建git仓库时候 仓库的名称有格式要求 例如我的GitHub仓库用户名是thinkerwalker 那么我创建的仓库名称就是thinkerwalker github io 此处的警告是因
  • Hexo个人博客主题配置

    系列文章目录 1 Hexo Github Gitee 搭建个人博客 2 Hexo个人博客主题配置 目录 系列文章目录 配置站点信息 修改主题 Next主题配置 样式 favicon avatar rss 代码块 回到页面顶部 阅读进度条 G
  • hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐)&&Valine-1.4.4新版本尝鲜+个性制定(表情包、qq头像、UI样式)

    文章目录 hexo sakura 给博客增添侧边栏 回到顶部 跳转评论 深色模式 播放音乐 原理 直接使用 Valine 1 4 4新版本尝鲜 个性制定 表情包 qq头像 UI样式 总结 本文全是参考大佬博客 顺着步骤写的记录 hexo s
  • 基于Hexo+Matery的LuckyBlog开源搭建教程

    前言 之前在B站上发布了个人博客的视频 播放量也破千了 有网友私聊也想要搭建一个这样的博客 经过一段时间的准备 现将本人博客的源代码公布出来 大家只需要根据以下的步骤 即可快速搭建一个漂亮完善的博客 0x01 LuckyBlog 介绍 上一
  • 如何为 Hexo 实现选项卡式代码块标签

    我正在尝试在 hexo 中创建选项卡式代码块 作为标签插件 但我不知道在哪里放置我的 js 函数 我想我可以使用加载该函数js 助手 https hexo io api helper html但我不知道在哪里包含助手 我尝试将其添加到标签插

随机推荐

  • 《Linux From Scratch》第三部分:构建LFS系统 第六章:安装基本的系统软件- 6.29. Coreutils-8.23...

    Coreutils 软件包包含用于显示和设置基本系统特性的工具 大概编译时间 2 5 SBU 需要磁盘空间 193 MB 6 29 1 安装 Coreutils POSIX 要求 Coreutils 中的程序即使在多字节语言环境也能正确识别
  • ChatGPT3.0、ChatGPT3.5和ChatGPT4.0版本。

    ChatGPT3 0版本是目前最先进的对话生成系统之一 已经在多个应用场景中得到了广泛应用 相较于以往的版本 ChatGPT3 0在模型规模和语言能力上都有了明显的提升 这一版本的模型包含了1 75万亿个参数 而且其生成的对话内容更加流畅
  • 性能优化点

    Arts and Sciences Computer Science myUSF 索引3层 高度为3 一般对于数据库地址千万级别的表 大于2000万的数据进行分库分表存储 JVM整体结构及内存模型 JVM调优 主要为减少FULL GC的执行
  • javascript下的protype

    了解下JavaScript中的prototype JS中的phototype是JS中比较难理解的一个部分 javascript的方法可以分为三类 类方法 对象方法 原型方法 例子 view sourceprint 01 function P
  • Vue3 从入门到放弃 (第二篇.创建第一个Web应用)

    上一篇讲到了 Vue3的一些前期准备和环境配置 Vue3 从入门到放弃 第一篇 环境准备 Meta Qing的博客 CSDN博客 今天我们来讲讲 项目结构以及各个文件介绍 并且创建我们第一个WEB应用 我们继续上一篇 创建完工程结构 目录介
  • DevOps 到底是什么到底是什么

    链接 https www zhihu com question 55874411 answer 608052871 DevOps 到底是什么 2018 年 我们走访了近百个分布在各行各业中的 IT 团队 意外的发现 大多数的 IT 团队寻求
  • React Native 环境搭建, 新建项目, 运行和调试

    React Native 可以理解为一个基于 JavaScript 具备动态配置能力 面向前端开发者的移动端开发框架 目前为止虽然一直还没有V1 0 0版本 但是相信很多小伙伴都了解过或者已经入坑了 为什么RN那么有人气呢 我们可以先简单分
  • 关于ScanNet数据集

    最近正在下载关于ScanNet的数据集 希望做一个深度的调查 以供自己学习 背景 作者是Angela Dai 是斯坦福大学的一名博士生 她最初的想法是 推动数据匮乏的机器学习算法的发展 特别是在 3D 数据上 Scannet数据采集框架 收
  • 神器CLIP为多模态领域带来了哪些革命?

    用日新月异来形容AI界的发展丝毫也不为过 Transformer大爆发 YOLOV7大杀四方 各种新SOTA仿佛随时都会冒出来 好像上一个新技术还没掌握 已经一脸懵的开始学习下一个新SOTA 科研er们不得不为了追逐最前沿技术在各个工作中疲
  • XMLParserException: XML Parser Error on line 11: 对实体 “characterEncoding“ 的引用必须以 ‘;‘ 分隔符结尾。解决方法

    今天使用mybatis逆向工程生成mysql数据库的代码时 报出了一个异常 org mybatis generator exception XMLParserException XML Parser Error on line 11 对实体
  • 将子域名连接到 Shopify 的步骤,也就是把不是www的域名链接到shopify商店,二级域名链接到shopify店铺

    将子域名连接到 Shopify 的步骤 1 Shopify 后台 首先 检查您的 Shopify 控制面板并验证您使用的是 Shopify 提供的免费域 也就是xxxxxxxxx myshopify com 这是至关重要的 因为它将帮助您在
  • 强化学习FJSP静态关于奖励函数的尝试

    动作设计 工序层面的规则现在主要考虑的是 加工最少的剩余工件 加工最多的剩余工件 还有那些 机器层面的规则 均匀规则 SPT LPT 还有那些 奖励 使用奖励函数为 减少动作空间的结果 说明动作空间需要取一个适当的值 太大不能收敛 太小不能
  • java中输入与输出的方法总结怎么写

    本文主要为大家总结了Java中输入输出的三种方法 并通过实例详细讲解了这些方法的使用方法 需要的朋友可以参考一下 目录 输入法 扫描仪 第一输入法 第二输入法 JOptionPane 第三输入法 io 控制台输出方法 第一个输出方法 Sys
  • 【Unity】自带的录屏插件Recorder

    目录 Recorder简介 Recorder导入 Recorder使用 Recorder简介 Recorder是Unity官方的录屏插件 可以直接录制Game窗口 还可以录制不同相机的视图 不仅可以直接生成视频 帧动画图 还可以制作gif和
  • 用c语言顺序表实现栈

    用c语言顺序表实现栈 栈 一种特殊的线性表 其只允许在固定的一端进行插入和删除元素操作 进行数据插入和删除操作的一端 称为栈顶 另一端称为栈底 栈中的数据元素遵守后进先出LIFO Last In First Out 的原则 压栈 栈的插入操
  • typescript 使用对象或数组的值或键创建联合类型

    前言 实际开发中我需要用到太多的键值对 并且有相当一部分情况下 键名是一个联合 而且还是某个数组的联合 然而早期 TS 对这样的联合实现并不是很理想 这几天又翻了翻 Stack Overflow 发现很多新答案 对此整理一下 后面的内容最主
  • MySQL必知必会 教材数据库的导入

    在折腾了两天以后 终于靠着网友的只言片语得悟了 必知必会里面有两个教材文档 都是 sql格式的 但网上给出的 成功 导入代码都是 CREATE DATABASE create USE create SOURCE 文档所在全路径 create
  • 模糊聚类在负荷实测建模中的应用(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 1 1 模糊聚类方法 1 2 模糊聚类分析步骤 2 运行结果 3 参考文献 4 Matlab代码实现 1
  • 2022年4月23日--2022年4月29日(osgEarth调试+UE4视频教程+ogreRenderSystem源码抄写,本周10小时,共1300小时,剩下8700小时)

    目前 UE4视频教程进行到了mysql 1 1 tf1 2 1 oss 4 2 多线程 1 1 蓝图反射 1 2 ogreRenderSystem的GL部分3965行 含注释 纯代码2459行 每天300行 计划14天完成 计划如下 周一
  • hexo博客文章置顶功能实现的两种方法

    写在前面 本文主要描述了如何实现hexo文章置顶功能 讲述了通过修改源码和通过更改插件两种方式实现 以及如何添加置顶显示 文章可能还有很多不足 请大家谅解 欢迎大佬提意见 本文使用的东西 win10电脑 hexo 4 0 0 文章目录 写在