本站同款 Butterfly 自定义页脚

系列文章

预览效果

教程开始

打开主题目录：[BlogRoot]/themes/butterfly/layout/includes/footer.pug修改原本的代码为以下代码：

#footer-wrap
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t 格言🧬
          .bg-ad
            div
              | 再看看那个光点，它就在这里，这是家园，这是我们 —— 你所爱的每一个人，你认识的每一个人，你听说过的每一个人，曾经有过的每一个人，都在它上面度过他们的一生✨
            .btn-xz-box
              a.btn-xz(href='javascript:toRandomPost()') 点击开启星辰之旅
        .t-t-r
          p.ft-t.t-l-t 猜你想看💡
          ul.ft-links
            li
              a(href='https://blog.3ms.run/archives/Hexo-Github-Vercel-DeploymentTutorial.html') 建站指南
              a(href='https://blog.3ms.run/link') 网址导航
            li
              a(href='https://blog.3ms.run/') 来杯咖啡
              a(href='https://blog.3ms.run/comments') 留点什么
            li
              a(href='https://blog.3ms.run/about') 关于博主
              a(href='https://fe32.top/archives/') 文章归档
            li
              a(href='https://blog.3ms.run/categories') 文章分类
              a(href='https://blog.3ms.run/tags') 文章标签
            li
              a(href='https://blog.3ms.run/') 我的相册
              a(href='https://blog.3ms.run/') 我的追番
            li
              a(href='https://blog.3ms.run/') 一些特效
              a(href='https://blog.3ms.run/') 一些壁纸
    .ft-item-2
      p.ft-t 推荐友链
      .ft-img-group
        .img-group-item
          a(href='https://blog.3ms.run/')
            img(src='/img/avatar-icon.jpg' alt=' ZeroLatency' title='ZeroLatency')
        .img-group-item
          a(href='https://www.muooy.com/')
            img(src='https://www.muooy.com/favicon.png' alt='大理鱼儿' title='大理鱼儿')
        .img-group-item
          a(href='https://blog.elykia.cn/' rel="external nofollow noreferrer noopener")
            img(src='https://bu.dusays.com/2024/10/25/671b2438203a6.gif' alt='Elykia' title='Elykia')
        .img-group-item
          a(href='https://blog.fiveth.cc/' rel="external nofollow noreferrer noopener")
            img(src='https://p.fiveth.cc/avatar.png' alt='Fiveth' title='Fiveth')
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
    else
      .copyright!= `&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

你需要添加的代码为#ft整个 div，注意在缩进上与主题的几个if对齐。这里你可以根据自己的需求修改以上内容等，例如【说点什么】、自定义底部导航链接等，【推荐友链】的图片尺寸建议 1:1。

将以下代码复制到自定义的css中，不会自定义css的请阅读：Butterfly主题博客魔改美化教程总览（一）

:root {
    
    --daliyuer-border: #e3e3e3;
    --font-bg: #fff;
    --font-color: #4c4948;
    --daliyuer-bd-rd: 6px;
}
[data-theme='dark'] {
    --font-bg: #0d0d0d;
    --daliyuer-border: #e3e3e3;
    --font-color: rgba(255, 255, 255, 0.7);
}

/* 自定义底部  start */

#footer {
    border-top: 1px solid var(--daliyuer-border);
    background-color: var(--font-bg) !important;
}

/* #footer-wrap {
    background-color: var(--font-bg);
} */


#footer-wrap,
#footer-wrap a {
    color: var(--font-color)
}

#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: var(--font-color) !important;
    text-align: left;
    flex-wrap: wrap;
}

.ft-item-1,
.ft-item-2 {
    display: flex;
    height: 100%;
    padding: 10px 14px;
}

.ft-item-1 {
    flex-direction: column;
    flex: 2;
}

.ft-item-2 {
    flex: 1;
    flex-direction: column;
}

.t-top {
    display: flex;
}

.t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
}

.t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
}

.btn-xz-box {
    margin-top: 10px;
}

.btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--daliyuer-white) !important;
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
    cursor: pointer !important;
    border-radius: var(--daliyuer-bd-rd);
}

.btn-xz:hover {
    text-decoration: none !important;

}

.btn-xz-box:hover .btn-xz {
    background-color: var(--btn-hover-color);
}

.t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
}

.ft-links li a {
    display: inline-block !important;
    width: 50%;
    cursor: pointer !important;
}

.ft-links li a:hover {
    text-decoration: none !important;
    color: var(--btn-hover-color) !important;
}

.ft-item-2 .ft-img-group {
    width: 100%;
}

.ft-t {
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
}

.t-l-t {
    padding-left: 14px;
}

.ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
}

.ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer !important;
}

.ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
}

@media screen and (max-width: 768px) {

    .ft-item-1 {
        flex-basis: 100% !important;
    }

    .ft-item-2 {
        flex-basis: 100% !important;
    }

    .t-top .t-t-l .bg-ad {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .t-top {
        flex-wrap: wrap;
    }

    .t-top .t-t-l {
        flex-basis: 100% !important;

    }

    .t-top .t-t-r {
        margin-top: 16px;
        flex-basis: 100% !important;
    }
}

/* 自定义底部  End */

css 中的--font-bg，--daliyuer-border，font-color颜色改成你自己的。

页脚GitHub徽标

需要使用的的网站：

github徽标生成网站：shields
图标查询网站：simpleicons

具体步

通过shields.io在线生成。
- label:标签，徽标左侧内容
- message:信息，徽标右侧内容
- color:色值,支持支持十六进制、rgb、rgba、hsl、hsla和 css 命名颜色。十六进制记得删除前面的#号

输入相关信息后，点击make badge即可得到徽标的URL。可以用img标签引用，写法简单。不过正式写法建议用object标签引用，写法示例如下。

<!-- label=Frame，Message=Hexo，color=blue -->
https://img.shields.io/badge/Frame-Hexo-blue
<!-- 在页面上可以使用img标签来引用 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue">
<!-- 部分属性例如link需要用object标签来引用 -->
<object data="https://img.shields.io/badge/Frame-Hexo-blue?link=https://hexo.io"></object>

拓展写法示例

仅仅如此肯定是不能令人满意的，还可以继续添加样式。shields.io提供直接在URL内添加样式属性的功能。使用?引用，使用&连接各属性。

属性	说明	示例
style	徽标样式，默认提供了五种样式： plastic,flat,flat-square, for-the-badge,social	?style=flat-square
label	覆盖默认的左侧文本（空格或特殊字符需要转URL编码！）	?label=healthinesses
logo	给左侧标签前插入图标可以访问simpleicons查询图标	?logo=data:image/png;base64,url
logo	自定义图标，限制较多，不推荐
logoColor	设置徽标的颜色（支持十六进制、rgb、rgba、hsl、hsla和 css 命名颜色）。支持命名徽标，但不支持自定义徽标。	?logoColor=violet
logoWidth	给图标提供的水平空间	?logoWidth=40
link	徽标指向的链接，此时需要用object标签引用才能生效写法看示例代码	?link=http://example.com
labelColor	左侧部分背景色，（支持十六进制、rgb、rgba、hsl、hsla和 css 命名颜色）	?labelColor=abcdef或者?colorA=abcdef
color	右侧部分背景色，（支持十六进制、rgb、rgba、hsl、hsla和 css 命名颜色）	?color=fedcba或者?colorB=fedcba

代码：

<!-- 普通样式 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue">
<!-- 五种style预览 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&style=plastic">
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&style=flat">
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&style=flat-square">
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&style=for-the-badge">
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&style=social">
<!-- 添加图标和自定义label -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&label=框架">
<!-- 添加图标和图标宽度 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&logoWidth=30">
<!-- 图标、label、message三部分颜色自定义 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&label=框架&logoColor=violet&labalColor=#1fd041&color=rgb(222, 31, 31)">
<!-- 给标签添加链接 -->
<object data="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo&link=https://hexo.io/&https://hexo.io/zh-cn/docs/"></object>
<!-- 也可以通过嵌套a标签来实现添加链接 -->
<a target="_blank" href="https://hexo.io" title="框架采用Hexo"><img src="https://img.shields.io/badge/Frame-Hexo-blue"></a>

样式预览：

普通样式：
五种style预览：
添加图标和自定义label：
添加图标和图标宽度：
图标、label、message三部分颜色自定义：

给标签添加链接：
用a标签嵌套img标签：

在主题配置文件_config.butterfly.yml的footer配置项中添加徽标。为了不至于太过紧凑，用 (空格的转义字符)隔开。

footer:
  owner:
    enable: true
    since: 2024
-  custom_text:
+  custom_text: |
    <p>
    <a target="_blank" href="https://hexo.io/" rel="external nofollow noreferrer noopener"><img class="nolazyload"
            src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo" alt="博客框架为Hexo"></a>&nbsp;
    <a target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly" rel="external nofollow noreferrer noopener"><img class="nolazyload"
            src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender"
            title="主题采用butterfly" alt="主题采用butterfly"></a>&nbsp;
    <a target="_blank" href="#" rel="external nofollow noreferrer noopener"><img class="nolazyload"
            src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr"
            title="本站使用JsDelivr为静态资源提供CDN加速" alt="本站使用JsDelivr为静态资源提供CDN加速"></a> &nbsp;
    <a target="_blank" href="https://vercel.com/" rel="external nofollow noreferrer noopener"><img class="nolazyload"
            src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel"
            title="本站采用双线部署，默认线路托管于Vercel" alt="线路托管于Vercel"></a>&nbsp;
    <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>&nbsp;
    <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer noopener"><img class="nolazyload"
            src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris"
            title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" alt="知识共享署名"></a>
    </p>
  # Copyright of theme and framework
  copyright: false