Hexo 博客文章置顶设置方法

设置文章置顶

1. 修改仓库,使其支持置顶功能

可以直接运行以下命令进行安装:

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

2. 在文章中添加置顶信息

在需要置顶的文章Front-matter中加上top: truetop: 10即可。

title: Hello World!
date: 2018-06-26 10:37:59
tags: 随笔
top: 10

top: 后的数字越大,表示置顶的权限越高。比如:你有10篇文章要置顶,可以依次排序。

设置置顶标志

打开:/blog/themes/next/layout/_macro/post.swig 文件,定位到<div class="post-meta"> 标签下,插入以下代码。

            {% if post.top %}
                <span class="post-meta-item-icon">
                    <i class="fa fa-thumb-tack"></i>
                </span>
                <font color="red">置顶</font>
                <span class="post-meta-divider">|</span>
            {% endif %}

添加效果如下图图所示:

注,一定要插入在<div class="post-meta"> 标签第一行下面。(即文章日期前面添加置顶图标。)

<font color="red"> 图标颜色可以根据需要输入英文(如: red),或颜色值(如: ff0000表示红色)。

最终效果

原文地址:https://www.cnblogs.com/zjcao/p/9275198.html

时间: 2024-10-09 20:26:56

Hexo 博客文章置顶设置方法的相关文章

PHPCMS实现文章置顶功能的方法

我个人喜欢把PHPCMS当作博客来用,而作为一个博客,怎能少了文章置顶功能呢?其中用PHPCMS实现置顶功能非常简单,无非是修改下推荐位的名称为置顶,然后在文章列表中推送需要置顶的文章罢了. 不过博客系统中置顶文章可不会与文章列表中的文章重复,要解决这个问题其实也不难,看代码: 复制代码代码如下:{pc:content action="lists" catid="1" num="20" where="posids!=1" or

Python爬取CSDN博客文章

之前解析出问题,刚刚看到,这次仔细审查了 0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.windows下环境搭建 3.java里连接redis数据库 4.关于认证 5.redis高级功能总结1.基础底层数据结构1.1.简单动态字符串SDS定义: ...47分钟前1 url :http://blog.csdn.net/youyou1543724847/

迈出第一步,Hexo博客搭建

很早之前看到别人的博客就总想着自己之后也要搭一个,最近突然来了干劲,就开始搭起了博客.不过搭博客还真是一个累活,失败了不下十次,用了好几天的时间,感觉自己在浪费时间,但是看到现在博客终于能用了,非常开心!这里将通过这篇文章来记录搭建过程. 环境及准备 windows.git.Node.js 一.Git1.1 安装git 链接 https://desktop.github.com/ 下载后一路默认安装就行了. 1.2 配置Git 当安装完Git应该做的第一件事情就是设置用户名称和邮件地址.这样做很

将hexo博客同时部署发布托管到github和coding

title: 将hexo博客同时部署发布托管到github和coding date: 2018-08-30 00:12:11 tags: - 博客 - git - coding - hexo - 博客优化 categories: 搭建博客 --- 前言 之前我们把hexo托管在github,但是毕竟github是国外的,访问速度上还是有点慢,所以想也部署一套在国内的托管平台,之前查资料听说gitcafe,但是听说gitcafe已经被coding收购了,所以就决定部署到coding. 查询了多方资

利用Travis IC实现Hexo博客自动化部署

1.Hexo博客的利与弊 Hexo中文 我就默认为看到这篇文章的人都比较了解Hexo博客,也都能够成功手动部署吧.所以第一部分推荐两篇文章一笔带过,让我们快速进入本文的重点内容.实在不知道也不要方先看一看下面推荐的这两篇文章. 手把手教你使用Hexo + Github Pages搭建个人独立博客--令狐葱 Hexo + github 打造个人博客--zdy0_2004 还有一个专栏: Hexo / 总共13篇--水寒 感谢以上文章原创作者的分享,推荐纯属自来水.看完这两篇文章后有没有觉得自己手里

Hexo博客maupassant主题添加Google Adsense广告

自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题,准备好好经营,但是更新博客的动力不足.新的一年开始,我终于决定引入 Google Adsense ,让自己的博客显得主流一点,如果能够顺便赚些零花钱当然更好了.本文默认读者已经注册了 Adsense 账号,下面仅仅分享一下具体的设置步骤,方便自己以后备查. 从 Adsense 中下载具体广告模块代

netlify和cloudflare与zeit搭配jsdelivr给Hexo博客cdn加速对比

netlify和cloudflare与zeit搭配jsdelivr给Hexo博客cdn加速对比同步滚动:关完整原文:https://hongwan.xyz/archives/ hexo默认github page,比较慢:目前大家使用的做法主要有coding,github 双部署,netlify,cloudflare,zeit和jsdelivr等方法:我主要选择zeit,速度快且可以让百度爬虫收录. 一.分类:zeit与netlify都属于copy一份你github的博客文件,然后在它给你的空间新

为Hexo博客添加评论模块

1. 登录多说网站http://duoshuo.com/,创建站点: 123 可以使用常用的社交账号进行登录,无需注册选择`我要安装`来创建一个站点录入基本的创建信息,点击`创建`按钮来创建一个站点 2. 修改主题配置文件: 我用的主题是freemind,主题地址https://github.com/wzpan/hexo-theme-freemind.git,修改主题的步骤请参考”修改Hexo博客主题”1.打开当前主题路径/_config.yml,找到duoshuo_shortname标签,设置

在Web微信应用中使用博客园RSS以及Quartz.NET实现博客文章内容的定期推送功能

本篇随笔介绍在Web微信应用中使用博客园RSS以及Quartz.NET实现博客文章内容的定期推送功能,首先对Quartz.NET进行一个简单的介绍和代码分析,掌握对作业调度的处理,然后对博客园RSS内容的处理如何获取,并结合微信消息的群发接口进行内容的发送,从而构建了一个在Web应用中利用作业调度来进行消息发送的业务模型. Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)