biss/blog

Files

bisnsh 482d4bda57 update

2025-08-26 13:20:20 +08:00

19 KiB

Raw Blame History

title, abbrlink, tags, category, cover, series, summary, date

title	abbrlink	tags	category	cover	series	summary	date
自定义页脚（新）	c6143ad3	网站	建站手札	https://pic.biss.click/i/2025/08/26/542121.webp	webcustom	您提供的代码是一个自定义页脚的HTML和CSS代码要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。	2025-08-14 17:05:27

添加CSS

{% note warning 1 %} 修改有风险，注意备份 {% endnote %}

/*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>&nbsp;⨯&nbsp;<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>&nbsp;|&nbsp;<a href="/DO_NOT_render/cosmoscope/cosmoscope_trim.html">关系图</a>&nbsp;|&nbsp;<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>
                &nbsp;|&nbsp;<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>
                &nbsp;|&nbsp;&nbsp;
                <span>违法与不良信息举报邮箱&nbsp;
                  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>

参考

{% link Wuanqin的博客,Wuanqin,https://blog.uuanqin.top/p/91b7dad/ %}

19 KiB Raw Blame History Unescape Escape

添加CSS

注入

参考

19 KiB

Raw Blame History