进一步魔改 Footer

徽标生成网站: shields
图标查询网站: simpleicons
html压缩网站: htmlpack
转义字符查询网站: oschina

基础页脚

博客年份

修改主题配置文件_config.butterfly.yml。

footer:
  owner:
    enable: true
    since: 2018   # 站点起始时间

自定义页脚1

custom_text是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。
修改主题配置文件_config.butterfly.yml。
本人的页脚如下，若你在配置时没有出现github徽章，请参考教程添加Github徽标。

custom_text: I wish you to become your own sun, no need to rely on who's light.<p><a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a>&nbsp;<a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a>&nbsp;<a target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a> &nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a>&nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></a>&nbsp;<a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>&nbsp;<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p>

或者使用本博客中完善过的PUG

custom_text_beian: <p>
                    <a style="text-decoration:none" target="_blank" rel="noopener" href="http://www.beian.gov.cn">
                      <img src="https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/icon-beian.png" title="鲁ICP备20002096号-2">
                      <span style="color:#666">鲁ICP备20002096号-2</span>
                    </a>
                  </p>

对于部分人需要写 ICP 的，也可以写在custom_text里

自定义页脚2

在hexo-blog-demo/node_modules/hexo-theme-butterfly/layout/includes/footer.pug中添加如下代码:

#footer-wrap
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t 说点什么
          .bg-ad
            div
              | （这里的内容随你写，但是不要过长影响整体美观度，具体可根据实现效果修改）随便说点什么说点什么、随便说点什么说点什么随便说点什么说点什么随便说点什么说点什么随便说点什么说。
            .btn-xz-box
              a.btn-xz(href='https://tzy1997.com/') 点击跳转到哪儿
        .t-t-r
          p.ft-t.t-l-t 修仙导航
          ul.ft-links
            li
              a(href='https://tzy1997.com/articles/hexo1600/') 建站指南
              a(href='https://tzy1997.com/nav.html') 网址导航
            li
              a(href='https://tzy1997.com/sponsorWall/') 来杯咖啡
              a(href='https://tzy1997.com/comments/') 留点什么
            li
              a(href='https://tzy1997.com/about/') 关于博主
              a(href='https://tzy1997.com/archives/') 文章归档
            li
              a(href='https://tzy1997.com/categories/') 文章分类
              a(href='https://tzy1997.com/tags/') 文章标签
            li
              a(href='https://tzy1997.com/gallery/') 我的相册
              a(href='https://tzy1997.com/bangumis/') 我的追番
            li
              a(href='https://tzy1997.com/specialEffects/') 一些特效
              a(href='https://tzy1997.com/wallpaper/') 一些壁纸
    .ft-item-2
      p.ft-t 推荐友链
      .ft-img-group
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
    else
      .copyright!= `&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
  if theme.footer.copyright
    .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.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

或者使用本博客中完善过的PUG

#footer-wrap
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
    else
      .copyright!= `&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
  if theme.footer.copyright
    .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'
      span.footer-separator |
      span= _p('footer.plugin') + ' '
      a(href='https://app.crisp.chat/')= 'Crisp' 
  if theme.custom_text
    .footer_custom_text!=`${theme.custom_text}`
  if theme.custom_text_beian
    .footer_custom_text_beian!=`${theme.custom_text_beian}`
    
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t
          .bg-ad
            div
              | 我愿做一个bug ღ҉， 只为你在coding时能多看我一眼 ღ
            .btn-xz-box
              a.btn-xz(href='http://blog.renyuxin.com/') 
        .t-t-r

<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

你需要添加的代码为#ft整个 div，注意在缩进上与主题的几个if对齐。这里你可以根据自己的需求修改以上内容等，例如【说点什么】、自定义底部导航链接等，【推荐友链】的图片尺寸建议 1:1。

将以下代码复制到自定义的custom.css中

/* 自定义底部  start */
#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: rgb(255 255 255 / 80%) !important;
    text-align: left;
    flex-wrap: wrap;
}
.ft-item-1,
.ft-item-2 {
    display: flex;
    height: 100%;
    padding: 10px 14px;
}
.ft-item-1 {
    flex-direction: column;
    flex: 2;
}
.ft-item-2 {
    flex: 1;
    flex-direction: column;
}
.t-top {
    display: flex;
}
.t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
}
.t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
}
.btn-xz-box {
    margin-top: 10px;
}
.btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
    cursor: pointer !important;
}
.btn-xz:hover {
    text-decoration: none !important;

}
.btn-xz-box:hover .btn-xz {
    background-color: #6f42c1;
}
.t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
}
.ft-links li a {
    display: inline-block !important;
    width: 50%;
    cursor: pointer !important;
}
.ft-links li a:hover {
    text-decoration: none !important;
    color: #6f42c1 !important;
}
.ft-item-2 .ft-img-group {
    width: 100%;
}
.ft-t {
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
}
.t-l-t {
    padding-left: 14px;
}
.ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
}
.ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer !important;
}
.ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
}
@media screen and (max-width: 768px) {
    .ft-item-1 {
        flex-basis: 100% !important;
    }
    .ft-item-2 {
        flex-basis: 100% !important;
    }
    .t-top .t-t-l .bg-ad {
        width: 100%;
    }
}
@media screen and (max-width: 576px) {
    .t-top {
        flex-wrap: wrap;
    }
    .t-top .t-t-l {
        flex-basis: 100% !important;

    }
    .t-top .t-t-r {
        margin-top: 16px;
        flex-basis: 100% !important;
    }
}
/* 自定义底部  End */

css 中的#6f42c1是我的主题色，这里记得换成你的主题色。

修改主题配置文件_config.butterfly.yml。

1 2	# footer是否显示图片背景(与top_img一致) footer_bg: true

徽标和计时器

方法1：页脚 github 徽标

需要footer.pug这个文件中引入一串代码，
注意：footer.pug这个文件的基础代码，可以参考炫酷特效(一)的自定义页脚2不粉嫩

1
2
3

#footer-wrap
  if theme.custom_text
    .footer_custom_text!=`${theme.custom_text}`

修改主题配置文件_config.butterfly.yml中添加下面的代码即可。

注意下，我这里的第一个是备案页脚徽标，由于图片Base64字符太多，使用Shields页脚徽标解析异常，所以博主用的是svg格式
如果想用博主这种，可以把这个svg下载下来，将备案内容改成自己的即可。ps：官网标志可以去工信部官网、全国互联网安全管理服务平台官网的页面中通过F12控制台下载，然后转base64替换

##### 页脚自定义文本 #####
custom_text:
            <a style="text-decoration:none" target="_blank" rel="noopener" href="https://beian.miit.gov.cn/#/Integrated/recordQuery">
              <img src="https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/gxb1.svg" title="鲁ICP备20002096号-2">
            </a>
            <a style="text-decoration:none" target="_blank" rel="noopener" href="https://beian.mps.gov.cn/#/query/webSearch?code=37162502000525">
              <img src="https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/wab1.svg" title="鲁公网安备37162502000525">
            </a><br>
            <a target="_blank" href="https://hexo.io/">
              <img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo">
            </a>&nbsp;
            <a target="_blank" href="https://butterfly.js.org/">
              <img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly">
            </a>&nbsp;
            <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
              <img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可">
            </a>

方法2：页脚 github 徽标和计时器

hexo-butterfly-footer-beautify底栏美化
 在线制作徽标的网站

安装插件依赖,在博客根目录【smart-blog-web】下打开终端，运行以下指令：

1	npm install hexo-butterfly-footer-beautify --save

修改主题配置文件_config.butterfly.yml中添加下面的代码即可。

# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项
  runtime_js: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/js/runtime/runtime.min.js
  runtime_css: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/css/runtime/runtime.min.css
  # 徽标部分配置项
  swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v5.4.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v4.2.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用JsDelivr为静态资源提供CDN加速
    - link: https://beian.miit.gov.cn/#/Integrated/index
      shields: https://img.shields.io/badge/%E9%B2%81ICP%E5%A4%87-20002096%E5%8F%B7--2-red?style=plastic&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42L
      message: 本站已在鲁进行备案
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

  # swiper_css: https://cdn.cbd.int/hexo-butterfly-swiper/lib/swiper.min.css
  # swiper_js: https://cdn.cbd.int/hexo-butterfly-swiper/lib/swiper.min.js
  # swiperbdage_init_js: https://cdn.cbd.int/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable.timer	true/false	【必选】计时器控制开关
enable.bdage	true/false	【必选】徽标控制开关
enable_page	path	【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填all，默认为all
exclude	path	【可选】填写想要屏蔽的页面，可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
runtime_js	url	【必选】页脚计时器脚本，可以下载上文填写示例的链接，参照注释和教程：Native JS Timer自行修改。
runtime_css	url	【可选】自定义样式，预留开发者接口，可自行下载。
swiperpara	number	【可选】若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题
bdageitem.link	url	【可选】页脚徽标指向的网站链接
bdageitem.shields	url	【必选】页脚徽标对应的API，API具体写法示例参照教程 Shields页脚徽标
bdageitem.message	text	【可选】页脚徽标悬停时显示的信息
swiper_css	url	【可选】swiper的依赖
swiper_js	url	【可选】swiper的依赖
swiperbdage_init_js	url	【可选】swiper初始化方法

目前存在的问题：

和hexo-butterfly-swiper共用依赖，但是无法解决swiper.min.js在pjax重载后的引入顺序问题。目前只能是重复引入。后续可能把这几个整合到一起。
如果之前用hexo-butterfly-wowjs给徽标添加过动画，需要关闭动画。wowjs的动画效果和swiper的轮播效果不兼容

炫酷特效-Footer(一)