更新

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>';
}