先上效果，页脚包含博客的一些文章分类和常用链接，便于快速定位。

我的页脚

定位到 Butterfly 主题文件夹，打开 hexo-theme-butterfly/layout/includes/footer.pug 文件，修改如下，具体的内容根据需要修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#ah-footer
  .footer-group
    h3.footer-title 博客文章
    .footer-links
      a.footer-item(href='/archives/', data-pjax-state='') 全部文章
      a.footer-item(href='/tags/', data-pjax-state='') 文章标签
      a.footer-item(href='/categories/', data-pjax-state='') 文章分类

  .footer-group
    h3.footer-title 学习笔记
    .footer-links
      a.footer-item(href='/tags/R/', data-pjax-state='') R 语言
      a.footer-item(href='/tags/Python/', data-pjax-state='') Python
      a.footer-item(href='/tags/Linux/', data-pjax-state='') Linux

  .footer-group
    h3.footer-title 博客链接
    .footer-links
      a.footer-item(href='/friends/', data-pjax-state='') 友链动态
      a.footer-item(href='/link/', data-pjax-state='') 友情链接
      a.footer-item(href='/bb/', data-pjax-state='') 哔哔点啥

  .footer-group
    h3.footer-title 博客改造
    .footer-links
      a.footer-item(href='/posts/43603/', data-pjax-state='') 博客部署
      a.footer-item(href='/categories/博客魔改/', data-pjax-state='') 博客魔改
      

  .footer-group
    h3.footer-title 关于本站
    .footer-links
      a.footer-item(href='/about/', data-pjax-state='') 关于博主
      a.footer-item(href='/cc/', data-pjax-state='') 版权协议
      a.footer-item(onclick='btf.scrollToDest(0, 500)') 回到顶部

#fotter-copyright(style='font-size:90%')
  .copyrights
    span= _p('Copyright © 2022 Aohuiliu. ')
    span= _p(' All rights reserved.')
  .framework-info
    span= _p('Powered by') + ' '
    a(href='https://hexo.io') Hexo
    span.footer-separator &
    a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'

结构搞定后，还需要 CSS，打开 hexo-theme-butterfly/source/css/_layout/footer.styl 文件，修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#footer
  margin-top: 1rem

#fotter-copyright
  position: relative
  padding: 0 20px
  margin-bottom: 2rem
  color: var(--font-color)
  text-align: center

  a
    color: var(--font-color)

    &:hover
      color: $theme-link-color
      text-decoration: underline

  .footer-separator
    margin: 0 4px

#ah-footer
  display: flex
  flex-direction: row
  width: 100%
  max-width: 900px
  margin: 1rem auto
  justify-content: space-between
  flex-wrap: wrap
  margin-bottom: 2rem
  padding: 0 1rem
  
  .footer-group
    min-width: 100px
    text-align: center
    
    .footer-links
      display: flex
      flex-direction: column

      a.footer-item
        color: var(--font-color)
        line-height: 1rem
        margin: .38rem 0

        &:hover
          color: var(--btn-hover-color)

保存后 Hexo 三连即可看到效果。