文章最新图标

左.2023-05-212024-07-31

步骤

在...themes\butterfly\scripts\helpers\page.js文件下添加如下代码

// 最新文章
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
})

在..\themes\butterfly\layout\includes\mixins\post-ui.pug添加

mixin postUI(posts)
+ - let newTitle= newPost()
  each article , index in page.posts.data

            ·
            ·
            ·

      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'}`) 最新
        a.article-title(href=url_for(link) title=title)= title

最后在自定义的css文件中添加如下代码，并在主题中引入

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