Butterfly 主题魔改 - 页脚

博文迁移计划：本文由博客旧站迁移而来，仅对图片和错误显示的文字进行勘误翻新，对博文本身所述内容不做更改，望周知
魔改系列提示：本教程适用于原版 Butterfly 主题，对其衍生再发行版本的可用性不做保证

前言

参考教程

替换footer.pug

整体替换 [Blogroot]\themes\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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
#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

以下CSS样式可添加进任何已引入的.css文件中
例如，在 [Blogroot]\source\css\custom.css 下添加

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
/*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里定义后才能正常显示
如下是本次魔改涉及到的颜色变量代码，请添加到上一步骤的 .css 文件中

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
/*颜色代码 - 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;
}
  • 如果你曾经定义过颜色变量（或者你知道自己在做什么）
    请参考上述格式添加、修改颜色变量
  • 如果你没有定义过颜色变量
    请将上述颜色变量代码添加到自定义CSS文件的最上方

完成

请使用Hexo三连秘法
修改完数据记得本地测试后再上传！