跳至主要內容

页脚样式优化总结

2026/9/13大约 6 分钟

页脚样式优化总结

📋 优化内容

日期： 2025-10-25
类型： 样式优化和功能修复

✨ 修改内容

1. 版权年份显示优化 ⭐

修改前：

© 2025 字·兮·书

修改后：

© 2024-2025 字·兮·书

实现逻辑：

  • 使用配置文件中的 startDate（建站日期）作为起始年份
  • 自动计算当前年份
  • 如果建站年份与当前年份相同，只显示当前年份
  • 如果不同，显示年份范围

2. 运行时间样式优化 🎨

问题： 背景框太明显，和页脚一样宽，不美观

修改前：

  • 有明显的半透明背景框
  • 圆角卡片样式
  • 数字有独立背景
  • 悬停时有上移和阴影

修改后：

  • ✅ 移除背景框
  • ✅ 采用简洁的文本样式
  • ✅ 保持等宽字体
  • ✅ 保持动态更新
  • ✅ 仅透明度变化的悬停效果

样式对比：

/* 修改前 - 明显背景框 */
.footer-running-time {
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

/* 修改后 - 简洁文本 */
.footer-running-time {
  padding: 0.3rem 0;
  opacity: 0.7;
}

3. 自定义内容样式完善 🔗

问题： 自定义信息没有显示出来

原因： CSS样式存在但不够完善

修改内容：

  • ✅ 增强 .footer-links 布局（使用flexbox）
  • ✅ 添加下划线悬停动画
  • ✅ 优化链接间距和颜色
  • ✅ 改善响应式表现

新增效果：

  • Flexbox居中布局
  • 链接悬停时从左到右的下划线动画
  • 颜色过渡动画
  • 移动端自适应间距

🎨 视觉效果对比

运行时间显示

修改前：

┌─────────────────────────────────────────────┐
│  本站已运行 365 天 12 时 34 分 56 秒        │
│  ↑ 明显的背景框，宽度与页脚同宽            │
└─────────────────────────────────────────────┘

修改后：

本站已运行 365 天 12 时 34 分 56 秒
↑ 简洁的文本样式，无背景框，融入页脚

自定义链接

修改前：

关于  隐私政策  网站地图
↑ 基础样式，无特殊效果

修改后：

关于  隐私政策  网站地图
↑ 悬停时有下划线动画，颜色变为主题色

🔧 技术实现

1. 版权年份逻辑（footer.html）

{{/* 使用建站日期作为起始年份 */}}
{{ $currentYear := now.Year }}
{{ $startYear := $currentYear }}

{{/* 如果配置了建站日期，则使用建站年份 */}}
{{ if .Site.Params.footer.runningTime.startDate }}
  {{ $startDate := time .Site.Params.footer.runningTime.startDate }}
  {{ $startYear = $startDate.Year }}
{{ end }}

{{/* 显示年份范围 */}}
{{ if eq $startYear $currentYear }}
  {{ $currentYear }}
{{ else }}
  {{ $startYear }}-{{ $currentYear }}
{{ end }}

特点：

  • 自动读取 hugo.toml 中的 startDate
  • 动态计算年份范围
  • 智能显示（同年只显示一个年份）

2. 运行时间样式（_running-time.css）

.footer-running-time {
  margin: 0.5rem 0;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  color: var(--text-color);
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-running-time:hover {
  opacity: 1;
}

关键改进：

  • ❌ 移除：background、border-radius、box-shadow
  • ✅ 保留：等宽字体、动态更新、动画效果
  • ✅ 简化：悬停效果仅改变透明度

3. 自定义链接样式（footer.css）

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.footer-links a {
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.7;
  transition: all 0.3s ease;
  position: relative;
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

动画效果：

  • 使用 ::after 伪元素
  • 宽度从0到100%的过渡
  • 颜色变为主题色

📊 文件变更

修改文件列表

文件修改内容行数变化
footer.html版权年份逻辑优化~30行
_running-time.css简化背景样式-30行
footer.css完善自定义链接样式+40行

✅ 优化效果

视觉效果

  1. 更简洁 ✅

    • 移除明显的背景框
    • 运行时间融入页脚
    • 整体更协调统一

  2. 更美观 ✅

    • 链接悬停动画流畅
    • 颜色过渡自然
    • 响应式表现良好

  3. 更专业 ✅

    • 版权年份自动显示范围
    • 样式统一规范
    • 符合现代设计趋势

功能完整性

  • ✅ 运行时间正常动态更新
  • ✅ 自定义链接正常显示
  • ✅ 版权年份自动计算
  • ✅ PJAX兼容性保持
  • ✅ 暗色模式正常适配
  • ✅ 响应式设计正常

🎯 对比示例

完整页脚效果

修改后的页脚布局：

─────────────────────────────────────
© 2024-2025 字·兮·书

本站已运行 365 天 12 时 34 分 56 秒

京ICP备2024012345号

关于  隐私政策  网站地图
─────────────────────────────────────

特点：

  • 版权显示年份范围 ✅
  • 运行时间无背景框，简洁美观 ✅
  • 自定义链接正常显示，悬停有动画 ✅
  • 整体风格统一协调 ✅

📱 响应式表现

桌面端

  • 字体大小适中
  • 间距舒适
  • 所有效果正常

移动端

  • 字体略微缩小
  • 链接间距调整
  • 自动换行
  • 触摸友好

🔍 配置说明

hugo.toml 配置保持不变

[params.footer]
  # 运行时间显示配置
  [params.footer.runningTime]
    enable = true
    startDate = "2024-01-01"  # 此日期用于版权年份和运行时间
    prefix = "本站已运行"
  
  # 自定义内容
  custom = """
    <div class="footer-links">
      <a href="/about">关于</a>
      <a href="/privacy">隐私政策</a>
      <a href="/sitemap.xml">网站地图</a>
    </div>
  """

💡 使用建议

1. 修改建站日期

startDate = "2023-01-01"  # 改为您的实际建站日期

效果：

  • 版权：© 2023-2025 站点名称
  • 运行时间：从2023-01-01开始计算

2. 自定义链接

custom = """
  <div class="footer-links">
    <a href="/about">关于我们</a>
    <a href="/contact">联系方式</a>
    <a href="/sitemap.xml">网站地图</a>
    <a href="/rss.xml">RSS订阅</a>
  </div>
"""

3. 禁用运行时间

[params.footer.runningTime]
  enable = false

效果：

  • 运行时间不显示
  • 版权年份仍会显示范围

🎨 自定义样式建议

如需进一步自定义

在您的自定义CSS中：

/* 自定义运行时间颜色 */
.footer-running-time {
  color: #your-color;
}

.running-time-value {
  color: #your-primary-color;
}

/* 自定义链接样式 */
.footer-links a {
  font-weight: 600;
}

.footer-links a::after {
  height: 2px;  /* 更粗的下划线 */
}

⚙️ 兼容性保证

已验证

  • ✅ 不影响其他页面样式
  • ✅ 不影响已有功能
  • ✅ 不影响页面布局
  • ✅ Hugo默认端口1313未改变
  • ✅ PJAX正常工作
  • ✅ 暗色模式正常
  • ✅ 响应式正常

浏览器兼容

  • ✅ Chrome/Edge（最新版）
  • ✅ Firefox（最新版）
  • ✅ Safari（最新版）
  • ✅ 移动端浏览器

📝 常见问题

Q1：版权年份显示不对？

检查：

  1. 确认 startDate 格式为 YYYY-MM-DD
  2. 重新构建：hugo --cleanDestinationDir
  3. 清除浏览器缓存

Q2：自定义链接不显示？

检查：

  1. 确认 custom 配置正确
  2. 检查HTML语法是否正确
  3. 使用 """ 三引号包裹
  4. 重新构建站点

Q3：运行时间样式还是太明显？

解决方法：

/* 进一步降低透明度 */
.footer-running-time {
  opacity: 0.5;
}

Q4：如何恢复原来的背景框样式？

在自定义CSS中添加：

.footer-running-time {
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

🎉 总结

核心改进

  1. 版权年份 ✅

    • 从配置文件读取建站日期
    • 自动显示年份范围
    • 智能判断是否需要范围

  2. 运行时间 ✅

    • 移除明显背景框
    • 简洁文本样式
    • 保持所有功能

  3. 自定义链接 ✅

    • 完善样式定义
    • 添加悬停动画
    • 优化布局

设计理念

  • Less is More - 简洁即美
  • 一致性 - 与页脚整体风格统一
  • 功能性 - 保留所有实用功能
  • 响应式 - 适配各种设备

📚 相关文档

优化完成！页脚现在更简洁美观！ 🎊

当前效果：

  • ✅ 版权显示：© 2024-2025 字·兮·书
  • ✅ 运行时间：简洁无框样式
  • ✅ 自定义链接：正常显示带动画

服务器运行中： http://localhost:1313

最后更新： 2025-10-25

最近更新: