效果预览

与本站首页的作者信息卡片同款

添加方法

替换[blogroot]\themes\butterfly\layout\includes\widget\card_author.pug中相应的内容

把

1
2
3
4
if theme.aside.card_author.enable
  .card-widget.card-info.text-center
    .avatar-img
      img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")

替换为

1
2
3
4
5
6
7
8
9
10
11
12
if theme.aside.card_author.enable
  .card-widget.card-info.text-center
    .card-info-avatar
      .avatar-img
        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
      .author-status-box
        .author-status
          img(src="https://imgbed.o0w0b.top/file/1767234183911_hoshino.png" 
              onerror="this.style.display='none';this.nextElementSibling.style.display='flex';")
          .emoji 🍀
          - const d = new Date()
          .text #{d.getFullYear()}-#{String(d.getMonth() + 1).padStart(2, '0')}-#{String(d.getDate()).padStart(2, '0')}

替换[blogroot]\themes\butterfly\source\css\_layout\aside.styl中相应的内容

把

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.avatar-img
  overflow: hidden
  margin: 0 auto
  width: 110px
  height: 110px
  border-radius: 70px

  img
    width: 100%
    height: 100%
    transition: filter 375ms ease-in .2s, transform .3s
    object-fit: cover

    &:hover
      transform: rotate(360deg)

替换为

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
.avatar-img
  overflow: hidden
  margin: 0 auto
  width: 110px
  height: 110px
  border-radius: 70px

  img
    width: 100%
    height: 100%
    transition: filter 375ms ease-in .2s, transform .3s
    object-fit: cover

    &:hover
      transform: rotate(360deg)

.card-info-avatar
  display inline-block
  position relative

  .avatar-img
    border 1px solid #d0d7de

  .author-status-box
    position: absolute
    bottom: 0
    left: calc(100% - 28px)
    width: 28px
    height: 28px
    border: 1px solid #d0d7de
    border-radius: 2em
    background-color: #f8f8f8f8
    transition: 0.4s

    .author-status
      display: flex
      align-items: center
      justify-content: flex-start
      height: 28px
      padding: 0 5px

      img
        width: 18px
        height: 18px
        padding: 0 2px 2px 0

      .emoji
        display: none
        padding-bottom: 6px
      .text
        width: 28px
        font-size: 0.85em
        height: 100%
        overflow: hidden
        padding-left: 2px
        text-overflow: ellipsis
        white-space: nowrap
        text-align: left
        transition: 0.4s

    &:hover
      width: 94px
      .author-status .text
        width: 94px

[data-theme="dark"]
  .card-info-avatar
    .avatar-img
      border: 1px solid #5c6060
    .author-status-box
      background-color: #222222f2
      border: 1px solid #5c6060