Butterfly 主题添加最新文章/最近更新标签

原作者：轻笑

实现步骤

修改 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
mixin postUI(posts)
+  - let newTitle= newPost()
+  - let updateTitle= updatePost()
  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 newTitle == title
+        span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新文章
+      if updateTitle == title
+        span(class=`updatePost-${leftOrRight=='left'?'right':'left'}`) 最近更新

添加 helpers 函数

添加内容到 themes\butterfly\scripts\helpers\page.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 最新文章
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
})
hexo.extend.helper.register('updatePost', function() {
  let name, time=0;
  hexo.locals.get('posts').map((item, index) => {
      if (item.updated > time && item.updated > item.date) { name = item.title, time = item.updated}
  });
  return name
})

添加 CSS 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
#recent-posts>.recent-post-item {
    position: relative;
}

/* 最新文章图标 */
.newPost-left, .newPost-right {
    z-index: 1;
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, .92);
    padding: 0 15px;
    background-color: #49b0f5b9;
    border-radius: 0 0 10px 10px;
}

.newPost-left {
    left: 15px;
}

.newPost-right {
    right: 15px;
}
/* 最近更新图标 */
.updatePost-left, .updatePost-right {
    z-index: 1;
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, .92);
    padding: 0 15px;
    background-color: #25d8b1b9;
    border-radius: 0 0 10px 10px;
}

.updatePost-left {
    left: 15px;
}

.updatePost-right {
    right: 15px;
}

@media screen and(max-width: 600px) {
    #nav {
        padding: 0 15px 0 11px;
    }

    #nav #blog_name {
        margin-left: -6.5px !important;
    }

    .newPost-left, .newPost-right {
        padding: 0 12px;
    }

    .newPost-left {
        left: 0;
        border-radius: 10px 0 10px 0;
    }

    .newPost-right {
        right: 0;
        border-radius: 0 10px 0 10px;
    }

    .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
        padding: 0 5px 0 5px;
        margin-top: -7px;
    }

    .updatePost-left, .updatePost-right {
        padding: 0 12px;
    }

    .updatePost-left {
        left: 0;
        border-radius: 10px 0 10px 0;
    }

    .updatePost-right {
        right: 0;
        border-radius: 0 10px 0 10px;
    }
}

注意事项

  • 修改完成后请执行 hexo clean && hexo g -d 重新生成并部署
  • 如果标签位置显示异常，请检查主题配置中的 cover.position 设置
  • 移动端样式已适配，可根据实际需求调整间距和圆角

Butterfly 主题添加文章标签

原作者：byer’s Blog

实现步骤

修改 post-ui.pug

找到 themes\butterfly\layout\includes\mixins\post-ui.pug 文件，在文件的约 21 行的位置添加如下内容：

1
2
3
if article.cardtag
  .card-tag= article.cardtag  
if post_cover && theme.cover.index_enable

在文章 Front Matter 中添加 tag

打开你的文章，添加 cardtag 字段：

1
2
3
4
5
---
title: 你的文章标题
date: 2024-01-01
cardtag: 魔改
---

添加 CSS 样式

创建一个 css 文件，或者写入你自己的 css 中：

1
2
3
4
5
6
7
8
9
10
11
12
/* 文章标签*/
#recent-posts .recent-post-item .card-tag {
  left: 0;
  border-bottom-right-radius: 12px;
  position: absolute;
  top: 0;
  padding: 3px 8px;
  background: linear-gradient(90deg,#e5b085,#d48f16);
  color: #fff;
  font-size: .85em;
  z-index: 1;
}

注意事项

  • 修改完成后请执行 hexo clean && hexo g -d 重新生成并部署
  • cardtag 的内容可以自定义，支持任意文本
  • 如需修改标签样式，可调整 CSS 中的 background 渐变颜色或 padding 间距