更新

9/16: 随着魔改越来越熟练，找到了一个完美的解决方案。

新版本

原理：通过hexo的api获取所有文章，然后比较时间得到最新文章的名字，返回给pug文件比较并添加元素。

修改page.js

首先我们需要在 themes\butterfly\scripts\helpers\page.js 内加入一段内容（位置任意，别放在其他函数里面即可）

1
2
3
4
5
6
7
8
9
// 最新文章
hexo.extend.helper.register('newPost', function() {
    let name, time;
    hexo.locals.get('posts').map((item, index) => {
        if (index == 0) name = item.title, time = item.date
        else if (item.date > time) { name = item.title, time = item.date }
    });
    return name
})

修改post-ui.pug

然后在 themes\butterfly\layout\includes\mixins\post-ui.pug 添加如下代码(带颜色的是需要添加的代码，注意去掉最前面的加号，去掉之后不需要补空格)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mixin postUI(posts)
+  - let newTitle= newPost()
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
      .recent-post-info(class=no_cover)
+        if newTitle == title
+          span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新

css部分

如果你没有自定义css文件，请先查看此文章：Hexo博客添加自定义css和js文件
在你的自定义css文件中，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#recent-posts>.recent-post-item {
    position: relative;
}

/* 最新文章图标 */
.newPost-left,
.newPost-right {
    position: absolute;
    top: 0;
    color: white;
    padding: 0 15px;
    background-color: #49b1f5;
    border-radius: 0 0 10px 10px;
}

.newPost-left {
    left: 15px;
}

.newPost-right {
    right: 15px;
}

旧版本

旧版本

js部分

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 确保其他页面（如第二页）第一篇文章不添加
if (location.pathname == '/') newPost();

// 最新文章函数
function newPost() {
    // 获取所有文章信息
    let ls = document.querySelectorAll('.recent-post-info')
    // 先让时间和索引值都等于第第一篇文章的
    let time = new Date(ls[0].querySelector('.post-meta-date-created').getAttribute('datetime')).getTime();
    let index = 0
    // 遍历数组，如果有时间比time大（更新的文章）则替换
    ls.forEach((i, num) => {
        let t = new Date(i.querySelector('.post-meta-date-created').getAttribute('datetime')).getTime()
        if (t > time) {
            time = t;
            index = num
        }
    })
    // 单数在右，双数在左
    let className = index % 2 == 0 ? 'newPost-right' : 'newPost-left'
    ls[index].innerHTML += '<span class="' + className + '">最 新</span>';
    // 如果你不想让其一左一右，可以注释上面的启用下面的，默认左，left改成right就是右
    // ls[index].innerHTML += '<span class="newPost-left">最 新</span>';
}