前言

在这，我说一下，这个我是根据leonus的教程走的，有需要的小伙伴也可以去看他的，写得挺不错的，当然可以直接看我的，亲测最新版也可以搭建得上。魔改提纲如下：

1.修改[Blogroot]\themes\butterfly\scripts\helpers\page.js这个文件

2.修改[Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug

3.添加自定义的css

整体改动不是很多，有时间的小伙伴都可以试试，挺方便的。

教程

1.打开[Blogroot]\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
})

2.打开[Blogroot]\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'}`) 最新

添加完之后是这个样子，仔细对一对，缩进别弄错了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)
            if article.cover_type === 'img'
              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            else
              div.post-bg(style=`background: ${post_cover}`)
      .recent-post-info(class=no_cover)
        if newTitle == title
          span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新

3.添加自定义css

在自己的自定义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;
}

大功告成，可以三件套然后看看你的最新标志！！！！