效果预览

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

在主题文件夹的 \source\js 目录下添加 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"> 更改为你喜欢的年/天/日/时/分/秒对应数字的显示颜色

在主题 _config.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>

配置底部徽标

使用 shields.io 生成徽标
- 点击 Get started
- 点击右侧 + Show optional parameters 展开可选参数后按照你的需求填写以下参数
  
  badgeContent: 徽标内容，按照 “徽标类型名-徽标名-徽标颜色” 的格式填写，用 “-“ 分隔，例如：Frame-Hexo-blue
  style: 徽标风格，例如：选择 flat
  logo: 徽标logo名，例如：hexo
- 点击下方 Execute 生成徽标，上述配置预览效果：
- 复制 URL

修改主题 _config.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