页脚

博客页脚简单明了，提供 版权 、运行时间 、 徽章；想要添加其他内容，按照格式调整即可。

增加 DIV

  1. 修改_config.butterfly.yml 文件，增加 2 个 div
1
2
3
4
5
6
7
8
9
10
# --------------------------------------
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2023
  custom_text: <div id="runtime"></div><div id="ghbdages"></div>
  # Copyright of theme and framework
  copyright: false

增加 CSS

  1. 创建 source/css 目录，新建 custom.css 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div#runtime {
  font-size: 13px;
  font-weight: bold;
}

div#ghbdages_list {
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.github-badge {
  display: flex;
  align-items: center;
  margin-inline: 6px;
}

增加 JS

  1. 创建 runtime.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function createtime() {
  const now = new Date();
  const grt = new Date("06/01/2024 00:00:00"); // 网站诞生时间

  // 计算天、小时、分钟和秒
  const days = Math.floor((now - grt) / (1000 * 60 * 60 * 24));
  const hours = Math.floor(((now - grt) / (1000 * 60 * 60)) % 24)
    .toString()
    .padStart(2, "0");
  const minutes = Math.floor(((now - grt) / (1000 * 60)) % 60)
    .toString()
    .padStart(2, "0");
  const seconds = Math.floor(((now - grt) / 1000) % 60)
    .toString()
    .padStart(2, "0");

  // HTML 输出
  const currentTimeHtml = `
        <div>
            Survival ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒 
        </div>`;

  const runtime = document.getElementById("runtime");
  if (runtime) runtime.innerHTML = currentTimeHtml;
}

// 设置每秒调用函数
setInterval(createtime, 1000);
  1. 创建 ghbadages.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function renderBadge() {
  const currentTimeHtml = `
        <div id="ghbdages_list">
            <a class="github-badge" target="_blank" href="https://hexo.io/" title="hexo:7.3.0">
                <img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=hexo" alt="Static Badge">
            </a>
            <a class="github-badge" target="_blank" href="https://github.com/" title="github">
                <img src="https://img.shields.io/badge/Code-GitHub-181717?logo=GitHub&color=%23FF7102" alt="Static Badge">
            </a>
            <a class="github-badge" target="_blank" href="https://vercel.com/" title="vercel">
                <img src="https://img.shields.io/badge/Host-Vercel-%23F0D722?logo=Vercel" alt="Static Badge">
            </a>
            <a class="github-badge" target="_blank" href="https://analytics.sysio.ai/" title="umami">
                <img src="https://img.shields.io/badge/Analytics-Umami-%237FB100?logo=umami&logoColor=%237FB100" alt="Static Badge">
            </a>
        </div>`;

  const ghbdages = document.getElementById("ghbdages");
  if (ghbdages) {
    ghbdages.innerHTML = currentTimeHtml;
  }
}

window.onload = renderBadge;

效果图

hexo_butterfly_202411200751975.png