前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >修改脚底自定义标签

修改脚底自定义标签

作者头像
匿名用户的日记
发布2021-12-14 11:24:41
4990
发布2021-12-14 11:24:41
举报
文章被收录于专栏:匿名用户的日记

创建样式

找到themes/butterfly/source/css/_global/function.styl文件,任意位置添加代码

样式代码可以自定义添加 示例:

代码语言:javascript
复制
/*底部信息*/

.github-badge {
    margin-left: 5px;
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    color: #fff;
    line-height: 15px;
    background-color: #abbac3;
    margin-bottom: 5px;
    font-size: 12px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.github-badge .bg-blue {
    background-color: #007ec6;
}

.github-badge .bg-brightgreen {
    background-color: #4dc820;
}

.github-badge .bg-orange {
    background-color: orange;
}

.github-badge .bg-gradient {
    background: linear-gradient(to right,#3ca5f6,#a86af9);
}

.github-badge .bg-blueviolet {
    background-color: #8833d7;
}

引用

找到themes/butterfly/layout/includes/footer.pug文件,添加下面代码即可

引用样式,可以按照格式自定义删减加

代码语言:javascript
复制
.github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://hexo.io/', target='_blank', title='由 Hexo 强力驱动', data-pjax-state='')
      span.badge-subject Powered
      span.badge-value.bg-blue Hexo
  
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://coding.net/', target='_blank', title='静态网页托管于 GitHub Pages 和 Coding Pages', data-pjax-state='')
      span.badge-subject Hosted
      span.badge-value.bg-brightgreen Coding
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://github.com/', target='_blank', title='静态网页托管于 GitHub Pages 和 Coding Pages', data-pjax-state='')
      span.badge-subject Hosted
      span.badge-value.bg-brightgreen GitHub 

  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://www.jsdelivr.com/', target='_blank', title='jsDelivr 提供 CDN 加速服务', data-pjax-state='')
      span.badge-subject CDN
      span.badge-value.bg-orange jsDelivr
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='http://creativecommons.org/licenses/by-nc-sa/4.0/', target='_blank', title='本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可', data-pjax-state='')
      span.badge-subject
        i.fa.fa-copyright
      span.badge-value.bg-gradient BY-NC-SA 4.0

  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://github.com/jerryc127/hexo-theme-butterfly', target='_blank', title='主题', data-pjax-state='')
      span.badge-subject Theme
      span.badge-value.bg-blueviolet Butterfly 
  
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='http://www.beian.miit.gov.cn/', target='_blank', title='备案', data-pjax-state='')
      span.badge-subject 浙ICP备
      span.badge-value.bg-orange 20027461号
  .github-badge
    span.badge-subject 本站已安全运行
    a(style='text-decoration:none;color:#fff;background:#007ec6;padding: 4px 4px 4px 6px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;width:168px;display: inline-block;',id='running-time', rel='external nofollow noopener noreferrer', href='', target='_blank', title='网站运行时间', data-pjax-state='')
  #running-time
    script.
      setInterval(()=>{let create_time=Math.round(new Date('2020-07-20 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);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]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml=time[0]+' 年 '+time[1]+'  天  '+time[2]+'  时  '+time[3]+'  分  '+time[4]+'  秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建样式
  • 引用
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档