博客自定义页脚

前言

效果预览

ps：升级版页脚请移步：页脚美化

升级版效果预览

步骤

直接将BlogRoot/themes/butterfly/layout/includes/footer.pug中的所有代码替换为如下代码并自行修改内容:

#footer-wrap
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t Welcome
          .bg-ad
            div
              | --- DQY ❤ WY ---
            .btn-xz-box
              a.btn-xz(href='https://www.dqywy.top/about/') 关于站长
        .t-t-r
          p.ft-t.t-l-t 博客导航
          ul.ft-links
            li
              a(href='https://www.dqywy.top/categories/博客/') 建站指南
              a(href='https://www.dqywy.top/ToDoList/') 待做清单
            li
              a(href='https://www.dqywy.top/categories/') 文章分类
              a(href='https://www.dqywy.top/tags/') 文章标签
            li
              a(href='https://www.dqywy.top/archives/') 时间轴
              a(href='https://www.dqywy.top/about/') 关于博主

    .ft-item-2
      p.ft-t 推荐友链
      .ft-img-group
        .img-group-item
          a(href='http://47.109.96.67:4000/')
            img(src='https://s1.ax1x.com/2023/05/07/p9wAPit.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}`

打开Blog\source\css\custom.css，缺少的文件夹或文件直接创建即可，添加下列代码

ps：下列代码的第7行，注释掉->白天模式文字为黑色，黑夜模式文字为白色；不注释掉->白天黑夜均为你自定义的颜色


/* 自定义底部  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 */

将上述代码中的#6f42c1换成你的主题色，引入custom.css: 打开主题配置文件_config.butterfly.yml搜索inject找到head头部：
1
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
hexo三连查看效果即可