在关于页添加属于你的个性小标签

在 2023.08.31 的 commit 中，主题已支持该功能，但配置方式与本文有差异，请留意

注意，该内容需修改主题文件，本文操作步骤为anzhiyu主题

样式预览

样式预览
关于页个性标签
introduction
introduction
Kouseki
在关于页头像处添加悬浮个性标签
前往

预览页面：点击访问

操作步骤

1、修改文件

  • 在\themes\anzhiyu\layout\includes\page\about.pug中修改新增以下7至16行内容
  • 严格注意缩进，可以参考上下内容对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
-
    #about-page
      .author-box
        .author-img
          img.no-lightbox(src=url_for(avatarImg) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
        .image-dot
        .author-tag-left
          span.author-tag 🤖️ 数码爱好者
          span.author-tag 🔍 不解决不放弃
          span.author-tag 🏠 智能家居小能手
          span.author-tag 🔨 开发小萌新
        .author-tag-right
          span.author-tag 折腾劲 MAX 🤝
          span.author-tag 脚踏实地行动派 🏃
          span.author-tag 践踏各种困难 🧱
          span.author-tag 话多人不狠 💢
      p.p.center.logo.large 关于我
      p.p.center.small=subtitle
-
  • 文案内容自行修改，图标是emoji，自由发挥

2、新增css内容

  • 标签已经有了，现在缺少css内容装饰它
  • 新建文件source/css/about-tag.css或在已引入的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
@keyframes floating {
0% {
    transform: translate(0, -4px);
}
50% {
    transform: translate(0, 4px);
}
100% {
    transform: translate(0, -4px);
}
}

#about-page .author-box {
display: flex;
flex-direction: column;
align-items: center;
height: 185px;
}

#about-page .author-tag-left {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 355px; /* 设置标签与头像之间的水平间距 */
position: absolute;
top: 15px;
}

#about-page .author-tag-right {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 355px; /* 设置标签与头像之间的水平间距 */
position: absolute;
top: 15px;
}
/* 移动端隐藏 */
@media screen and (max-width: 768px) {
#about-page .author-tag-left, #about-page .author-tag-right {
    display: none;
}
}

#about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
margin-right: -16px;
}

#about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
margin-left: -16px;
}

#about-page .author-tag {
transform: translate(0, -4px);
padding: 1px 8px;
background: #fff;
border: 1px solid #e3e8f7;
border-radius: 40px;
margin-top: 6px;
font-size: 14px;
font-weight: bold;
box-shadow: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
animation: 4s ease-in-out 0s infinite normal none running floating;
}
/* 适配深色模式 */
[data-theme="dark"] #about-page .author-tag {
background: #1e1e1e;
}
#about-page .author-tag:nth-child(1) {
animation-delay: 0s;
}

#about-page .author-tag:nth-child(2) {
animation-delay: 0.6s;
}

#about-page .author-tag:nth-child(3) {
animation-delay: 1.2s;
}

#about-page .author-tag:nth-child(4) {
animation-delay: 1.8s;
}

3、引入css

  • 在_config.anzhiyu.yml主题配置文件下inject配置项中head处
  • 引入about-tag.css文件
1
2
3
4
5

inject:
  head:
    - <link rel="stylesheet" href="/css/about-tag.css"> # 关于页悬浮小标签

4、大功告成

可以执行hexo三连查看效果啦！

5、参考

设计来源：张洪Heo
代码参考：hexo-theme-acrylic-next