前言

页脚是博客的重要组成部分，一个精心设计的页脚可以让博客更加专业。本文将介绍如何美化页脚，包括自定义文字、运行时间计时器和心跳动画效果。

一、页脚基础配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 页脚
footer:
  owner:
    enable: true
    since: 2026 # 建站年份
  custom_text: | # 自定义 HTML 内容
    <div style="text-align:center; padding:10px 0;">
      <p style="margin:5px 0; font-size:0.9em; color:#555;">
        <i class="fas fa-heart" style="color:#e74c3c; margin:0 5px;"></i>
        用代码编织梦想，用文字记录成长
        <i class="fas fa-heart" style="color:#e74c3c; margin:0 5px;"></i>
      </p>
      <p id="runtime" style="margin:8px 0; font-size:0.85em; color:#666;"></p>
      <p style="margin:5px 0; font-size:0.8em; color:#888;">
        Powered by <a href="https://hexo.io/" target="_blank" style="color:#667eea;">Hexo</a> &
        <a href="https://butterfly.js.org/" target="_blank" style="color:#667eea;">Butterfly</a>
      </p>
    </div>
  copyright: true # 显示版权信息
  framework:
    enable: true
    name: Butterfly
    version: true # 显示主题版本

注意: custom_text 中的 id="runtime" 是运行时间脚本的挂载点，后面会用到。

二、运行时间脚本

2.1 创建脚本文件

在 source/js/ 目录下创建 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
29
30
31
32
33
34
35
36
37
// 页脚运行时间脚本
function showRuntime() {
  // 建站时间（修改为你的实际建站日期）
  var createDate = new Date("2026-05-06T00:00:00");
  var now = new Date();
  var timeDiff = now.getTime() - createDate.getTime();
  var msPerDay = 24 * 60 * 60 * 1000;
  var days = Math.floor(timeDiff / msPerDay);
  var hours = Math.floor((timeDiff % msPerDay) / (60 * 60 * 1000));
  var minutes = Math.floor((timeDiff % (60 * 60 * 1000)) / (60 * 1000));
  var seconds = Math.floor((timeDiff % (60 * 1000)) / 1000);

  var runtimeElement = document.getElementById("runtime");
  if (runtimeElement) {
    runtimeElement.innerHTML =
      "已运行 " +
      days +
      " 天 " +
      hours +
      " 时 " +
      minutes +
      " 分 " +
      seconds +
      " 秒";
  }
}

// 页面加载完成后执行
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", function () {
    showRuntime();
    setInterval(showRuntime, 1000);
  });
} else {
  showRuntime();
  setInterval(showRuntime, 1000);
}

2.2 注入脚本

在 _config.butterfly.yml 的 inject.bottom 中引入脚本：

1
2
3
inject:
  bottom:
    - <script src="/js/runtime.js"></script>

提示: 修改 createDate 变量为你的实际建站日期。

三、页脚美化样式

在 source/css/custom.css 中添加页脚样式：

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* 页脚美化样式 */
#footer {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  color: #444;
  padding: 30px 0 20px;
  margin-top: 40px;
  border-top: 1px solid #e0e0e0;
}

#footer .footer-custom-text {
  margin-bottom: 15px;
}

#footer p {
  margin: 8px 0;
  line-height: 1.6;
}

#footer a {
  color: #667eea;
  text-decoration: none;
  border-bottom: 1px dashed rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

#footer a:hover {
  color: #764ba2;
  border-bottom-color: #764ba2;
}

/* 心跳动画 */
#footer .fa-heart {
  animation: heartbeat 1.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

四、暗色模式适配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 暗色模式页脚适配 */
[data-theme="dark"] #footer {
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%);
  color: #e0e0e0;
  border-top: 1px solid #444;
}

[data-theme="dark"] #footer a {
  color: #8b9cf7;
}

[data-theme="dark"] #footer a:hover {
  color: #a78bfa;
}

五、注入自定义资源

5.1 CSS 注入

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

5.2 JavaScript 注入

1
2
3
inject:
  bottom:
    - <script src="/js/runtime.js"></script>

注意: CSS 文件放在 head 中，JavaScript 文件放在 bottom 中，确保正确的加载顺序。

总结

通过自定义页脚内容和样式，可以让博客更加个性化。运行时间脚本可以展示博客的”年龄”，心跳动画则增添了活力。

参考资料: