点击查看更新记录

更新记录

2023-01-04:内测版

  1. 实现侧栏标签卡片存储卡样式
  2. 实现标签页面卡片存储卡样式
  3. 标签侧栏卡片新增跳转至标签页面按钮。
点击查看参考教程
参考方向教程原贴
参考了UI风格和配色样式【G端】不想再做蓝蓝科技风了 黄/黑/橙配色
fontawesome图标文档fontawesome
Flex布局参数解释Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画CSS3实现伪类hover离开时平滑过渡效果示例
CSS伪类实现三角形绘制纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园
使用clip-path实现多边形剪裁。不可思议的CSS之clip-path
站内教程:iconfont引入教程Hexo引入阿里矢量图标库
参考空梦的方案实现长文本轮回滚动空梦——纯 CSS 实现超长文本轮回滚动
参考Eurkon的方案实现标签数量角标Eurkon—Butterfly 标签云增加文章数上下标

预览效果

点击查看预览效果

标签页预览
侧栏标签预览

魔改步骤

  1. 新建[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
    16
    hexo.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
    })
  2. 新建[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%)
  3. 修改[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'})
  4. 修改[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
    17
      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.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'})
  5. 到主题配置项[Blogroot]\_config.butterfly.yml,找到侧栏卡片的配置项,新增配置项。为了侧栏显示效果,建议把limit配置项设置为18。:
    1
    2
    3
    4
    5
    6
      card_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