总觉得 Hexo Butterfly 的默认页脚不尽如人意，在经历了长时间的摸索与尝试之后，我终于找到了一个比较理想的解决方案。这个方案的原作者是 半方池水半方田，在此特别感谢这位大佬的分享与贡献！

本文将以尽可能详细的方式，介绍如何实现与本站风格一致的自定义页脚效果。

效果预览

浅色

深色

教程

话不多说，我们直接开始。

新增CSS文件

首先创建页脚样式文件。在 [根目录]/themes/butterfly/source/css/footer.styl 路径下创建新文件（文件名可自定），然后写入以下代码：

Butterfly 版本适配：5.0+

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
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
/*项目地址：https://codepen.io/poojanahelia/pen/Exabvdy*/

#footer {
    background-color: rgba(0, 0, 0, 0); /* 修改透明色 */
    color: #fff;
    padding: 0;
}

#footer .footer-other {
    padding: 0;
}

.footer-copyright{
    padding: 0;
}

.my-footer-logo {
    color: white;
}

.my-footer-wave-svg {
    height: 50px;
    width: 100%;
    transform: scale(-1, -1) translateY(-10px); /*;*/
}

.my-footer-wave-path {
    fill: #177ecd;
}

.my-footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 450px;
    position: relative;
}

.my-footer-content-column {
    box-sizing: border-box;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    color: #fff;
}

.my-footer-content-column ul li a {
    color: #fff;
    text-decoration: none;
}

.my-footer-logo-link {
    display: inline-block;
}

.my-footer-menu {
    margin-top: 15px;
}

.my-footer-menu-name {
    color: #fffff2;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
}

.my-footer-menu-list {
    list-style: none;
    margin-bottom: 0;
    margin-top: 10px;
    padding-left: 0;
}

.my-footer-menu-list li {
    margin-top: 5px;
}

.my-footer-call-to-action-description {
    color: #fffff2;
    margin-top: 10px;
    margin-bottom: 20px;
}

.my-footer-call-to-action-button:hover {
    background-color: #fffff2;
    color: #00bef0;
}

.button:last-of-type {
    margin-right: 0;
}

.my-footer-call-to-action-button {
    background-color: #03708c;
    border-radius: 21px;
    color: #fffff2;
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 18px;
    padding: 12px 30px;
    margin: 0 10px 10px 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s;
    cursor: pointer;
    position: relative;
}

.my-footer-call-to-action {
    margin-top: 17px;
}

.my-footer-call-to-action-title {
    color: #fffff2;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
}

.my-footer-call-to-action-link-wrapper {
    margin-bottom: 0;
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
}

.my-footer-call-to-action-link-wrapper a {
    color: #fff;
    text-decoration: none;
}


.my-footer-social-links {
    bottom: -1px;
    height: 54px;
    position: absolute;
    right: 0;
    width: 236px;
}

.my-footer-social-amoeba-svg {
    height: 54px;
    left: 0;
    display: block;
    position: absolute;
    top: 0;
    width: 236px;
}

.my-footer-social-amoeba-path {
    fill: #03708c;
}

.my-footer-social-link.email {
    height: 41px;
    left: 5px;
    top: 14px;
    width: 41px;
}

.my-footer-social-link {
    display: block;
    padding: 10px;
    position: absolute;
}

.hidden-link-text {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    top: 50%;
}

.my-footer-social-icon-svg {
    display: block;
}

.my-footer-social-icon-path {
    fill: #fffff2;
    transition: fill .2s;
}

.my-footer-social-link.follow {
    height: 42px;
    left: 124px;
    top: 13px;
    width: 42px;
}

.my-footer-social-link.rss {
    height: 43px;
    left: 178px;
    top: 10px;
    width: 43px;
}

.my-footer-social-link.github {
    height: 62px;
    left: 54px;
    top: -4px;
    width: 62px;
}

.my-footer-copyright {
    background-color: #03708c;
    color: #fff;
    padding: 15px 30px;
    text-align: center;
}

.my-footer-copyright-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.my-footer-copyright-text {
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
}

.my-footer-copyright-link {
    color: #fff;
    text-decoration: none;
}

.my-footer-content-div {
    background: #177ecd
}

.my-footer-svg-div {
    width: 100%;
    max-height: 200px;
    margin-bottom: -2px;
}

/* Media Query For different screens */
@media (min-width: 320px) and (max-width: 479px) {
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
    .my-footer-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1230px;
        padding: 40px 15px 649px;
        position: relative;
    }

    /* 不展示logo */
    .my-footer-logo {
        display: none;
    }
}

@media (min-width: 480px) and (max-width: 599px) {
    /* smartphones, Android phones, landscape iPhone */
    .my-footer-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1230px;
        padding: 40px 15px 738px;
        position: relative;
    }

    .my-footer-logo {
        padding-left: 177px; /* Qlogo 稍微偏移一点 */
        padding-right: 170px;
    }
}

@media (min-width: 600px) and (max-width: 800px) {
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
    .my-footer-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1230px;
        padding: 40px 15px 758px;
        position: relative;
    }


}

@media (min-width: 801px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */

}

@media (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */

}

@media (min-width: 1281px) {
    /* hi-res laptops and desktops */

}


@media (min-width: 760px) {
    .my-footer-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1230px;
        padding: 10px 15px 237px;
        position: relative;
    }


    .my-footer-content-column {
        /*五列的话 19.99 %*/
        width: 24.99%;
    }
}

@media (min-width: 568px) {

}

@media (min-width: 600px) and (max-width: 760px) {
    /* 在这里编写适用于小屏幕的样式 */
    .my-footer-logo {
        padding-left: 212px; /* Qlogo 稍微偏移一点 */
        padding-right: 204px;
    }
}

/* 页脚底部徽章对齐文字 */
.my-footer-copyright-text img {
  vertical-align: middle;
  margin: 0 2px;
}
.my-footer-copyright-text {
  line-height: 1.4;
}

以下 CSS 代码用于适配夜间模式，建议将其添加在 footer.styl 文件的末尾。您也可以根据需求，将其置于其他 CSS 文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 页脚波浪的颜色 */
[data-theme='dark'] .my-footer-wave-path {
    fill: #0f3858;
}
[data-theme='dark'] .my-footer-content-div {
    background-color: #0f3858;
}

/* 页脚海底的颜色 */
[data-theme='dark'] .my-footer-copyright {
    background-color: #2b3f49;
}
[data-theme='dark'] .my-footer-social-amoeba-path {
    fill: #2b3f49;
}

修改 _config.butterfly.yml

接下来，请打开主题配置文件 [根目录]/_config.butterfly.yml，并找到 custom_text:，写入以下配置（此处以本站页脚为例，具体内容可以在部署后根据自身情况对照修改）：

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
</div>

  copyright: false# --------------------------------------
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable:
    since:
  custom_text: |
    <div class="my-footer-svg-div">
      <svg class="my-footer-wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
      <path class="my-footer-wave-path" d="M851.8,100c125,0,288.3-45,348.2-64V0H0v44c3.7-1,7.3-1.9,11-2.9C80.7,22,151.7,10.8,223.5,6.3C276.7,2.9,330,4,383,9.8 c52.2,5.7,103.3,16.2,153.4,32.8C623.9,71.3,726.8,100,851.8,100z"></path>
      </svg>  
    </div>
    <div class="my-footer-content-div" >
    <div class="my-footer-content">
        <div class="my-footer-content-column">
            <div class="my-footer-logo">
                <a class="my-footer-logo-link" href="#">
                    <span class="hidden-link-text">LOGO</span>
                    <img src="/img/logo-light.png" style="height:100%; width:100%">
                </a>
            </div>
            <div class="my-footer-menu">
                <h2 class="my-footer-menu-name">开始</h2>
                <ul id="menu-get-started" class="my-footer-menu-list">
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        <a href="/about">关于站长</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        <a href="/info">发展历程</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="my-footer-content-column">
            <div class="my-footer-menu">
                <h2 class="my-footer-menu-name">快速链接</h2>
                <ul id="menu-company" class="my-footer-menu-list">
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        <a href="https://hexo.io/zh-cn/">Hexo</a> ⨯ <a href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a>
                    </li>
                    <li class="menu-item menu-item-type-taxonomy menu-item-object-category">
                        <a href="/categories">分类</a> | <a href="/archives">时间轴</a> | <a href="/charts">统计</a>
                    </li>
                    <li class="menu-item menu-item-type-taxonomy menu-item-object-category">
                        <a href="/rewards">支持</a> | <a href="/link">友链</a> | <a href="/tags">标签</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        <a href="/posts/dad06b07">同款页脚</a>
                    </li>
                </ul>
            </div>
  
        </div>

        <div class="my-footer-content-column">
            <div class="my-footer-menu">
                <h2 class="my-footer-menu-name">相关声明</h2>
                <ul id="menu-legal" class="my-footer-menu-list">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434">
                        <a href="/statement">隐私与使用政策</a>
                    </li>
                </ul>
            </div>
            <div class="my-footer-call-to-action">
                <h2 class="my-footer-call-to-action-title">联系本站</h2>
                <ul id="menu-legal" class="my-footer-menu-list">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434">
                        <a href="/comment">访客留言</a>
                    </li>
  
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434">
                        <a class="my-footer-call-to-action-link" href="mailto:[email protected]" target="_self">
                                sim<span style="display:none">@</span>ple@ios1.<span style="display:none">@</span>top
                        </a>
                    </li>
  
                </ul>
            </div>
  
        </div>
        <div class="my-footer-content-column">
            <ul id="menu-get-started" class="my-footer-menu-list">
                <li class="menu-item menu-item-type-post_type menu-item-object-product">
                    <a href="https://notbyai.fyi/" target="_blank" rel="external nofollow noopener noreferrer"><img class="img-not-ai" src="https://wkphoto.bj.bcebos.com/ac345982b2b7d0a2ddfebec9dbef76094b369aab.jpg" width="131" height="42" alt="Written by Human, Not by AI"></a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-product">
                    <a href="/posts/cc.html" ><img src="/img/by-nc-sa.png" alt="署名-非商业性使用-相同方式共享 4.0 国际"  style="height:42px; width:120px"></a>
                </li>
  
                <li class="menu-item menu-item-type-post_type menu-item-object-product">
                    ©2024-2025 By 𝓈𝒾𝓂𝓅𝓁ℯ 𝒷𝓁ℴℊ
                </li>
            </ul>
        </div>
  
        <div class="my-footer-social-links"> <svg class="my-footer-social-amoeba-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 54">
            <path class="my-footer-social-amoeba-path" d="M223.06,43.32c-.77-7.2,1.87-28.47-20-32.53C187.78,8,180.41,18,178.32,20.7s-5.63,10.1-4.07,16.7-.13,15.23-4.06,15.91-8.75-2.9-6.89-7S167.41,36,167.15,33a18.93,18.93,0,0,0-2.64-8.53c-3.44-5.5-8-11.19-19.12-11.19a21.64,21.64,0,0,0-18.31,9.18c-2.08,2.7-5.66,9.6-4.07,16.69s.64,14.32-6.11,13.9S108.35,46.5,112,36.54s-1.89-21.24-4-23.94S96.34,0,85.23,0,57.46,8.84,56.49,24.56s6.92,20.79,7,24.59c.07,2.75-6.43,4.16-12.92,2.38s-4-10.75-3.46-12.38c1.85-6.6-2-14-4.08-16.69a21.62,21.62,0,0,0-18.3-9.18C13.62,13.28,9.06,19,5.62,24.47A18.81,18.81,0,0,0,3,33a21.85,21.85,0,0,0,1.58,9.08,16.58,16.58,0,0,1,1.06,5A6.75,6.75,0,0,1,0,54H236C235.47,54,223.83,50.52,223.06,43.32Z"></path>
        </svg>
            <a class="my-footer-social-link github" href="https://github.com/66788zzz" target="_blank" rel="external nofollow noopener noreferrer">
                <span class="hidden-link-text">Github</span>
                <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path class="my-footer-social-icon-path" d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z "></path>
                </svg>
            </a>
            <a class="my-footer-social-link email" href="mailto:[email protected]" target="_blank" rel="external nofollow noopener noreferrer">
                <span class="hidden-link-text">Email</span>
                <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                    <path class="my-footer-social-icon-path" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/>
                </svg>
            </a>
            <a class="my-footer-social-link follow" href="https://t.me/mingzibucuo" target="_blank" rel="external nofollow noopener noreferrer">
                <span class="hidden-link-text">Telegram</span>
                <svg class="my-footer-social-icon-svg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M21 12.1l-7.8 6.9c-.1.1-.1.2-.1.3l-.3 2.7c0 .1-.1.1-.2 0l-1.2-4c-.1-.2 0-.4.2-.5l9.1-5.7c.1-.1.3.2.1.3z"/>
                  <path fill="currentColor" d="M16 2.2c-3.8 0-7.3 1.5-9.8 4s-4.1 6-4.1 9.8 1.5 7.3 4.1 9.8 6 4 9.8 4 7.3-1.5 9.8-4 4.1-6 4.1-9.8c0-7.6-6.2-13.8-13.9-13.8zm8.2 7.9l-2.8 13.6c-.1.6-.9.9-1.4.5l-4.3-3.2-2.2 2.2c-.4.4-1 .2-1.2-.3l-1.6-5-4.2-1.3c-.6-.2-.6-.9 0-1.1l16.7-6.5c.5-.2 1.2.3 1 .9z"/>
                </svg>
            </a>
            <a class="my-footer-social-link rss" href="/atom.xml" target="_blank" rel="external nofollow noopener noreferrer">
                <span class="hidden-link-text">RSS</span>
                <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                    <path class="my-footer-social-icon-path" d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/>
                </svg>
            </a>
  
        </div>
    </div>
    </div>
    <div class="my-footer-copyright">
        <div class="my-footer-copyright-wrapper">
            <p class="my-footer-copyright-text">
                <span>
                  <span id="timeDate">载入天数…</span>
                  <span id="times">载入时分…</span>
                </span>

                <script>
                  var now = new Date();
                    function createtime() {
                      var grt = new Date("2024-03-03T00:00:00");   // ← 修改你的建站时间
                      now.setTime(now.getTime() + 250);
                      var days = (now - grt) / 1000 / 60 / 60 / 24;
                      var dnum = Math.floor(days);
                      var hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
                      var hnum = Math.floor(hours);
                      if (String(hnum).length === 1) { hnum = "0" + hnum; }
                      var minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
                      var mnum = Math.floor(minutes);
                      if (String(mnum).length === 1) { mnum = "0" + mnum; }
                      document.getElementById("timeDate").textContent = "本网站已运行 " + dnum + " 天 ";
                      document.getElementById("times").textContent = hnum + " 小时 " + mnum + " 分";
                    }
                    setInterval(createtime, 250);
                    createtime();
                  </script>
                 | 
                <a target="_blank" href="https://cdnjs.com/" rel="external nofollow noreferrer noopener"><img class="nolazyload" src="https://img.shields.io/badge/CDN-cdnjs-yellow?style=flat&logo=cloudflare" title="本站使用 cdnjs 为静态资源提供 CDN 加速" alt="本站使用 cdnjs 为静态资源提供 CDN 加速"></a> <a target="_blank" href="https://pages.cloudflare.com/" rel="external nofollow noreferrer noopener"><img class="nolazyload" src="https://img.shields.io/badge/Hosted-Cloudflare%20Pages-orange?style=flat&logo=cloudflare" title="本站采用双线部署，默认线路托管于 Cloudflare Pages" alt="线路托管于 Cloudflare Pages"></a> <a target="_blank" href="https://github.com/" rel="external nofollow noreferrer noopener"><img class="nolazyload" src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管" alt="本站项目由Gtihub托管"></a>
                 |  
                <span>违法与不良信息举报邮箱 
                    si<span style="display:none">@</span>mple<span style="display:none">@</span>@ios1<span style="display:none">@</span>.top
                </span>
            </p>
        </div>
    </div>

  copyright: false

继续在主题配置文件 [根目录]/_config.butterfly.yml，找到 footer_img 配置项，将其值修改为 transparent，即`footer_img: transparent`，移除默认的页脚背景图。

还是在主题配置文件，通过 inject 配置项引入我们刚刚创建的 CSS 文件：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/footer.css">

完成以上配置并部署后，就能获得同款页脚。接下来，替换掉链接等等。若在修改社交图标中遇问题，可以问问ai或在评论区留言。

总结

至此，一个高度自定义的页脚就完成了。跟随本教程，一步步完成 CSS 创建、样式编写与配置注入，你便能打造出兼具美感与实用性的页脚。

现在，让它真正成为个人风格的一部分吧。如果在实践中还有任何疑问，欢迎随时交流讨论。

参考文章

🪧引用站外地址，不保证站点的可用性和安全性
Butterfly 自定义页脚（不修改主题源码）
wuanqin
🪧引用站外地址，不保证站点的可用性和安全性
Butterfly 文档(三) 主题配置
Jerry
🪧引用站外地址，不保证站点的可用性和安全性
# Add Github Badge
Akilar