点击查看更新记录

更新记录

2021-02-02:内测版v0.27

  1. 实现SAO UI 风格的排行榜
  2. 血条自动计算。
  3. 血条颜色根据血量进行调整。
  4. 支持自定义用户名和血量,等级等属性。
  5. 可以用作打赏榜单或者友链排行。
  6. 读者可以通过更改ID来实现排行榜复用,实现多个榜单。
  7. 建议配合SAO-Utils-Web 2.0一起使用。

2021-02-03:内测版v0.39

  1. 更改配置项,配合等级设定,使用基本血量和升级梯度计算最大血量
  2. 新增方案,初版方案,血量百分比自定义,悬停提示语自定义
  3. 新增方案,打赏方案,填写等级和打赏金额,自动计算血量。悬停提示语默认使用感谢**打赏¥**字样。
  4. 更改打赏二维码分辨率。修复扫一扫无效的bug。
点击查看参考教程
参考方向教程原贴
UI风格参考,图标、音效资源采集SAO Utils
图标采集fontawesome
原生js实现拖拽效果js拖拽:简单五步实现元素拖拽功能

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

写在最前

店长的碎碎念

2021年2月2日 星期二 晴转多云

今天是我的生日哒!

把SAO Utils Web也归入了 SAO UI PLAN ,复现SAO 风格界面算是告一段落啦。

这个榜单一开始是准备拿来当做打赏榜单的。可是临到头却发现没人打赏。(疯狂暗示)所以就只能拿来充当友链排行啦。

教程正文

初版方案需要自定义各种内容,例如等级和血量百分比,悬停提示语。相对的你可以把它当成任何榜单,例如友链排行、打赏榜单、龙王榜单。

  1. 新建[Blogroot]\themes\butterfly\layout\includes\SAO-ranklist.pug:
    #SAO-ranklist
    .ranklist-title= theme.SAO_ranklist.title
    .ranklist-main
    .master-item
    .master-rank
    i.fa.fa-plus(onclick='panelAudio();hideRanklist()')
    .master-user
    a(alt='' href=url_for(theme.SAO_ranklist.master.link) data-title=theme.SAO_ranklist.master.title)= theme.SAO_ranklist.master.name
    if !(theme.SAO_ranklist.master.title)
    .rank-reward
    if theme.reward.enable
    each QR_code in theme.reward.QR_code
    .reward-img
    img(alt='' src=url_for(QR_code.img))
    a.reward-text(alt='' href=url_for(QR_code.link))= QR_code.text
    .master-data
    .master-HP
    - var hpmasterMAX = (Number(theme.SAO_ranklist.master.LV) * Number(theme.SAO_ranklist.stepLV) + Number(theme.SAO_ranklist.baseHP))
    - var hpmasterNow = Math.round((Number(hpmasterMAX) * Number(theme.SAO_ranklist.master.HP) / 100))
    - var hpmasterFill = theme.SAO_ranklist.master.HP + '%'
    .HP-fill(style=`width:`+ hpmasterFill )
    .HP-fill-in
    span= hpmasterFill
    .master-level
    span= hpmasterNow
    span |
    span= hpmasterMAX
    span= `lv.`+ theme.SAO_ranklist.master.LV
    if theme.SAO_ranklist.partner
    each partner in theme.SAO_ranklist.partner
    .partner-item
    .partner-rank
    .partner-user
    a(alt='' href=url_for(partner.link) data-title=partner.title)= partner.name
    .partner-data
    .partner-HP
    - var hpMAX = (Number(partner.LV) * Number(theme.SAO_ranklist.stepLV) + Number(theme.SAO_ranklist.baseHP))
    - var hpNow = Math.round((Number(hpMAX) * Number(partner.HP) / 100))
    - var hpFill = partner.HP + '%'
    .HP-fill(style=`width:`+ hpFill)
    .HP-fill-in
    span= hpFill
    .partner-level
    span= hpNow
    span |
    span= hpMAX
    span= `lv.`+ partner.LV

    script(async src= url_for(theme.CDN.SAO_ranklist))
  2. 新建[Blogroot]\themes\butterfly\source\css\_layout\SAO_ranklist.styl,
    if hexo-config('SAO_ranklist.enable')
    @font-face
    font-family 'SAOUI'
    src url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.5.1_6/assets/SAOUI.ttf')
    font-display swap
    #SAO-ranklist
    z-index 9999
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    left calc(50% - 250px)
    top calc(50% - 200px)
    height auto
    width 500px
    background rgba(46, 40, 28,0.5)
    display none
    position fixed
    border-top-left-radius 20px
    border-bottom-right-radius 20px
    overflow hidden
    border 2px solid rgba(255,255,255,0.5)

    .ranklist-title
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.8)
    height 30px
    width 100%
    background transparent
    color white
    display block
    text-align center
    margin-bottom 15px
    &::after
    content ""
    height 2px
    width 90%
    margin-left 5%
    background #fff
    display block

    .ranklist-main
    height auto
    background transparent
    max-height 500px
    overflow scroll
    &::-webkit-scrollbar
    display: none

    .master-item
    height 40px
    width 90%
    margin-inline 5%
    margin-top 5px
    margin-bottom 0
    background transparent
    display inline-block
    float left
    padding 0
    i
    &:hover
    transform rotateZ(45deg)

    .master-rank
    float left
    display inline-block
    height 100%
    width 22PX
    background transparent
    border-top 11px solid rgba(240, 240, 240, 0.7)
    border-right 10px solid rgba(240, 240, 240, 0.7)
    border-bottom 11px solid rgba(240, 240, 240, 0.7)
    margin-right 3px
    i
    color black
    float left
    display inline-block
    width 16px
    height 16px
    text-align center
    border-radius 2px
    left -6px
    top 0.5px
    position relative
    padding 1px
    font-size 14px
    background rgba(255, 255, 255, 0.9)

    .master-user
    color white
    display inline-block
    height 40px
    width 50px
    background rgba(240, 240, 240, 0.7)
    text-align center
    float left
    padding-top 2.5px
    padding 3px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.7)
    .rank-reward
    position: fixed
    display: none
    top: 0
    margin auto
    left 0
    right 0
    font-weight bolder
    width fit-content
    padding 5px
    height auto
    background #464366
    border-radius 5px
    font-size 20px
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    box-shadow 3px 2px 14px #464340
    .reward-img
    width: 150px;
    height: auto;
    display: inline-block
    padding: 5px
    img
    display: block
    a
    display: block
    color #ee7cf0
    a
    color white
    if hexo-config('SAO_ranklist.master.title')
    &::before
    position: fixed
    display: none
    top: 10%
    content: attr(data-title)
    margin auto
    left 0
    right 0
    font-weight bolder
    color #ee7cf0
    text-shadow 2px 2px 5px
    width fit-content
    padding 10px 50px
    height 50px
    background #464366
    border-radius 25px
    font-size 20px
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    box-shadow 3px 2px 14px #464340
    &:hover
    color #1E9600
    &::after
    content ""
    display block
    width 0
    height 0
    position relative
    top -35px
    left 47px
    border-width 37.5px 22px 0px 0px
    border-style solid solid none
    border-color rgba(240, 240, 240, 0.7) transparent transparent
    &:hover
    .rank-reward
    display: block
    if hexo-config('SAO_ranklist.master.title')
    a
    &::before
    display: block
    color #ee7cf0
    .master-data
    float left
    display inline-block
    height 40px
    width 80%
    margin-left 10px
    background rgba(240, 240, 240, 0.7)
    transform skewX(-30deg)

    .master-level
    display block
    position relative
    float right
    text-align center
    top -20px
    width 33%
    height 30px
    font-size 14px
    left 0
    color white
    background rgba(200, 200, 200, 0.9)
    border-radius 3px
    border 3px solid rgba(80,80,80,0.3)
    span
    margin-inline 2px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.8)

    .master-HP
    height 25px
    width 95%
    float left
    margin auto
    background transparent
    margin-top 6px
    box-shadow 2px 2px 10px #fff
    border 1px solid rgba(255,255,255,0.5)
    overflow hidden
    margin-left 2px
    &:hover
    .HP-fill-in
    span
    display block


    .partner-item
    height 40px
    width 90%
    margin-inline 5%
    margin-top 5px
    margin-bottom 0
    background transparent
    display inline-block
    float left
    padding 0
    &:last-child
    margin-bottom 25px
    &:hover
    margin-top 15px
    .partner-user
    &::after
    display block
    .partner-data
    height 40px
    width 80%
    margin-left 10px
    background rgba(220, 220, 220, 0.7)
    transform skewX(-30deg)
    .partner-level
    display block
    .partner-HP
    height 25px
    width 95%
    margin-top 6px
    transform none
    margin-left 2px
    &:hover
    .HP-fill-in
    span
    display block

    .partner-rank
    float left
    display inline-block
    height 100%
    width 22PX
    background transparent
    border-top 11px solid rgba(220, 220, 220, 0.7)
    border-right 10px solid rgba(220, 220, 220, 0.7)
    border-bottom 11px solid rgba(220, 220, 220, 0.7)
    margin-right 3px

    .partner-user
    color white
    display inline-block
    height 40px
    width 50px
    background rgba(220, 220, 220, 0.7)
    text-align center
    float left
    padding-top 2.5px
    padding 3px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.3)
    a
    color white
    &::before
    position: fixed
    display: none
    top: 10%
    content: attr(data-title)
    margin auto
    left 0
    right 0
    font-weight bolder
    color #ee7cf0
    text-shadow 2px 2px 5px
    width fit-content
    padding 10px 50px
    height 50px
    background #464366
    border-radius 25px
    font-size 20px
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    box-shadow 3px 2px 14px #464340
    &:hover
    color #1E9600
    &:hover
    a
    &::before
    display: block
    color #ee7cf0
    &::after
    content ""
    display none
    width 0
    height 0
    position relative
    top -35px
    left 47px
    border-width 37.5px 22px 0px 0px
    border-style solid solid none
    border-color rgba(220, 220, 220, 0.7) transparent transparent

    .partner-data
    float left
    display inline-block
    height 40px
    width 50%
    background rgba(220, 220, 220, 0.7)

    .partner-HP
    height 15px
    width 90%
    float left
    margin auto
    background transparent
    margin-top 12.5px
    box-shadow 1px 1px 5px #fff
    border 1px solid rgba(255,255,255,0.5)
    overflow hidden
    transform skewX(-30deg)
    margin-left 10px

    .HP-fill
    height 100%
    width 90%
    float left
    background transparent
    border-left 2px solid rgba(80,80,80,0.3)
    border-top 2px solid rgba(80,80,80,0.3)
    border-bottom 2px solid rgba(80,80,80,0.3)
    border-right 5px solid rgba(255,255,255,0.3)

    .HP-fill-in
    height 100%
    width 100%
    float left
    text-align center
    span
    display none
    position relative
    color white
    font-size 16px
    top -5px

    .partner-level
    display none
    position relative
    float right
    text-align center
    top -20px
    width 33%
    height 30px
    font-size 14px
    left 0
    color white
    background rgba(200, 200, 200, 0.9)
    border-radius 3px
    border 3px solid rgba(80,80,80,0.3)
    span
    margin-inline 2px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.8)

    .HP-health
    background #1E9600
    background -webkit-linear-gradient(to right, #FF0000,#ffa800, #FFF200, #1E9600)
    background linear-gradient(to right, #FF0000,#ffa800, #FFF200, #1E9600)

    .HP-warning
    background #ffa800
    background -webkit-linear-gradient(to right, #ffa800, #FFF200)
    background linear-gradient(to right,#ffa800, #FFF200)

    .HP-danger
    background #ffa800
    background -webkit-linear-gradient(to right, #FF0000, #ffa800)
    background linear-gradient(to right, #FF0000, #ffa800)

    .active-SAO-ranklist
    display block!important
    .HP-fill-in
    animation HPfill 1s linear alternate


    @keyframes HPfill
    from
    width 0
    to
    width 100%
  3. 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,引入排行榜单网页元素,注意butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}:
      if theme.pjax.enable
    !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})

    !=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})

    + if theme.SAO_ranklist.enable
    + !=partial('includes/SAO-ranklist', {}, {cache:theme.fragment_cache})
  4. 新建[Blogroot]\themes\butterfly\source\js\SAO_ranklist.js,控制显隐逻辑:
    // 显示排行榜
    function showRanklist() {
    var hasRanklist = document.getElementById('SAO-ranklist');
    hpFill();
    if (hasRanklist) {
    hasRanklist.classList.add("active-SAO-ranklist");
    }
    }
    //隐藏排行榜
    function hideRanklist() {
    var hasRanklist = document.getElementById('SAO-ranklist');
    if (hasRanklist && (hasRanklist.className.indexOf('active') > -1)) {
    hasRanklist.classList.remove("active-SAO-ranklist");
    }
    }
    //根据血量调整血条颜色
    function hpFill(){
    var rankItem = document.getElementById('SAO-ranklist').querySelectorAll('.HP-fill');
    for (var i=0; i < rankItem.length; i++){
    var itemWidth = Number(rankItem[i].style.width.replace("%",""));
    // console.log(itemWidth);
    if (itemWidth < 30){
    rankItem[i].querySelector('.HP-fill-in').classList.add('HP-danger');
    }
    else if ((itemWidth >= 30) && (itemWidth < 60)){
    rankItem[i].querySelector('.HP-fill-in').classList.add('HP-warning');
    }
    else{
    rankItem[i].querySelector('.HP-fill-in').classList.add('HP-health');
    }
    }
    }
  5. 修改[Blogroot]\_config.butterfly.yml,添加CDN配置项和菜单选项:
    • CDN配置项:
        CDN:
      # main
      main_css: /css/index.css
      jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      + # SAO_ranklist
      + SAO_ranklist: /js/SAO_ranklist.js
    • SAO_ranklist菜单配置项示例:
      #SAO UI 风格排行榜
      SAO_ranklist:
      enable: true #总开关
      title: Rank list #排行榜名称
      baseHP: 200 #0级基础血量
      stepLV: 50 #每级增加的血量
      master:
      name: Akilar #榜首用户名
      link: https://akilar.top/ #点击用户名跳转链接,可留空
      title: 欢迎光临糖果屋 # 悬停用户名显示提示。留空则显示打赏二维码。
      HP: 97 #血量百分比,不用加百分号
      LV: 23 #等级
      partner:
      - name: VanXNF #用户名
      link: https://blog.vanxnf.top/ #点击用户名跳转链接,可留空
      title: 日记里的楠皮哦 # 悬停用户名显示提示
      HP: 92 #血量百分比,不用加百分号
      LV: 54 #等级
      - name: Zfe
      link: https://zfe.space/
      title: 做个有梦想的人
      HP: 5
      LV: 27
      - name: Heo
      link: https://blog.zhheo.com/
      title: 爱折腾的设计师
      HP: 63
      LV: 33
      - name: Nescx
      link: https://www.nesxc.com/
      title: 青石落晚巷 故人未还乡
      HP: 78.1
      LV: 11
  6. 调用榜单:榜单使用showRanklist()方法调用,可以加装在任何元素上,使用onclick='showRanklist()'触发点击调用。此处提供加装到侧栏按钮的方案。修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug,
        else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size
    button#rightside_config(type="button" title=_p("rightside.setting"))
    i.fas.fa-cog.fa-spin.faa-pulse.animated-hover
    + if theme.SAO_ranklist.enable
    + button#ranklist_show(type="button" title="打赏榜按钮" onclick="panelAudio();showRanklist()")
    i.fas.fa-fire-alt
    if theme.chat_btn
    button#chat_btn(type="button" title=_p("rightside.chat_btn"))
    i.fas.fa-sms.faa-pulse.animated-hover

虽然初版榜单也可以通过信息调整充当打赏榜单的功能,但是相对的信息表达上不是特别明晰。打赏榜方案做了一些细节上的优化,必要信息为打赏金额和打赏人名称以及等级。通过公式计算最大血量和血量百分比。最终效果是等级乘以血量百分比为打赏金额。悬停提示默认为感谢***打赏的¥**。相对初版方案,只需要修改SAO-ranklist.pug和配置文件中的配置项即可。

  1. 新建[Blogroot]\themes\butterfly\layout\includes\SAO-ranklist.pug:
    #SAO-ranklist
    .ranklist-title= theme.SAO_ranklist.title
    .ranklist-main
    .master-item
    .master-rank
    i.fa.fa-plus(onclick='panelAudio();hideRanklist()')
    .master-user
    a(alt='' href=url_for(theme.SAO_ranklist.master.link) data-title=theme.SAO_ranklist.master.title)= theme.SAO_ranklist.master.name
    if !(theme.SAO_ranklist.master.title)
    .rank-reward
    if theme.reward.enable
    each QR_code in theme.reward.QR_code
    .reward-img
    img(alt='' src=url_for(QR_code.img))
    a.reward-text(alt='' href=url_for(QR_code.link))= QR_code.text
    .master-data
    .master-HP
    - var hpmasterMAX = (Number(theme.SAO_ranklist.master.LV) * Number(theme.SAO_ranklist.stepLV) + Number(theme.SAO_ranklist.baseHP))
    - var hpmasterNow = Math.round((Number(hpmasterMAX) * Number(theme.SAO_ranklist.master.HP) / 100))
    - var hpmasterFill = theme.SAO_ranklist.master.HP + '%'
    .HP-fill(style=`width:`+ hpmasterFill )
    .HP-fill-in
    span= hpmasterFill
    .master-level
    span= hpmasterNow
    span |
    span= hpmasterMAX
    span= `lv.`+ theme.SAO_ranklist.master.LV
    if theme.SAO_ranklist.partner
    each partner in theme.SAO_ranklist.partner
    .partner-item
    .partner-rank
    .partner-user
    - var rewardTitle = '感谢' + partner.name + '打赏的¥' + partner.reward
    a(alt='' href=url_for(partner.link) data-title=rewardTitle)= partner.name
    .partner-data
    .partner-HP
    - var hpMAX = (Number(partner.LV) * Number(theme.SAO_ranklist.stepLV) + Number(theme.SAO_ranklist.baseHP))
    - var hpNow = Math.round(Number(hpMAX) * Number(partner.reward) / Number(partner.LV))
    - var hpFill = ( hpNow / hpMAX * 100 ).toFixed(2) + '%'
    .HP-fill(style=`width:`+ hpFill)
    .HP-fill-in
    span= hpFill
    .partner-level
    span= hpNow
    span |
    span= hpMAX
    span= `lv.`+ partner.LV

    script(async src= url_for(theme.CDN.SAO_ranklist))
  2. 新建[Blogroot]\themes\butterfly\source\css\_layout\SAO_ranklist.styl,
    if hexo-config('SAO_ranklist.enable')
    @font-face
    font-family 'SAOUI'
    src url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.5.1_6/assets/SAOUI.ttf')
    font-display swap
    #SAO-ranklist
    z-index 9999
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    left calc(50% - 250px)
    top calc(50% - 200px)
    height auto
    width 500px
    background rgba(46, 40, 28,0.5)
    display none
    position fixed
    border-top-left-radius 20px
    border-bottom-right-radius 20px
    overflow hidden
    border 2px solid rgba(255,255,255,0.5)

    .ranklist-title
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.8)
    height 30px
    width 100%
    background transparent
    color white
    display block
    text-align center
    margin-bottom 15px
    &::after
    content ""
    height 2px
    width 90%
    margin-left 5%
    background #fff
    display block

    .ranklist-main
    height auto
    background transparent
    max-height 500px
    overflow scroll
    &::-webkit-scrollbar
    display: none

    .master-item
    height 40px
    width 90%
    margin-inline 5%
    margin-top 5px
    margin-bottom 0
    background transparent
    display inline-block
    float left
    padding 0
    i
    &:hover
    transform rotateZ(45deg)

    .master-rank
    float left
    display inline-block
    height 100%
    width 22PX
    background transparent
    border-top 11px solid rgba(240, 240, 240, 0.7)
    border-right 10px solid rgba(240, 240, 240, 0.7)
    border-bottom 11px solid rgba(240, 240, 240, 0.7)
    margin-right 3px
    i
    color black
    float left
    display inline-block
    width 16px
    height 16px
    text-align center
    border-radius 2px
    left -6px
    top 0.5px
    position relative
    padding 1px
    font-size 14px
    background rgba(255, 255, 255, 0.9)

    .master-user
    color white
    display inline-block
    height 40px
    width 50px
    background rgba(240, 240, 240, 0.7)
    text-align center
    float left
    padding-top 2.5px
    padding 3px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.7)
    .rank-reward
    position: fixed
    display: none
    top: 0
    margin auto
    left 0
    right 0
    font-weight bolder
    width fit-content
    padding 5px
    height auto
    background #464366
    border-radius 5px
    font-size 20px
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    box-shadow 3px 2px 14px #464340
    .reward-img
    width: 150px;
    height: auto;
    display: inline-block
    padding: 5px
    img
    display: block
    a
    display: block
    color #ee7cf0
    a
    color white
    if hexo-config('SAO_ranklist.master.title')
    &::before
    position: fixed
    display: none
    top: 10%
    content: attr(data-title)
    margin auto
    left 0
    right 0
    font-weight bolder
    color #ee7cf0
    text-shadow 2px 2px 5px
    width fit-content
    padding 10px 50px
    height 50px
    background #464366
    border-radius 25px
    font-size 20px
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    box-shadow 3px 2px 14px #464340
    &:hover
    color #1E9600
    &::after
    content ""
    display block
    width 0
    height 0
    position relative
    top -35px
    left 47px
    border-width 37.5px 22px 0px 0px
    border-style solid solid none
    border-color rgba(240, 240, 240, 0.7) transparent transparent
    &:hover
    .rank-reward
    display: block
    if hexo-config('SAO_ranklist.master.title')
    a
    &::before
    display: block
    color #ee7cf0
    .master-data
    float left
    display inline-block
    height 40px
    width 80%
    margin-left 10px
    background rgba(240, 240, 240, 0.7)
    transform skewX(-30deg)

    .master-level
    display block
    position relative
    float right
    text-align center
    top -20px
    width 33%
    height 30px
    font-size 14px
    left 0
    color white
    background rgba(200, 200, 200, 0.9)
    border-radius 3px
    border 3px solid rgba(80,80,80,0.3)
    span
    margin-inline 2px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.8)

    .master-HP
    height 25px
    width 95%
    float left
    margin auto
    background transparent
    margin-top 6px
    box-shadow 2px 2px 10px #fff
    border 1px solid rgba(255,255,255,0.5)
    overflow hidden
    margin-left 2px
    &:hover
    .HP-fill-in
    span
    display block


    .partner-item
    height 40px
    width 90%
    margin-inline 5%
    margin-top 5px
    margin-bottom 0
    background transparent
    display inline-block
    float left
    padding 0
    &:last-child
    margin-bottom 25px
    &:hover
    margin-top 15px
    .partner-user
    &::after
    display block
    .partner-data
    height 40px
    width 80%
    margin-left 10px
    background rgba(220, 220, 220, 0.7)
    transform skewX(-30deg)
    .partner-level
    display block
    .partner-HP
    height 25px
    width 95%
    margin-top 6px
    transform none
    margin-left 2px
    &:hover
    .HP-fill-in
    span
    display block

    .partner-rank
    float left
    display inline-block
    height 100%
    width 22PX
    background transparent
    border-top 11px solid rgba(220, 220, 220, 0.7)
    border-right 10px solid rgba(220, 220, 220, 0.7)
    border-bottom 11px solid rgba(220, 220, 220, 0.7)
    margin-right 3px

    .partner-user
    color white
    display inline-block
    height 40px
    width 50px
    background rgba(220, 220, 220, 0.7)
    text-align center
    float left
    padding-top 2.5px
    padding 3px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.3)
    a
    color white
    &::before
    position: fixed
    display: none
    top: 10%
    content: attr(data-title)
    margin auto
    left 0
    right 0
    font-weight bolder
    color #ee7cf0
    text-shadow 2px 2px 5px
    width fit-content
    padding 10px 50px
    height 50px
    background #464366
    border-radius 25px
    font-size 20px
    font-family 'SAOUI' ,Langar,-apple-system, sans-serif
    box-shadow 3px 2px 14px #464340
    &:hover
    color #1E9600
    &:hover
    a
    &::before
    display: block
    color #ee7cf0
    &::after
    content ""
    display none
    width 0
    height 0
    position relative
    top -35px
    left 47px
    border-width 37.5px 22px 0px 0px
    border-style solid solid none
    border-color rgba(220, 220, 220, 0.7) transparent transparent

    .partner-data
    float left
    display inline-block
    height 40px
    width 50%
    background rgba(220, 220, 220, 0.7)

    .partner-HP
    height 15px
    width 90%
    float left
    margin auto
    background transparent
    margin-top 12.5px
    box-shadow 1px 1px 5px #fff
    border 1px solid rgba(255,255,255,0.5)
    overflow hidden
    transform skewX(-30deg)
    margin-left 10px

    .HP-fill
    height 100%
    width 90%
    float left
    background transparent
    border-left 2px solid rgba(80,80,80,0.3)
    border-top 2px solid rgba(80,80,80,0.3)
    border-bottom 2px solid rgba(80,80,80,0.3)
    border-right 5px solid rgba(255,255,255,0.3)

    .HP-fill-in
    height 100%
    width 100%
    float left
    text-align center
    span
    display none
    position relative
    color white
    font-size 16px
    top -5px

    .partner-level
    display none
    position relative
    float right
    text-align center
    top -20px
    width 33%
    height 30px
    font-size 14px
    left 0
    color white
    background rgba(200, 200, 200, 0.9)
    border-radius 3px
    border 3px solid rgba(80,80,80,0.3)
    span
    margin-inline 2px
    text-shadow 0px 1px 5px rgba(80, 80, 80, 0.8)

    .HP-health
    background #1E9600
    background -webkit-linear-gradient(to right, #FF0000,#ffa800, #FFF200, #1E9600)
    background linear-gradient(to right, #FF0000,#ffa800, #FFF200, #1E9600)

    .HP-warning
    background #ffa800
    background -webkit-linear-gradient(to right, #ffa800, #FFF200)
    background linear-gradient(to right,#ffa800, #FFF200)

    .HP-danger
    background #ffa800
    background -webkit-linear-gradient(to right, #FF0000, #ffa800)
    background linear-gradient(to right, #FF0000, #ffa800)

    .active-SAO-ranklist
    display block!important
    .HP-fill-in
    animation HPfill 1s linear alternate


    @keyframes HPfill
    from
    width 0
    to
    width 100%
  3. 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,引入排行榜单网页元素,注意butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}:
      if theme.pjax.enable
    !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})

    !=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})

    + if theme.SAO_ranklist.enable
    + !=partial('includes/SAO-ranklist', {}, {cache:theme.fragment_cache})
  4. 新建[Blogroot]\themes\butterfly\source\js\SAO_ranklist.js,控制显隐逻辑:
    // 显示排行榜
    function showRanklist() {
    var hasRanklist = document.getElementById('SAO-ranklist');
    hpFill();
    if (hasRanklist) {
    hasRanklist.classList.add("active-SAO-ranklist");
    }
    }
    //隐藏排行榜
    function hideRanklist() {
    var hasRanklist = document.getElementById('SAO-ranklist');
    if (hasRanklist && (hasRanklist.className.indexOf('active') > -1)) {
    hasRanklist.classList.remove("active-SAO-ranklist");
    }
    }
    //根据血量调整血条颜色
    function hpFill(){
    var rankItem = document.getElementById('SAO-ranklist').querySelectorAll('.HP-fill');
    for (var i=0; i < rankItem.length; i++){
    var itemWidth = Number(rankItem[i].style.width.replace("%",""));
    // console.log(itemWidth);
    if (itemWidth < 30){
    rankItem[i].querySelector('.HP-fill-in').classList.add('HP-danger');
    }
    else if ((itemWidth >= 30) && (itemWidth < 60)){
    rankItem[i].querySelector('.HP-fill-in').classList.add('HP-warning');
    }
    else{
    rankItem[i].querySelector('.HP-fill-in').classList.add('HP-health');
    }
    }
    }
  5. 修改[Blogroot]\_config.butterfly.yml,添加CDN配置项和菜单选项:
    • CDN配置项:
        CDN:
      # main
      main_css: /css/index.css
      jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      + # SAO_ranklist
      + SAO_ranklist: /js/SAO_ranklist.js
    • SAO_ranklist菜单配置项示例:
      #SAO UI 风格打赏榜
      SAO_ranklist:
      enable: true #总开关
      title: Rank list #排行榜名称
      baseHP: 200 #0级基础血量
      stepLV: 50 #每级增加的血量
      master:
      name: Akilar #榜首用户名
      link: https://akilar.top/ #点击用户名跳转链接,可留空
      title: 欢迎光临糖果屋 # 悬停用户名显示提示。留空则显示打赏二维码。
      HP: 97 #血量百分比,不用加百分号
      LV: 23 #等级
      partner: #相比初版,只变动了partner下的配置项,移除了title和HP,新增了reward
      - name: '*蓓' #打赏人账户名,如果有*等特殊字符,需要加引号转义。
      link: https://www.nesxc.com/ #打赏人链接,可留空
      reward: 180 #打赏金额
      LV: 180 #等级,建议高于打赏金额,否则血量百分比会大于100%
      - name: '*光'
      link: https://blog.vanxnf.top/
      reward: 50
      LV: 54
      - name: '*因'
      link: https://zfe.space/
      reward: 10
      LV: 27
      - name: '**鄂'
      link: https://blog.zhheo.com/
      reward: 9.9
      LV: 33
  6. 调用榜单:榜单使用showRanklist()方法调用,可以加装在任何元素上,使用onclick='showRanklist()'触发点击调用。此处提供加装到侧栏按钮的方案。修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug,
        else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size
    button#rightside_config(type="button" title=_p("rightside.setting"))
    i.fas.fa-cog.fa-spin.faa-pulse.animated-hover
    + if theme.SAO_ranklist.enable
    + button#ranklist_show(type="button" title="打赏榜按钮" onclick="panelAudio();showRanklist()")
    i.fas.fa-fire-alt
    if theme.chat_btn
    button#chat_btn(type="button" title=_p("rightside.chat_btn"))
    i.fas.fa-sms.faa-pulse.animated-hover

TO DO

实现SAO UI风格的血量排行榜

血量自动计算

血条颜色自动匹配

显隐功能提取,支持加装到任意按钮

曲面3D化