美文网首页开发者的博客天堂
【真香】hexo-theme-hiero增加文章置顶功能

【真香】hexo-theme-hiero增加文章置顶功能

作者: KangSmit的算法那些事儿 | 来源:发表于2020-07-05 22:02 被阅读0次

一、单个博文置顶

一种方法是手动对相关文件进行修改,具体可参考这篇文章。

另一种方法就是,目前已经有修改后支持置顶的仓库,可以直接用以下命令安装。

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

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章:

title: 核心解密Python函数在(类与函数之间)和(类与类之间)互相调用
categories: 编程小技巧
comments: true
top: true
date: 2020-07-01
photos: 
  - "https://img.haomeiwen.com/i15863171/730c308d8c2138a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/928/format/webp.jpg"

到目前为止,置顶功能已经可以实现了。所有相关博文到这边就结束了。
如果没有该文件,可以新建一个:


image.png

不过置顶的文章显示在最上面之后,如果没有明确的置顶标志,是不是感觉有点怪怪的呢?

设置置顶标志
打开:/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 %}

效果展示:


image.png

添加"置顶"一次之后:

二、多个Hexo博文按顺序置顶

使用的是top属性,top值越高,排序越在前,不设置top值得博文按照时间顺序排序。
修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js

打开在最后添加如下javascript代码

//按照置顶的顺序
  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标签,最新的文章在前面
});

如下所示:


image.png

在写文章的时候添加top属性就行了。

文章有多种属性,一个一个添加是不是很麻烦呢?

这个时候可以修改:HEXO博客的scaffolds\post.md

附上个人的post设置

下面我们来看看效果:top: 1 和top: 2


image.png image.png

部署到博客的结果如下:


image.png

相关文章

  • 【真香】hexo-theme-hiero增加文章置顶功能

    一、单个博文置顶 一种方法是手动对相关文件进行修改,具体可参考这篇文章。 另一种方法就是,目前已经有修改后支持置顶...

  • 简书,你是否可以增加置顶功能!同感共顶丫!

    你是否可以增加置顶功能? 你应该增加文章置顶功能! 以下为我给出的若干理由: 同类内容平台通常都有置顶功能头条设置...

  • JesseYang的个人博客小程序需求列表

    分类功能及分类视图 首页轮播图优化,增加文章时间显示 文章置顶、排序功能 管理后台图片上传 全屏抽屉‘关于我’界面...

  • 纯银简书文章整理

    无标题笔记:博客作者去向无标题笔记:评论功能无标题文章:微博置顶功能无标题文章:微博置顶、用户分组功能无标题文章:...

  • 文章的置顶功能

    文 艾米在渔村 看到一些简友的文章里,都设置了文章的置顶功能,很是羡慕,初开始,还傻傻地以为简书会自动帮你设置置...

  • hexo实现文章置顶功能

    想将写好的一些文章置顶,但是hexo好像默认不提供这个功能,希望以后的版本会有。这里简单写一下实现hexo文章置顶...

  • 如何置顶多篇文章

    简述中只有置顶一篇文章的功能,那么怎么置顶多篇文章呢?首先在我的文章,选中要制定的文章,然后再删除,再置顶一篇文章...

  • 微信新版本的文章置顶功能对安卓机来说就是渣渣

    近日,微信更新6.5.4版本,新增了文章置顶功能。通过文章置顶,可以查看最新的消息,然后快速回到文章界面。 非常便...

  • Hexo博客添加文章置顶功能

    原来用的WordPress,直接很方便地管理置顶文章,Hexo只提供了按发布日期的排序,只好网上找了些资料修改。 ...

  • 新增Hexo博客文章置顶功能

    博主博客地址 修改Hexo文件夹下的node_modules/hexo-generator-index/lib/g...

网友评论

    本文标题:【真香】hexo-theme-hiero增加文章置顶功能

    本文链接:https://www.haomeiwen.com/subject/mqebqktx.html