点击查看更新记录
更新记录
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]themesbutterflyscriptshelperscyber_tag.js,这个的功能就是按照hexo给的tag数据集编译出我们需要的tag单元。
hexo.extend.helper.register('cyberTags', 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="cyber-tags-box" href="${env.url_for(tag.path)}"><span class="cyber-tags-name-box"><b class="cyber-tags-name">${tag.name}</b></span><span class="cyber-tags-length">${tag.length}</span></a>`
})
return result
})新建[Blogroot]themesbutterflysourcecss_layourcyber_tags.styl
//基本样式，保证侧栏和标签页风格一致
#aside-content .card-tags,
#page .tag-cloud-list
.card-tag-cloud
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
a.cyber-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.cyber-tags-name-box
overflow hidden
z-index: 1
margin: 0 3px 0 0
b.cyber-tags-name
float left
white-space nowrap
animation text-roll 4s cubic-bezier(.6, 0, .5, 1) alternate infinite
min-width 100%
span.cyber-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.cyber-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.cyber-tags-name-box
width 4em
height 12px
b.cyber-tags-name
line-height: 12px;
span.cyber-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.cyber-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.cyber-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.cyber-tags-name-box
width 6em
height 14px
b.cyber-tags-name
line-height: 12px;
span.cyber-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]themesbutterflylayoutincludespagetags.pug,
.tag-cloud-list.is-center
if theme.aside.card_tags.cyber
.card-tag-cloud!= cyberTags({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]themesbutterflylayoutincludeswidgetcard_tags.pug,
if 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.cyber
.card-tag-cloud!= cyberTags({source: site.tags, limit: tagLimit, unit: 'em'})
a.cyber-tags-button(href=`/` config.tag_dir `/`)
span.cyber-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。：
card_tags:
enable: true
limit: 18 # if set 0 will show all
cyber: true
color: false
sort_order: # Don't modify the setting unless you know how it works
