Butterfly主题之页脚美化

一、配置运行时间和动态版权图标

1.添加js文件

info 提示块标签

首先确保在搭建博客的时候已经将theme->butterfly文件夹下的_config.yml文件复制到项目根目录下，并重命名为 _config.butterfly.yml，如下图所示：

在此基础上，在source目录下创建scripts文件夹，然后在其中新建一个xxx.js，内容如下：


//版权图标动态显示
document.addEventListener('DOMContentLoaded', function() {
    const currentYear = new Date().getFullYear();
    const copyrightElement = document.querySelector('.copyright');
    if (copyrightElement) {
        copyrightElement.innerHTML = `©网站起始时间 - ${currentYear} <i class="fa-fw fas fa-star fa-beat" style="color: #ffff00;"></i> By 博主名`;
    }
});

// 运行时间动态显示
function showDateTime() {
    const timeDisplay = document.getElementById('span_dt_dt');
    if (!timeDisplay) return;

    const startTime = new Date("2024-09-05T15:41:23");
    const now = new Date();
    const elapsedMilliseconds = now - startTime;
    const seconds = Math.floor(elapsedMilliseconds / 1000);

    const oneYearInSeconds = 365 * 24 * 60 * 60;
    if (seconds < oneYearInSeconds) {
        const days = Math.floor(seconds / (24 * 60 * 60));
        const remainingSecondsAfterDays = seconds % (24 * 60 * 60);
        const hours = Math.floor(remainingSecondsAfterDays / (60 * 60));
        const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60);
        const minutes = Math.floor(remainingSecondsAfterHours / 60);
        const sec = remainingSecondsAfterHours % 60;

        timeDisplay.innerHTML = `
            <span style="color:#ffff00">${days}</span> 天 
            <span style="color:#ffff00">${hours}</span> 时 
            <span style="color:#ffff00">${minutes}</span> 分 
            <span style="color:#ffff00">${sec}</span> 秒
        `;
    } else {
        const years = Math.floor(seconds / oneYearInSeconds);
        const remainingSecondsAfterYears = seconds % oneYearInSeconds;
        const days = Math.floor(remainingSecondsAfterYears / (24 * 60 * 60));
        const remainingSecondsAfterDays = remainingSecondsAfterYears % (24 * 60 * 60);
        const hours = Math.floor(remainingSecondsAfterDays / (60 * 60));
        const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60);
        const minutes = Math.floor(remainingSecondsAfterHours / 60);
        const sec = remainingSecondsAfterHours % 60;

        timeDisplay.innerHTML = `
            <span style="color:#ffff00">${years}</span> 年 
            <span style="color:#ffff00">${days}</span> 天 
            <span style="color:#ffff00">${hours}</span> 时 
            <span style="color:#ffff00">${minutes}</span> 分 
            <span style="color:#ffff00">${sec}</span> 秒
        `;
    }

    setTimeout(showDateTime, 1000);
}

document.addEventListener('DOMContentLoaded', () => {
    const frameworkInfo = document.querySelector('.framework-info');
    if (frameworkInfo) {
        frameworkInfo.innerHTML = '本站已运行<span id="span_dt_dt"></span>';
    }
    showDateTime();
});

将网站起始时间改为你自己的网站的起始时间
从 Font Awesome 图标库中选择你喜欢的图标样式替换 fas fa-star fa-beat 和 color: #ffff00
将博主名改为自己的名字
将 2024-09-05T15:41:23 更改为你自己的网站的起始时间
将 <span style="color:#ffff00"> 更改为你喜欢的年/天/日/时/分/秒对应数字的显示颜色

2.引入xxx.js文件

在主题_config.butterfly.yml文件中引入上面你写好的xxx.js

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
    - <script src="/js/xxx.js"></script>

二、配置底部图标

1.使用 shields.io 生成徽标

点击 Get started
点击右侧 + Show optional parameters 展开可选参数后按照你的需求填写以下参数

badgeContent: 徽标内容，按照 “徽标类型名-徽标名-徽标颜色” 的格式填写，用 “-“ 分隔，例如：Frame-Hexo-blue
style: 徽标风格，例如：选择 flat
logo: 徽标logo名，例如：hexo
点击下方 Execute 生成徽标，上述配置预览效果为：
复制URL

2.配置 _config.butterfly.yml文件

修改_config.butterfly.yml 文件中的 Footer Settings

# --------------------------------------
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since:
  custom_text:
  	<p>
    <a style="margin-inline:5px"target="_blank" href="xxx"><img src="xxx" title="xxxx"></a>
    <a style="margin-inline:5px"target="_blank" href="xxx"><img src="xxx" title="xxxx"></a>
    <a style="margin-inline:5px"target="_blank" href="xxx"><img src="xxx" title="xxxx"></a>
    </p>

  # Copyright of theme and framework
  copyright: true

href: 徽标超链接目标的URL，即鼠标点击徽标后跳转的网址
img src: 徽标显示样式的URL，即之前复制的URL
title: 徽标的标题，即鼠标停留在徽标上时显示的提示文本

Butterfly主题博客之页脚美化