点击查看更新记录
更新记录
2023-01-04:内测版
- 实现侧栏标签卡片存储卡样式
- 实现标签页面卡片存储卡样式
- 标签侧栏卡片新增跳转至标签页面按钮。
点击查看参考教程
参考方向 | 教程原贴 |
---|---|
参考了UI风格和配色样式 | 【G端】不想再做蓝蓝科技风了 黄/黑/橙配色 |
fontawesome图标文档 | fontawesome |
Flex布局参数解释 | Flex 布局教程:语法篇 - 阮一峰的网络日志 |
Transition属性实现平滑过渡动画 | CSS3实现伪类hover离开时平滑过渡效果示例 |
CSS伪类实现三角形绘制 | 纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园 |
使用clip-path实现多边形剪裁。 | 不可思议的CSS之clip-path |
站内教程:iconfont引入教程 | Hexo引入阿里矢量图标库 |
参考空梦的方案实现长文本轮回滚动 | 空梦——纯 CSS 实现超长文本轮回滚动 |
参考Eurkon的方案实现标签数量角标 | Eurkon—Butterfly 标签云增加文章数上下标 |
预览效果
点击查看预览效果
魔改步骤
- 新建
[Blogroot]\themes\butterfly\scripts\helpers\ark_tag.js
,这个的功能就是按照hexo给的tag数据集编译出我们需要的tag单元。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16hexo.extend.helper.register('arkTags', function (options = {}) {
const env = this
let source = options.source
const limit = options.limit
let result = ''
if (limit > 0) {
source = source.limit(limit)
}
source.forEach(tag => {
result += `<a class="ark-tags-box" href="${env.url_for(tag.path)}"><span class="ark-tags-name-box"><b class="ark-tags-name">${tag.name}</b></span><span class="ark-tags-length">${tag.length}</span></a>`
})
return result
}) - 新建
[Blogroot]\themes\butterfly\source\css\_layout\ark_tags.styl
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147//基本样式,保证侧栏和标签页风格一致
#aside-content .card-tags,
#page .tag-cloud-list
.card-tag-cloud
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
a.ark-tags-box
position: relative
z-index: 1
background: transparent
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
color: white;
font-family: 'UnidreamLED','TaikoMagic';
border-radius: 3px;
&::before
content: ""
z-index: 0
position: absolute;
top: 0;
left: 0;
display: block;
background: #172433;
border-radius: 3px;
&::after
content: "";
z-index: -1;
position: absolute;
display: block;
background: transparent;
border-color: #fd4000;
border-style: dotted solid solid none;
border-radius: 3px;
span.ark-tags-name-box
overflow hidden
z-index: 1
margin: 0 3px 0 0
b.ark-tags-name
float left
white-space nowrap
animation text-roll 4s cubic-bezier(.6, 0, .5, 1) alternate infinite
min-width 100%
span.ark-tags-length
z-index: 1
position: relative;
&::after
content: "";
position: absolute;
box-shadow: 0px 0px 0px 0.5px inset #232323;
//针对侧栏比例进行调整。整体偏小
#aside-content .card-tags
.card-tag-cloud
a.ark-tags-box
width: 80px;
height: 60px;
margin: 0 4px 4px 0;
padding: 0 10px 0 5px;
font-size: 12px;
&::before
width: 80px;
height: 60px;
clip-path: polygon(0px 6px,40px 6px,45px 0,100% 0,100% calc(50% - 12px),calc(100% - 5px) calc(50% - 10px),calc(100% - 5px) calc(50% + 10px),100% calc(50% + 12px),100% 100%,10px 100%,0 calc(100% - 10px))
box-shadow: 0px 0px 0px 3px inset #4a4f56;
&::after
top: 4px;
left: 2px;
width: 72px;
height: 41px;
border-width: 3px 5px 10px 0px;
span.ark-tags-name-box
width 4em
height 12px
b.ark-tags-name
line-height: 12px;
span.ark-tags-length
line-height: 12px;
&::after
width: 60px;
height: 3px;
right: 0px;
bottom: -10px;
background: linear-gradient(to right,#fd4000 20px,#fd4000,white 21px,white)
a.ark-tags-button
background: black;
width: 200px;
height: 30px;
display: flex;
font-size: 12px;
font-family: 'UnidreamLED','TaikoMagic';
text-align: center;
box-shadow: 0px 0px 0px 3px inset #4a4f56;
border-radius: 3px;
justify-content: center;
align-items: center;
//针对分类页面进行调整
#page .tag-cloud-list
.card-tag-cloud
a.ark-tags-box
width: 100px;
height: 70px;
margin: 0 4px 4px 4px
padding: 0 10px 0 5px;
font-size: 12px;
&::before
width: 100px;
height: 70px;
clip-path: polygon(0px 6px,40px 6px,45px 0,100% 0,100% calc(50% - 12px),calc(100% - 5px) calc(50% - 10px),calc(100% - 5px) calc(50% + 10px),100% calc(50% + 12px),100% 100%,10px 100%,0 calc(100% - 10px))
box-shadow: 0px 0px 0px 3px inset #4a4f56;
&::after
top: 4px;
left: 2px;
width: 92px;
height: 50px;
border-width: 3px 5px 10px 0px;
span.ark-tags-name-box
width 6em
height 14px
b.ark-tags-name
line-height: 12px;
span.ark-tags-length
line-height: 12px;
&::after
width: 80px;
height: 3px;
right: 0px;
bottom: -12px;
background: linear-gradient(to right,#fd4000 30px,#fd4000,white 31px,white)
//感谢空梦提供的过长文本轮回滚动方案
//https://kmar.top/posts/9db1c87c/
@keyframes text-roll
from
margin 0
to
margin-left 100%
transform translateX(-100%) - 修改
[Blogroot]\themes\butterfly\layout\includes\page\tags.pug
,1
2
3
4
5
6.tag-cloud-list.is-center
+ if theme.aside.card_tags.ark
+ .card-tag-cloud!= arkTags({source: site.tags, unit: 'em'})
+ else if theme.aside.card_tags.color
- if theme.aside.card_tags.color
!=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'}) - 修改
[Blogroot]\themes\butterfly\layout\includes\widget\card_tags.pug
,1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17if theme.aside.card_tags.enable
if site.tags.length
.card-widget.card-tags
.item-headline
i.fas.fa-tags
span= _p('aside.card_tags')
- let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
+ if theme.aside.card_tags.ark
+ .card-tag-cloud!= arkTags({source: site.tags, limit: tagLimit, unit: 'em'})
+ a.ark-tags-button(href=`/` + config.tag_dir + `/`)
+ span.ark-tags-more= _p('aside.card_tags_more')
+ else if theme.aside.card_tags.color
- if theme.aside.card_tags.color
.card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})
else
.card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'}) - 到主题配置项
[Blogroot]\_config.butterfly.yml
,找到侧栏卡片的配置项,新增配置项。为了侧栏显示效果,建议把limit配置项设置为18。:1
2
3
4
5
6card_tags:
enable: true
limit: 18 # if set 0 will show all
+ ark: true
color: false
sort_order: # Don't modify the setting unless you know how it works
Invitation
测试
created:14/10/2022
Welcome to Candyhome
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to 测试's candyhome,wish you a nice day .
评论