系列 · Butterfly 改造 Hexo

Butterfly文章卡片加上最新文章标志

在首页的文章卡片上加上最新文章的标志

2022年8月17日 1 分钟 585 字次浏览条评论更新于 2022年8月17日

前言

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

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

实现

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

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

.recent-post-info
+    if (numberone !== 1 && is_current('/') && (!article.top || (article.new && article.top)))
+        span.newPost 最新
+        - var numberone = 1

在你的自定义css文件中，添加如下代码：

/* 最新文章图标 */
.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就行了

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

---
title: aaaaaaaaaa
top: 1
+ new: true
---

评论