第7篇博客: Butterfly主题底部页脚栏美化

前言

Butterfly初始的页脚Footer较为单调，因此我们可以对其进行调整，美化我们的博客页面。本文将详细讲述博客底部运行时间以及Github徽标的制作和添加，大家也可以根据自己的喜好进行修改

内容参考：

Leonus

https://blog.leonus.cn/

效果如下：

欢迎阅读第7篇博客，希望你有所收获！

博客底部运行时间

注意：部分代码为了区分，最 前面的 加号代表增加，减号代表删除，是为了代码高亮显示，因此粘贴代码后记得删除，删除后不需要再补上空格

添加盒子
首先在底部增加盒子，用来盛放时间
在主题配置文件_config.butterfly.yml中找到footer下面的custom_text,添加如下代码:

footer:
  owner:
    enable: false
    since: 2021
-  custom_text: 
+  custom_text: <div id="runtime" style="display:inline-block"></div>
  copyright: false # Copyright of theme and framework

添加JS
在Blog\themes\butterfly\source\js下新建runtime.js，并添加如下代码：

setInterval(() => {
    // let create_time = Math.round(new Date('2021-10-15 00:00:00').getTime() / 1000); //在此行修改建站时间
    // 有苹果用户发现safari浏览器不能正常运行，百度了一下发现是格式化的问题，改成下面这种应该就可以了。感谢反馈。
    let create_time = Math.round(new Date('2021/10/15 00:00:00').getTime() / 1000); //在此行修改建站时间
    let timestamp = Math.round((new Date().getTime()) / 1000);
    let second = timestamp - create_time;
    let time = new Array(0, 0, 0, 0, 0);

    var nol = function(h) {
        return h > 9 ? h : '0' + h;
    }
    if (second >= 365 * 24 * 3600) {
        time[0] = parseInt(second / (365 * 24 * 3600));
        second %= 365 * 24 * 3600;
    }
    if (second >= 24 * 3600) {
        time[1] = parseInt(second / (24 * 3600));
        second %= 24 * 3600;
    }
    if (second >= 3600) {
        time[2] = nol(parseInt(second / 3600));
        second %= 3600;
    }
    if (second >= 60) {
        time[3] = nol(parseInt(second / 60));
        second %= 60;
    }
    if (second >= 0) {
        time[4] = nol(second);
    }
    let currentTimeHtml = ""
    if (time[0] != 0) {
        currentTimeHtml += time[0] + ' YEAR '
    }
    currentTimeHtml += time[1] + ' DAYS ' + time[2] + ' : ' + time[3] + ' : ' + time[4];
    document.getElementById("runtime").innerHTML = currentTimeHtml;
}, 1000);

添加CSS
在Blog\themes\butterfly\source\css下新建runtime.css,并添加如下代码：

div#runtime {
    width: fit-content;
    color: #fff;
    padding: 0 30px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    margin: 0px 5px 0px 5px;
}

[data-theme="dark"] div#runtime {
    color: #28b4c8;
    box-shadow: 0 0 5px rgba(28, 69, 218, 0.71);
}

上传测试

hexo clean
hexo g
hexo d

Github徽标制作添加

通过shields.io在线生成
进入网站后点击Get started进入制作
之后根据左侧边栏提示进行制作

另外，网站还提供多种属性的调试, 使用时 直接在框内填写内容，之后点击Execute查看效果即可
比如在此制作徽标, 可以这样填写：

各种属性说明如下：
shields.io提供直接在URL内添加样式属性的功能。使用?引用，使用&连接各属性

属性	说明	示例
style	徽标样式, 默认提供了五种样式: plastic,flat,flat-square,for-the-badge,social	?style=flat-square
label	覆盖默认的左侧文本 (空格或特殊字符需要转URL编码!)	?label=healthinesses
logo	给左侧标签前插入图标可以访问simpleicons查询图标	?logo=Hexo
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-cd1723?logo=Hexo&logoColor=ed7eee&labelColor=ccda3d&label=框架">

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

博客页脚美化

成功实现上述运行时间和徽标制作之后，我们可以制作专属自己的博客页脚，主题配置文件_config.butterfly.yml中找到footer下面的custom_text, 修改成如下代码:

# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2024.3
  custom_text:  
                <a style="display:inline-block">
                  <img src="https://img.shields.io/badge/93%20%26%20%E5%8D%9A%E5%AE%A2-%E8%90%A5%E4%B8%9A%E4%B8%AD-6adea8?style=social&logo=alienware&logoColor=cd3b46" title="欢迎光临~" alt="img">
                </a> <br>
                <div id="runtime" style="display:inline-block"></div>
                <p>
                  <a style="margin-inline:5px"target="_blank" href="https://hexo.io/">
                    <img src="https://img.shields.io/badge/Frame-Hexo-blue?style=plastic&logo=hexo" title="博客框架为 Hexo" alt="HEXO">
                  </a>
                  <a style="margin-inline:5px"target="_blank" href="https://butterfly.js.org/">
                    <img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=plastic&logo=bitdefender" title="主题采用 Butterfly" alt="Butterfly">
                  </a>
                  <a style="margin-inline:5px"target="_blank" href="https://www.jsdelivr.com/">
                    <img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=plastic&logo=jsDelivr" title="本站使用jsDelivr为静态资源提供CDN加速" alt="jsDelivr">
                  </a>
                  <a style="margin-inline:5px"target="_blank" href="https://vercel.com/">
                    <img src="https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=plastic&logo=Vercel" title="默认线路托管于Vercel" alt="Vercel">
                  </a>
                  <a style="margin-inline:5px"target="_blank" href="https://github.com/">
                    <img src="https://img.shields.io/badge/Source-Github-d021d6?style=plastic&logo=GitHub" title="本站项目由 GitHub 托管" alt="GitHub">
                  </a>
                  <a style="margin-inline:5px"target="_blank"href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
                    <img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=plastic&logo=Claris" alt="img" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可">
                  </a>
                </p>
  copyright: false # Copyright of theme and framework