最近有小伙伴问到能不能出下关于页脚美化的教程，最近忙于数学建模，没有时间，这不今天搞完了，可以继续写写这方面的东西。
总的来说，其实这些美化都不是自己的想法（艺术细胞少了），大多数的样式什么的都来自张洪Heo，我感觉他设计的样式十分符合我的审美。本博客基本上就是参照他的博客进行修改的。
对于页脚的美化，我基本上全是按照他的来的。
教程
对于页脚主要的文件在themes/butterfly/layout/includes/footer.pug里面，如果大家想自行魔改的话，完全对这个文件内容进行修改就可以了。
页脚的样式大家可以参考本博客就可以了。
修改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="" title="mail")
i.iconfont.icon-mail
a.deal_link(href="" title="qq" target="_blank")
i.iconfont.icon-qq1
a.deal_link(href="" title="微博" target="_blank")
i.iconfont.icon-weibo1
a.deal_link(href="https://github.com/JayHrn" title="github" target="_blank")
i.iconfont.icon-github1
img.footer_mini_logo.entered.loading(style="border-radius:50%" src='图片路径' onclick="btf.scrollToDest(0,500)" title="返回顶部")
a.deal_link(href="" title="dribbble")
i.iconfont.icon-dribbble_F
a.deal_link(href="" title="facebook" target="_blank")
i.iconfont.icon-facebook1
a.deal_link(href="" title="Twitter" target="_blank")
i.iconfont.icon-twitter
a.deal_link(href="" title="Telegram" target="_blank")
i.iconfont.icon-telegram
#Jay-footer
.footer-group
h3.footer-title 直达
.footer-links
a.footer-item(href="https://www.lvhrn.cn" target="_blank") 我的主页
a.footer-item(href="/music") 音乐欣赏
a.footer-item(href="/harbour") 心灵港湾
a.footer-item(href="/random.html") 随机文章
.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#friend-links-in-footer
.footer-group
h3.footer-title 协议
.footer-links
a.footer-item(href="/privacy/") 隐私协议
a.footer-item(href="/cookies/") Cookie
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: ["念念不忘，必有回响。", "Never forget, there will be echoes."],
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="theme") 主题
a.footer-banner-link |
a.footer-banner-link(href="/atom.xml" title="RSS") 订阅
a.footer-banner-link |
a.footer-banner-link(href="/about/" title="about") 关于
a.footer-banner-link |
a.footer-banner-link.cc(href="/cc/" title="cc协议")
i.iconfont.icon-cc
span 协议
|
对于中间图片填写自己的路径就可以了，哪些icon图表可以换成自己的，如果需要引用我的，可以引入
1
2
3
4
| inject:
head:
- <script src="https://at.alicdn.com/t/c/font_3570527_dthoqrrv2tv.css"></script>
|
对于#footer-banner-tips里面的内容可以换成自己的，对于随机文字可以参考Hexo博客实现页面随机跳转。
引入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-wrap {
color: var(--Jay-fontcolor)
}
#footer-wrap a {
color: var(--Jay-fontcolor);
height: 44px;
line-height: 36px
}
#footer-wrap a:hover {
color: var(--Jay-hovertext);
background-color: var(--Jay-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(--Jay-card-bg);
border-radius: 3rem;
width: 32px;
height: 32px;
background: var(--font-color);
justify-content: center;
align-items: center;
transition: .3s
}
a.deal_link:hover {
color: var(--Jay-white);
background: var(--Jay-main)
}
img.footer_mini_logo {
width: 50px;
height: 50px;
margin: 0 1rem;
cursor: pointer;
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#Jayblog_footerlogo:hover {
background: var(--Jay-none)
}
.Jayblog_footerlogo_img {
filter: drop-shadow(0 12px 12px #ee7d7936)
}
.Jayblog_footerlogo_img:hover {
transform: scale(1.03)
}
#footer {
background: linear-gradient(180deg, var(--Jay-background) 0, var(--Jay-card-bg) 25%);
margin-top: 1rem;
display: flex;
flex-direction: column;
z-index: 1002
}
@media screen and (max-width: 768px) {
#footer {
background: linear-gradient(180deg, var(--Jay-background) 0, var(--Jay-card-bg) 25%);
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(--Jay-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;
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
}
#Jay-footer .footer-links {
display: flex;
flex-direction: column
}
#Jay-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
}
#Jay-footer .footer-item {
font-size: 1rem;
line-height: .8rem;
margin: .38rem 0;
color: var(--Jay-fontcolor);
}
#Jay-footer .footer-item:hover {
color: var(--Jay-theme)
}
#Jay-footer .footer-group {
min-width: 120px
}
#Jay-footer .footer-title {
color: var(--Jay-secondtext);
font-size: 1rem
}
#footer-banner {
padding: 1rem;
color: var(--Jay-fontcolor);
margin-top: 1rem;
background: var(--Jay-secondbg);
display: flex;
overflow: hidden;
z-index: 1002;
transition: .3s;
}
[data-theme=dark] #footer-banner {
background: var(--Jay-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;
}
#footer-banner .footer-banner-left {
display: flex;
flex-wrap: wrap;
min-height: 32px
}
#footer-banner .footer-banner-link {
margin-right: 1rem;
color: var(--Jay-fontcolor);
font-size: 1rem;
font-weight: 700;
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(--Jay-theme)
}
#footer-banner > div > div.footer-banner-left > span {
margin-right: 1rem
}
#footer-banner .footer-banner-right a:hover {
color: var(--Jay-lighttext)
}
#footer_deal i {
font-size: 1.6rem;
transition: .3s;
line-height: 1.3rem;
height: 1.3rem
}
|
颜色样式变量就自行改动就可以了
如果发现有部分图标不能使用，可以自行到iconfont进行查找替换，关于如何引入，可以参考 Akilarの糖果屋的Iconfont Inject