前言

参考教程

Jayhrn-页脚美化

https://blog.jayhrn.com/posts/1799/

整体替换 [Blogroot]\themes\butterfly\layout\includes\footer.pug

#footer_deal
  a.deal_link(href="https://api.vvhan.com/api/qqCard?qq=2910300459" title="QQ" target="_blank")
    i.iconfont.icon-QQ
  a.deal_link(href="https://music.163.com/#/artist?id=52973735" title="Netease" target="_black")
    i.iconfont.icon-netease
  a.deal_link(href="https://space.bilibili.com/525919323" title="Bilibili" target="_blank")
    i.iconfont.icon-bilibili-fill
  img.footer_mini_logo.entered.loading(style="border-radius:25%" src='/media/favicon.webp' onclick="btf.scrollToDest(0,500)" title="返回顶部")
  a.deal_link(href="https://github.com/HiPeach" title="Github"  target="_blank")
    i.iconfont.icon-github
  a.deal_link(href="https://twitter.com/Peach_Comment" title="Twitter" target="_blank")
    i.iconfont.icon-twitter
  a.deal_link(href="mailto:hi@hipeach.eu.org" title="Email")
    i.iconfont.icon-mail
#HiPeach-footer
  .footer-group
    h3.footer-title 直达
    .footer-links
      a.footer-item(href="https://github.com/HiPeach" target="_blank") 我的主页
      a.footer-item(href="/random") 随机传送
      a.footer-item(href="https://space.bilibili.com/525919323") 哔哩哔哩
      a.footer-item(href="https://music.163.com/#/artist?id=52973735") 网易音乐
  .footer-group
    h3.footer-title 分类
    .footer-links
      a.footer-item(href="/categories/") 技术教程
      a.footer-item(href="/categories/") 软件分享
      a.footer-item(href="/categories/") 生活杂谈
      a.footer-item(href="/categories/") 魔改指南
  .footer-group
    h3.footer-title 关于
    .footer-links
      a.footer-item(href="/about/") 关于作者
      a.footer-item(href="/charts/") 博客统计
      a.footer-item(href="/archives") 文章归档
      a.footer-item(href="/update") 更新日志
  .footer-group
    h3.footer-title 服务
    .footer-links
      a.footer-item(href="https://invite.51.la/1P1Oco1UP?target=V6") 51la统计
      a.footer-item(href="https://clustrmaps.com/") 访客地图
      a.footer-item(href="https://vercel.com/") 站点托管
      a.footer-item(href="https://github.com/") 源码存储 
  .footer-group
    h3.footer-title 协议
    .footer-links
      a.footer-item(href="/cookies/") Cookies
      a.footer-item(href="/friend/") 友链协议
      a.footer-item(href="/privacy/") 隐私协议
      a.footer-item(href="/cc/") 版权协议
#footer-banner
  .footer-banner-links
    .footer-banner-left
      .footer-banner-left
        #footer-banner-tips
        script(src='https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js')
        script.
          var typed = new Typed("#footer-banner-tips", {
            strings: [
              "巧不可语，妙不可言。",
              "Indescribable, indescribable."
              ],
            startDelay: 200,
            backDelay: 2000,
            typeSpeed: 100,
            loop: true,
            backSpeed: 20
          })

    .footer-banner-right
      a.footer-banner-link(href="https://hexo.io/zh-cn/" title="Hexo") 框架
      a.footer-banner-link |
      a.footer-banner-link(href="https://github.com/jerryc127/hexo-theme-butterfly" title="Butterfly") 主题
      a.footer-banner-link |
      a.footer-banner-link(href="/atom.xml" title="RSS") 订阅
      a.footer-banner-link |
      a.footer-banner-link(href="https://icp.gov.moe/?keyword=20233333" title="查看萌备信息") 萌ICP备20233333号

请自行修改以上信息，严格注意缩进问题

添加CSS

在 [Blogroot]\source\css\custom.css 下添加

/*Footer*/
#footer-wrap {
  color: var(--HiPeach-fontcolor)
}

#footer-wrap a {
  color: var(--HiPeach-fontcolor);
  height: 44px;
  line-height: 36px
}

#footer-wrap a:hover {
  color: var(--HiPeach-hovertext);
  background-color: var(--HiPeach-none)
}

div#footer_deal {
  justify-content: center;
  display: flex;
  padding-top: 2rem;
  align-items: center
}

@media screen and (max-width: 768px) {
  img.footer_mini_logo {
      display: none
  }

  div#footer_deal {
      flex-wrap: wrap;
      flex-direction: row
  }
}

a.deal_link {
  display: flex;
  margin: 1rem 27px;
  color: var(--HiPeach-footer-linkcolor);
  border-radius: 3rem;
  width: 32px;
  height: 32px;
  background: var(--HiPeach-footer-linkbg);
  justify-content: center;
  align-items: center;
  transition: .3s
}

a.deal_link:hover {
  color: var(--HiPeach-footer-hoverlinkcolor);
  background: var(--HiPeach-footer-hoverlinkbg)
}

img.footer_mini_logo {
  width: 50px;
  height: 50px;
  margin: 0 1rem;
  cursor: pointer;
  /*filter: drop-shadow(0 12px 12px #ee7d7936);*/
  transition: cubic-bezier(0, 0, 0, 1.29) .5s
}

img.footer_mini_logo:hover {
  --webkit-backface-visibility: hidden;
  --webkit-transform-style: preserve-3d
}

@media screen and (min-width: 1300px) {
  img.footer_mini_logo:hover {
      transform: scale(1.03)
  }

  img.footer_mini_logo:active {
      transform: scale(.97)
  }
}

#weblogo {
  align-self: center
}

#footer-wrap a#HiPeachblog_footerlogo:hover {
  background: var(--HiPeach-none)
}

.HiPeachblog_footerlogo_img {
  filter: drop-shadow(0 12px 12px #ee7d7936)
}

.HiPeachblog_footerlogo_img:hover {
  transform: scale(1.03)
}

#footer {
  background: var(--HiPeach-footer-bg);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  z-index: 1002
}

@media screen and (max-width: 768px) {
  #footer {
      background: var(--HiPeach-footer-bg);
      margin-top: 0;
      z-index: 999
  }
}

[data-theme=dark] #footer:before, [data-theme=dark] #page-header:before, [data-theme=dark] #web_bg:before {
  background-color: var(--HiPeach-none) !important
}

@media screen and (max-width: 768px) {
  #letlink {
      flex-direction: column !important;
      text-align: center !important
  }

  #letlogo {
      display: none !important
  }

  #footer-wrap {
      margin-top: 1rem !important
  }
}

.footer-banner-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

#footer-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 50px 0 50px;
  text-align: left !important;
  max-width: 1200px;
  margin: 0 auto
}

#footer-wrap h1 {
  font-size: 1.5rem;
  margin: 0
}

#footer-wrap h3 {
  padding: 0 12px
}

#footer-wrap p {
  margin: 0 0 0 .2rem;
  font-size: .8rem;
  opacity: .8
}

#footer-wrap i {
  margin-right: .5rem;
  width: 22px;
  font-size: 18px;
  display: inline-block
}

#footer-wrap #letlogo {
  display: flex;
  flex-direction: column;
  /*margin-right: 60px;*/
  align-self: center;
  margin: auto 0;
  max-width: 200px
}

#footer-wrap #letlink .link_group {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  min-width: 180px
}

#footer-wrap #letlink {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0 0 1rem 0
}

#weblogo i {
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: -10px
}

#footer:before {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  content: '' !important;
  z-index: -1
}

#HiPeach-footer .footer-links {
  display: flex;
  flex-direction: column
}

#HiPeach-footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  margin: 1rem auto;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding: 0 1rem
}

#HiPeach-footer .footer-item {
  font-size: 1rem;
  line-height: .8rem;
  margin: .38rem 0;
  color: var(--HiPeach-footer-fontcolor);
  /*margin-right: auto*/
}

#HiPeach-footer .footer-item:hover {
  color: var(--HiPeach-footer-hoverfontcolor)
}

#HiPeach-footer .footer-group {
  min-width: 120px
}

#HiPeach-footer .footer-title {
  color: var(--HiPeach-footer-titlecolor);
  font-size: 1rem
}

#footer-banner {
  padding: 1rem;
  color: var(--HiPeach-footer-titlecolor);
  margin-top: 1rem;
  background: var(--HiPeach-footer-secondbg);
  display: flex;
  overflow: hidden;
  z-index: 1002;
  transition: .3s;
  /*border-top: var(--style-border)*/
}

[data-theme=dark] #footer-banner {
  background: var(--HiPeach-footer-secondbg)
}

#footer-banner .footer-banner-links {
  display: flex;
  justify-content: space-between;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
  font-weight: bold
}

#footer-banner .footer-banner-left {
  display: flex;
  flex-wrap: wrap;
  min-height: 32px
}

#footer-banner .footer-banner-link {
  margin-right: 1rem;
  color: var(--HiPeach-footer-titlecolor);
  font-size: 1rem;
  white-space: nowrap
}

#footer-banner .footer-banner-link.cc {
  margin-right: 0
}

#footer-banner .footer-banner-link.cc i {
  margin-right: .5rem
}

#footer-banner .footer-banner-link:hover {
  color: var(--HiPeach-footer-hovertitlecolor)
}

#footer-banner > div > div.footer-banner-left > span {
  margin-right: 1rem
}

#footer-banner .footer-banner-right a:hover {
  color: var(--HiPeach-footer-hovertitlecolor)
}

#footer_deal i {
  font-size: 1.6rem;
  transition: .3s;
  line-height: 1.3rem;
  height: 1.3rem
}

修改颜色变量

在上述CSS中，存在大量类似 --HiPeach-footer-bg 的颜色变量代码
这些颜色变量代码需要在CSS里定义后才能使用
我已经给出本次魔改涉及到的颜色变量代码

/*颜色代码 - Footer*/
:root {
  --HiPeach-none: rgba(0, 0, 0, 0);
  --HiPeach-footer-bg: transparent;
  --HiPeach-footer-secondbg: transparent;
  --HiPeach-footer-titlecolor: #6f71d3;
  --HiPeach-footer-fontcolor: #af80e4de;
  --HiPeach-footer-linkbg: #363636;
  --HiPeach-footer-linkcolor: #af80e4;
  --HiPeach-footer-hoverlinkbg: #6f71d3;
  --HiPeach-footer-hoverlinkcolor: #fff;
  --HiPeach-footer-hoverfontcolor: #5a87ff;
  --HiPeach-footer-hovertitlecolor: #af80e4;
}

[data-theme="light"] {
  --HiPeach-theme: #3b70fc;
  --HiPeach-fontcolor: #363636;
  --HiPeach-hovertext: var(--HiPeach-theme);
}

[data-theme="dark"] {
  --HiPeach-fontcolor: #f7f7fa;
  --HiPeach-hovertext: #0a84ff;
}