点击查看更新记录

更新记录

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