点击查看更新记录

更新记录

2023-01-10:内测版

  1. 重写了页脚版块，换成异形边框
  2. 仅保留了建站时间为必要要素
  3. 提供一个轮播图版块放置轮播链接，理论上数量无限
点击查看参考教程
参考方向教程原贴
参考了UI风格和配色样式Neon-Space-Rainmeter
参考了UI风格和配色样式JARVIS-Highpitched-OS
参考了边框样式Neon-Space
fontawesome图标文档fontawesome
Flex布局参数解释Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画CSS3实现伪类hover离开时平滑过渡效果示例
CSS伪类实现三角形绘制纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园
使用clip-path实现多边形剪裁。不可思议的CSS之clip-path
站内教程：iconfont引入教程Hexo引入阿里矢量图标库
swiper中文文档，查看初始化参数Swiper中文网

页脚、顶栏、菜单栏、加载动画之间的风格牵扯较多，所以我得把他们都写好了才开始发教程。源计划：方舟的风格是很明显的套件，所以我觉得应该是要装就全部装上才好的对吧。

魔改步骤

  1. 本篇讨论的轮播图的配置项可能与hexo-butterfly-footer-beautify插件的配置项有冲突，如果您曾经安装过该插件或者该插件的衍生插件。请确保您已经卸载了它们。
    1
    npm uninstall hexo-butterfly-footer-beautify --save
  2. 本篇沿用了源计划-方舟：首页卡片中用到的部分方案，为保证样式完整，且避免报错，推荐先完成首页卡片的魔改后再考虑使用本方案。
  3. 本篇需要用到iconfont作为边框底部轮播图的装饰性图标。请先完成前置教程：Hexo引入阿里矢量图标库，务必确保symbol方案能够使用后再进行下方内容。
  4. 本篇用到了源计划-方舟：首页轮播图中9、10、11步提到的swiper依赖。没有做过的，至少去按照这篇教程完成swiper的引入。否则后面无法正常实现页脚轮播链接的效果。
  5. 直接重写[Blogroot]\themes\butterfly\layout\includes\footer.pug,写入以下内容：
    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
    #ark-footer-wraper
      //- 页脚基本信息
      .ark-footer-container
        .ark-footer-left-corner
          //- 徽标版块
          #ark-footer-bdage-container
            .ark-footer-bdage.swiper-wrapper
              each item in theme.footer.bdageitem
                a.ark-bdage-item.swiper-slide(href=url_for(item.link) title=item.message target="_blank")
                  svg.icon.ark-decoration(aria-hidden="true")
                    use(xlink:href=`#`+item.icon)
                  span= item.text
          //- 作者信息
          if theme.footer.owner.enable
            - var now = new Date()
            - var nowYear = now.getFullYear()
            if theme.footer.owner.since && theme.footer.owner.since != nowYear
              .ark-footer-copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
            else
              .ark-footer-copyright!= `©${nowYear} By ${config.author}`
          //- 版权信息
          if theme.footer.copyright
            .ark-footer-framework-info
              span= _p('footer.framework') + ' '
              a(href='https://hexo.io')= 'Hexo'
              span.footer-separator |
              span= _p('footer.theme') + ' '
              a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
          //- 备案信息
          if theme.footer.record.enable
            a.ark-footer-record(href=url_for(theme.footer.record.link) title=theme.footer.record.text)!= theme.footer.record.text
          //- 留块空白放放自定义信息
          if theme.footer.custom_text
            .footer_custom_text!=`${theme.footer.custom_text}`
        //- 右侧自定义信息
        .ark-footer-right-corner#workboard
        //- 电子钟版块
        script(async src='/js/custom/runtime.js')
  6. 新建[Blogroot]\themes\butterfly\source\css\_ark_style\ark_footer.styl,写入以下内容,考虑到异形边框的剪裁，在300px以下的效果并不是很好，现在应该很少有这么窄的设备了吧，智能手表就算了。在意的话建议模仿着自己适配下：
    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
    #footer
      position: relative
      background: transparent
      background-attachment: scroll
      background-position: bottom
      background-size: cover
      height: 100px;
      &::before
        content: "";
        height: 100px;
        position: absolute;
        box-shadow: 0 0px 20px var(--card-widget-content-border) inset
        width: 100%;
        background: var(--card-widget-background);
        bottom: 0;
        left: 0;
        z-index: -1

      #ark-footer-wraper
        font-family: 'UnidreamLED','TaikoMagic';
        position: relative
        padding: 0px
        width: 100%;
        height: 100%
        color: var(--card-widget-color)
        text-align: center
        display: flex;
        flex-direction: column;
        .ark-footer-container
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 100%
          width: 100%
          .ark-footer-left-corner
            display: flex;
            height: 100%;
            font-size: 14px;
            line-height: 14px;
            color: var(--card-widget-color)
            background: transparent
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            a
              color: var(--card-widget-color)
              &:hover
                color: var(--ark-post-item-font-hover);
            #ark-footer-bdage-container
              display: flex;
              height: 14px;
              width: 180px;
              background: transparent;
              position: relative;
              .ark-bdage-item
                height: 14px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            .ark-footer-copyright
              .footer-separator
                margin: 0 4px

    @media screen and (min-width: 768px)
      #footer
        &::before
          border-radius: 0 0 30px 30px
          clip-path: polygon(0 0, 40px 0, 60px 20px, 220px 20px, 240px 40px, 320px 40px, 380px calc(100% - 10px), calc(100% - 380px) calc(100% - 10px), calc(100% - 320px) 40px, calc(100% - 240px) 40px, calc(100% - 220px) 20px, calc(100% - 60px) 20px, calc(100% - 40px) 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px))

        #ark-footer-wraper
          .ark-footer-container
            .ark-footer-left-corner
              width: 50%;
              padding: 25px 0 0 40px
              #ark-footer-bdage-container
                margin: 0 0 5px 0
              .ark-footer-copyright
                margin: 0 0 5px 25px
              .ark-footer-record
                margin: 0 0 5px 50px
            .ark-footer-right-corner          
              display: flex;
              height: 100%;
              width: 50%;
              font-size: 14px;
              line-height: 14px 
              color: var(--card-widget-color)
              background: transparent
              align-items: flex-end;
              justify-content: center;
              flex-direction: column; 
              padding: 25px 40px 0 0
              font-family: 'UnidreamLED','TaikoMagic';   
              position: relative
              .ark-footer-reminder
                margin: 0 0 5px 0
              .ark-footer-timer
                margin: 0 25px 5px 0
              #ark-site-runtime
                margin: 0 50px 5px 0
              &::before
                content: "";
                position: absolute;
                width: 100%;
                height: 5px;
                right: 20px;
                bottom: 18px;
                z-index: -1;
                background: linear-gradient(to right,transparent, var(--ark-post-item-border), transparent);
                transform: skewX(-45deg); 
    @media screen and (max-width: 768px)
      #footer
        &::before
          border-radius: 0 0 0 30px
          clip-path: polygon(0 0, 40px 0, 60px 20px, 220px 20px, 240px 40px, 320px 40px, 380px calc(100% - 10px), 100% calc(100% - 10px), 100% 100%, 30px 100%, 0 calc(100% - 30px))
        #ark-footer-wraper
          .ark-footer-container
            .ark-footer-left-corner
              width: 100%;
              padding: 25px 0 0 40px
              #ark-footer-bdage-container
                margin: 0 0 5px 0
              .ark-footer-copyright
                margin: 0 0 5px 25px
              .ark-footer-record
                margin: 0 0 5px 50px
            .ark-footer-right-corner
              display: none
  7. 修改[Blogroot]\themes\butterfly\source\js\custom\swiper_init.js,这个文件在源计划-方舟：首页轮播图中9、10、11步提到过，需要完成那篇的几个依赖引入才行，这个文件以后的魔改会经常见面。所以务必留个印象。在这个文件下面新起一行，注意以前写过的可不要删了。这里我放了一些基本参数实现效果。更多参数可以自行查看Swiper中文网来添加。之所以是每次自己新建而不是通过配置项自动生成是为了节省资源，所有的轮播都放在一个文件里，减少请求次数和页面阻塞。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //页脚徽标轮播图
    var ark_footer_swiper = new Swiper("#ark-footer-bdage-container", {
      direction: "horizontal", //横向切换
      loop: true,
      updateOnWindowResize: true,
      slidesPerView: 1,
      spaceBetween: 10,
      mousewheel: true,
      effect : 'fade', //渐隐切换
      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 3000,//3秒切换一次
        pauseOnMouseEnter: true, //鼠标进入停止切换，离开恢复切换
      },
    });
  8. 新建[Blogroot]\themes\butterfly\source\js\custom\runtime.js,这个文件是为了实现页脚右侧的建站时间计算。相关内容其实在Native JS Timer-原生JS实现页脚计时器那篇里提到过。记得看js里的注释改成自己的站点内容。
    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
    setInterval(() => {

      let create_time = Math.round(new Date('2019-04-17 00:00:00').getTime() / 1000); //在此行修改建站时间
      let timestamp = Math.round((new Date().getTime()) / 1000);
      let second = timestamp - create_time;
      let time = new Array(0, 0, 0, 0, 0);
      //格式规范化，个位数前面加0
      var nol = function(h){
        return h>9?h:'0'+h;
      }
      if (second >= 365 * 24 * 3600) {
        time[0] = parseInt(second / (365 * 24 * 3600));
        second %= 365 * 24 * 3600;
      }//年
      if (second >= 24 * 3600) {
        time[1] = parseInt(second / (24 * 3600));
        second %= 24 * 3600;
      }//天
      if (second >= 3600) {
        time[2] = nol(parseInt(second / 3600));
        second %= 3600;
      }//时
      if (second >= 60) {
        time[3] = nol(parseInt(second / 60));
        second %= 60;
      }//分
      if (second > 0) {
        time[4] = nol(second);
      }//秒
      //早上7点到晚上10点营业
      if ((Number(time[2])<22) && (Number(time[2])>7)){
        currentTimeHtml ="<div class='ark-footer-reminder'>资源宝营业中</div><div class='ark-footer-timer'>建站时间持续增长中</div><div id='ark-site-runtime'>" + time[0] + ' YEAR ' + time[1] + ' DAYS ' + time[2] + ' : ' + time[3] + ' : ' + time[4] + '</div>';
      } 
      //其余时间打烊
      else{
        currentTimeHtml ="<div class='ark-footer-reminder'>资源宝打烊了</div><div class='ark-footer-timer'>建站时间持续增长中</div><div id='ark-site-runtime'>" + time[0] + ' YEAR ' + time[1] + ' DAYS ' + time[2] + ' : ' + time[3] + ' : ' + time[4] + '</div>'; 
      }
      //覆写挂载标签的内容
      document.getElementById("workboard").innerHTML = currentTimeHtml;
    }, 1000);
  9. 修改主题配置文件[Blogroot]\_config.butterfly.yml的页脚配置项，注意是修改，这个是主题文件中本来就已经有的配置项。找到对应节以后替换内容。轮播图标仅支持iconfont。请务必确保你已经引入了Hexo引入阿里矢量图标库中提到的symbol方案。
    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
    # Footer Settings
    # --------------------------------------
    footer:
      owner:
        enable: true
        since: 2016 #建站年份
      # 自定义内容
      custom_text:
      copyright: false # Copyright of theme and framework
      # 备案号
      record:
        enable: true
        text: 浙ICP备-2021026687号
        link: https://beian.miit.gov.cn
      # 轮播徽标
      bdageitem:
        - link: https://hexo.io/ #徽标指向网站链接
          text: Frame-Hexo #徽标信息
          message: 博客框架为Hexo_v6.2.0 #徽标提示语
          icon: icon-hexo
        - link: https://butterfly.js.org/
          text: Theme-Butterfly
          message: 主题版本Butterfly_v4.4.0
          icon: icon-Butterfly
        - link: https://www.jsdelivr.com/
          text: CDN-jsDelivr
          message: 本站使用JsDelivr为静态资源提供CDN加速
          icon: icon-jsdelivr
        - link: https://console.dogecloud.com/
          text: CDN-dogecloud
          message: 本网站由多吉云提供CDN加速服务
          icon: icon-DOGE
        - link: https://www.netlify.com/
          text: Hosted-Netlify
          message: 本站默认线路托管于Netlify
          icon: icon-netlify
        - link: https://github.com/
          text: Source-Github
          message: 本站项目由Github托管
          icon: icon-GitHub
        - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
          text: Copyright-BY-NC-SA-4
          message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
          icon: icon-copyright