自定义页脚（新）
文章导读
摘要由 Qwen 生成
您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。
ARTICLE SERIES
第 9 / 14 篇 博客定制手记
注意：本文为早期 Hexo / Butterfly 魔改记录，本站现已迁移到 Astro，相关代码、路径或插件可能已经失效，仅作历史参考。
添加CSS
修改有风险，注意备份
/*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;
}
/* 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;
}
}
/* 页脚波浪的颜色 */
[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，写入以下内容（以目前我的页脚为例，具体内容请自行修改）：
# Footer Settings
# --------------------------------------
footer:
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="/image/footer/qlogo_white_no_words.png" style="height:40%; width:40%">
</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="/pages/about.html">关于本站</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="/archives/">时间轴</a> | <a href="/DO_NOT_render/cosmoscope/cosmoscope_trim.html">关系图</a> | <a href="/pages/categories/">分类</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-product">
<a href="/p/91b7dad/">同款页脚</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-product">
<a href="https://www.foreverblog.cn/" rel="noopener external nofollow noreferrer" target="_blank" > <img class="img-foreverblog" src="/image/footer/forever_logo_en_default_white.png" alt="" style="width:auto;height:21px;margin-top:6px"> </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="/pages/privacy.html">隐私政策</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="/DO_NOT_render/wechatOA/index.html">微信公众号</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:uuanqin@uuanqin.top" target="_self">
uuan<span style="display:none">@</span>qi<!-- >@ -->n@<span style="display:none">@</span>uu<!-- >@. -->an<span style="display:none">@</span>qin.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="/image/footer/Written-By-Human-Not-By-AI-Badge-white.svg" alt="Written by Human, Not by AI"></a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-product">
<a href="/pages/cc.html" ><img src="/image/footer/by-nc-sa.svg" alt="署名-非商业性使用-相同方式共享 4.0 国际"></a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-product">
©2022-2025 By wuanqin
</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/uuanqin" 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:uuanqin@uuanqin.top" 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://app.follow.is/share/users/uuanqin" target="_blank" rel="external nofollow noopener noreferrer">
<span class="hidden-link-text">Follow</span>
<svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path class="my-footer-social-icon-path" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
</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">
<a href="https://beian.miit.gov.cn/" rel="noopener external nofollow noreferrer"><img class="icp-icon" src="/image/footer/icp.ico"><span>津ICP备2022002156号-1</span></a>
| <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011202000621" rel="noopener external nofollow noreferrer"><img class="icp-icon" src="/image/footer/beian_logo.png"><span>津公网安备 12011202000621号</span></a>
|
<span>违法与不良信息举报邮箱
j<span style="display:none">@</span><!-- >@ -->b@<span style="display:none">@</span>uu<!-- >@. -->an<span style="display:none">@</span>q.in
</span>
</p>
</div>
</div>
Comments
自定义页脚（新）