前言

  昨天@Leonus大佬用js给首页最新的文章卡片加上了最新标志:几行代码实现最新文章标志 | Leonus
  不过每次切换到首页都要执行这个js,不然最新标志就不显示,开启了pjax之后,怎么让这js每次切换到首页都执行是个问题,而且每次都执行也会多吃一些性能

  因为butterfly是按创建时间顺序排序的,最上面的卡片就是最新文章,直接修改文章卡片源码,给第一个卡片加上最新标志就行了(当然还要排除手动置顶的文章)
  这样pug渲染成html时,最新标志就写死在那了


实现

我这实现看起来挺笨,有大佬有更好的实现方式不

  1. 修改\blog\themes\butterfly\layout\includes\mixins\post-ui.pug 加上三行:

    1
    2
    3
    4
    .recent-post-info
    + if (numberone !== 1 && is_current('/') && (!article.top || (article.new && article.top)))
    + span.newPost 最新
    + - var numberone = 1
  2. 在你的自定义css文件中,添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* 最新文章图标 */
    .newPost {
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, 0.92);
    padding: 0 15px;
    background-color: #49b0f5b9;
    border-radius: 0 0 10px 10px;
    right: 40px;
    }
    @media screen and (max-width:600px){
    .newPost {
    right: 0px;
    padding: 0 12px;
    border-radius: 0 10px 0px 10px;
    }
    }

使用

  当首页没有置顶时,会给第一个卡片加上最新标志
  当首页有置顶时,会给非置顶的第一个卡片加上最新标志

  显然,这里有bug,如果置顶里的文章就是最新的咋办?
  只需要在文章头部加上new: true就行了

  稍微有点麻烦,所以,建议最新的文章就没必要置顶了,反正不置顶也在第一个

1
2
3
4
5
---
title: aaaaaaaaaa
top: 1
+ new: true
---