源计划-方舟：页脚边框

Akilar

发布于 2023-02-06 11:06:18

6870

发布于 2023-02-06 11:06:18

文章被收录于专栏：Akilarの糖果屋Akilarの糖果屋

2023-01-10:内测版

重写了页脚版块，换成异形边框
仅保留了建站时间为必要要素
提供一个轮播图版块放置轮播链接，理论上数量无限

点击查看参考教程

参考方向	教程原贴
参考了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中文网

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

魔改步骤

本篇讨论的轮播图的配置项可能与hexo-butterfly-footer-beautify插件的配置项有冲突，如果您曾经安装过该插件或者该插件的衍生插件。请确保您已经卸载了它们。

npm uninstall hexo-butterfly-footer-beautify --save

本篇沿用了源计划-方舟：首页卡片中用到的部分方案，为保证样式完整，且避免报错，推荐先完成首页卡片的魔改后再考虑使用本方案。

本篇需要用到iconfont作为卡片底部的装饰性图标。请先完成前置教程：Hexo引入阿里矢量图标库，务必确保symbol方案能够使用后再进行下方内容。

本篇用到了源计划-方舟：首页轮播图中9、10、11步提到的swiper依赖。没有做过的，至少去按照这篇教程完成swiper的引入。否则后面无法正常实现页脚轮播链接的效果。

直接重写[Blogroot]\themes\butterfly\layout\includes\footer.pug,写入以下内容：

#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!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
        else
          .ark-footer-copyright!= `&copy;${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')

新建[Blogroot]\themes\butterfly\source\css\_ark_style\ark_footer.styl,写入以下内容,考虑到异形边框的剪裁，在300px以下的效果并不是很好，现在应该很少有这么窄的设备了吧，智能手表就算了。在意的话建议模仿着自己适配下：

#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

修改[Blogroot]\themes\butterfly\source\js\custom\swiper_init.js,这个文件在源计划-方舟：首页轮播图中9、10、11步提到过，需要完成那篇的几个依赖引入才行，这个文件以后的魔改会经常见面。所以务必留个印象。在这个文件下面新起一行，注意以前写过的可不要删了。这里我放了一些基本参数实现效果。更多参数可以自行查看Swiper中文网来添加。之所以是每次自己新建而不是通过配置项自动生成是为了节省资源，所有的轮播都放在一个文件里，减少请求次数和页面阻塞。

//页脚徽标轮播图
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, //鼠标进入停止切换，离开恢复切换
  },
});

新建[Blogroot]\themes\butterfly\source\js\custom\runtime.js,这个文件是为了实现页脚右侧的建站时间计算。相关内容其实在Native JS Timer-原生JS实现页脚计时器那篇里提到过。记得看js里的注释改成自己的站点内容。

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);

修改主题配置文件[Blogroot]\_config.butterfly.yml的页脚配置项，注意是修改，这个是主题文件中本来就已经有的配置项。找到对应节以后替换内容。轮播图标仅支持iconfont。请务必确保你已经引入了Hexo引入阿里矢量图标库中提到的symbol方案。

# 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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript