2026-03-02 博客 hugo-teek +4 底部配置页脚配置备案信息网站统计 2867 字 12 分钟 -- 次

底部配置说明

最后更新于: 2026-03-02 04:47:45

🦶 底部栏配置概述

Hugo-Teek 主题提供高度可定制的站点底部栏（Footer），支持服务徽章展示、版权信息、ICP备案、不蒜子网站统计、个性化箴言等多种功能。

✨ 底部栏特性

🎨 设计特性

服务徽章：展示技术栈和服务提供商图标
版权信息：自动计算年份范围，支持自定义后缀
ICP备案：内置备案号展示，支持点击跳转查询
不蒜子统计：显示今日/昨日/本月访客数和访问量
箴言展示：支持展示个性化签名或座右铭
动物装饰：可爱的动物装饰图片

⚙️ 配置特性

分层配置：内容与样式分离，便于主题切换
灵活开关：所有功能均提供独立启用/禁用选项
自动合并：通过 hugo-teek-tools 自动合并配置
多主题支持：不同主题可拥有独立的UI展示配置

📁 配置文件路径

Hugo-Teek 采用分层配置结构，底部栏相关配置文件位于以下位置：

通用内容配置📄 服务徽章配置📄 主题UI配置📄 统计服务配置📄

1# hugo-teek-site/config/teek-plugins/footer.toml
2# 包含版权、备案号、箴言等内容层配置
3# 所有主题共用，推荐在此配置基础信息

1# hugo-teek-site/data/footerServices.yaml
2# 包含服务徽章列表（Hugo、Twikoo、CDN等）
3# 控制底部服务图标展示

1# hugo-teek-site/config/themes/hugo-teek/params.toml
2# 包含 show_services 等UI控制配置
3# 控制底部栏的显示元素

1# hugo-teek-site/config/themes/hugo-teek/services.toml
2# 包含不蒜子统计等服务配置

配置优先级

1配置合并顺序（优先级从低到高）：
21️⃣ config/themes/{theme}/params.toml（主题默认UI配置）
32️⃣ config/teek-plugins/footer.toml（通用内容配置）
43️⃣ data/footerServices.yaml（服务徽章数据）
54️⃣ config/themes/{theme}/services.toml（统计服务配置）
65️⃣ 运行时通过管理后台修改的配置

🎖️ 服务徽章配置

服务徽章数据文件

服务徽章展示在底部栏顶部，以图标形式展示站点使用的技术栈和服务：

footerServices.yaml🎖️ 字段说明🎖️

 1# hugo-teek-site/data/footerServices.yaml
 2services:
 3  - name: "Hugo"
 4    badge: "https://img.xxdevops.cn/blog/badge/Frame-Hugo.svg"
 5    url: "https://gohugo.io/"
 6    title: "原主题基于 Hugo 框架"
 7    
 8  - name: "Copyright"
 9    badge: "https://img.xxdevops.cn/blog/badge/Copyright.svg"
10    url: "https://creativecommons.org/licenses/by-nc-sa/4.0/"
11    title: "内容采用 CC BY-NC-SA 4.0 国际许可协议进行许可"
12    
13  - name: "Twikoo"
14    badge: "https://img.xxdevops.cn/blog/badge/Comments-Twikoo.svg"
15    url: "https://twikoo.js.org/"
16    title: "本站评论系统使用 Twikoo"
17    
18  - name: "Flexsearch"
19    badge: "https://img.xxdevops.cn/blog/badge/Search-Flexsearch.svg"
20    url: "https://github.com/nextapps-de/flexsearch"
21    title: "本站搜索服务使用 Flexsearch"
22    
23  - name: "Tencent Cloud"
24    badge: "https://img.xxdevops.cn/blog/badge/Server-Cloud.svg"
25    url: "https://cloud.tencent.com/"
26    title: "本站部署服务使用 腾讯云"
27    
28  - name: "EdgeOne"
29    badge: "https://img.xxdevops.cn/blog/badge/CDN-EdgeOne.svg"
30    url: "https://edgeone.ai/zh"
31    title: "本站部署服务使用 EdgeOne"
32    
33  - name: "Nginx"
34    badge: "https://img.xxdevops.cn/blog/badge/Proxy-Nginx.svg"
35    url: "https://nginx.org/"
36    title: "本站Nginx反向代理服务 Nginx"

1services:
2  - name: "服务名称"           # ◀️ 服务标识名称
3    badge: "徽章图片URL"       # ◀️ SVG或图片格式的徽章
4    url: "跳转链接"            # ◀️ 点击徽章跳转的链接
5    title: "悬停提示文字"       # ◀️ 鼠标悬停时显示的说明

启用/禁用服务徽章

主题配置🎖️ 配置说明🎖️

1# config/themes/hugo-teek/params.toml
2[footer]
3    show_services = true      # ◀️ 设为 true 显示服务徽章，false 隐藏

1  show_services = true        # ◀️ 控制是否显示 footerServices.yaml 中配置的服务徽章

常用服务徽章源

服务类型	推荐徽章	获取方式
框架	Hugo, VitePress	Shields.io
评论	Twikoo, Waline	自定义SVG
搜索	FlexSearch, Algolia	Shields.io
部署	Vercel, Netlify, 腾讯云	官方提供或自定义
CDN	Cloudflare, EdgeOne	自定义SVG

📝 版权信息配置

版权信息配置

配置站点版权信息，支持起始年份和自定义后缀：

版权配置📝 配置说明📝

1# config/teek-plugins/footer.toml
2[params.footer]
3  # 版权起始年份
4  copyright_year_start = 2024.11
5
6  # 版权后缀文本（显示在年份之后）
7  copyright_suffix = "余温Gueen的博客"

1  copyright_year_start = 2024.11    # ◀️ 起始年份，支持小数表示月份
2  copyright_suffix = "博客名称"      # ◀️ 显示格式：© 2024-2025 博客名称

版权显示效果

配置项	说明	示例输出
`copyright_year_start`	起始年份	`2024.11` 表示 2024年11月
`copyright_suffix`	版权后缀	`余温Gueen的博客`
自动计算	当前年份	自动显示为 `© 2024-2025`

📋 ICP备案配置

启用ICP备案显示

中国大陆站点需要展示ICP备案信息，Hugo-Teek 提供内置支持：

ICP备案配置📋 配置说明📋

 1# config/teek-plugins/footer.toml
 2[params.footer.icp]
 3  # 是否启用 ICP 备案显示
 4  enabled = true
 5
 6  # ICP 备案号
 7  number = "苏ICP备2024144209号"
 8
 9  # ICP 备案查询链接
10  url = "http://beian.miit.gov.cn/"

1  enabled = true                              # ◀️ 总开关，设为 false 隐藏备案信息
2  number = "苏ICP备2024144209号"              # ◀️ 你的备案号
3  url = "http://beian.miit.gov.cn/"           # ◀️ 工信部备案查询链接

ICP备案最佳实践

⚠️ 注意事项

备案号必须真实有效，与工信部登记信息一致
未备案站点请将 enabled 设为 false
备案信息变更后需及时更新配置
建议定期检查备案链接是否可正常访问

📊 不蒜子统计配置

启用不蒜子统计

不蒜子统计可以显示站点的访问数据，包括今日/昨日/本月的访客数和访问量：

不蒜子统计配置📊 显示效果📊

 1# config/themes/hugo-teek/services.toml
 2[analytics]
 3  [analytics.busuanzi]
 4    enabled = true                    # ◀️ 总开关
 5    url = "https://busuanzi-eo.xxdevops.cn/busuanzi.eo.js"
 6    api = "https://busuanzi-eo.xxdevops.cn/api/count"
 7    type = "eo"                       # ◀️ EO 版本或 classic 版本
 8    prefix = "busuanzi"
 9    style = "comma"                   # ◀️ 数字格式：comma（千分位）| none
10    pjax = false
11    page_pv = true                    # ◀️ 显示页面浏览量
12    site_pv = true                    # ◀️ 显示站点总浏览量
13    site_uv = true                    # ◀️ 显示站点独立访客数

1# 底部栏会显示以下统计信息：
2今日访客数 1 | 今日访问量 387 | 昨日访客数 1 | 昨日访问量 1724 | 本月访客数 1 | 本月访问量 2110

不蒜子统计字段说明

配置项	说明	可选值
`enabled`	总开关	`true` / `false`
`type`	版本类型	`eo`（推荐）/ `classic`
`style`	数字格式	`comma`（千分位）/ `none`
`url`	JS文件地址	不蒜子服务URL
`api`	API端点	计数API地址

💬 箴言配置

添加个性化标语

在底部栏展示个性化签名、座右铭或欢迎语：

箴言配置💬 多种风格示例💬

1# config/teek-plugins/footer.toml
2[params.footer]
3  # 箴言/座右铭（显示在页脚底部）
4  custom_message = "初闻不知曲中意，再听已是曲中人"

1# 文艺风格
2  custom_message = "初闻不知曲中意，再听已是曲中人"
3
4# 技术风格
5  custom_message = "Stay hungry, stay foolish"
6
7# 简约风格
8  custom_message = "记录生活，分享技术"

🐾 动物装饰配置

装饰图片

底部栏顶部可以展示可爱的动物装饰图片，增加站点趣味性：

动物装饰🐾 其他装饰选项🐾

 1<!-- 在 footer.html 中配置 -->
 2<div class="footer-animals">
 3  <img src="https://img.xxdevops.cn/blog/footer/animals.avif"
 4       alt="Cute Animals"
 5       class="animals-image"
 6       width="750"
 7       height="80"
 8       loading="lazy"
 9       decoding="async">
10</div>

1<!-- 韩国美女装饰 -->
2<div class="footer-animals">
3  <img src="https://mu.baimu.live/img/animals-1.avif" ...>
4</div>
5
6<!-- 哆啦A梦装饰 -->
7<div class="footer-animals">
8  <img src="https://mu.baimu.live/img/animals.avif" ...>
9</div>

🎨 自定义装饰

动物装饰图片需要在主题模板文件 layouts/partials/footer.html 中修改，建议尺寸为 750x80 像素。

📋 完整配置示例

典型博客底部栏配置

footer.toml - 内容配置📋 footerServices.yaml - 服务徽章📋 params.toml - UI控制📋 services.toml - 统计服务📋

 1# ========================================
 2# 文件1: config/teek-plugins/footer.toml
 3# 通用内容配置（所有主题共用）
 4# ========================================
 5[params.footer]
 6  # 版权起始年份
 7  copyright_year_start = 2024.11
 8
 9  # 版权后缀文本
10  copyright_suffix = "余温Gueen的博客"
11
12  # 箴言/座右铭
13  custom_message = "初闻不知曲中意，再听已是曲中人"
14
15  # ICP 备案信息
16  [params.footer.icp]
17    enabled = true
18    number = "苏ICP备2024144209号"
19    url = "http://beian.miit.gov.cn/"

 1# ========================================
 2# 文件2: data/footerServices.yaml
 3# 服务徽章配置
 4# ========================================
 5services:
 6  - name: "Hugo"
 7    badge: "https://img.xxdevops.cn/blog/badge/Frame-Hugo.svg"
 8    url: "https://gohugo.io/"
 9    title: "原主题基于 Hugo 框架"
10    
11  - name: "Copyright"
12    badge: "https://img.xxdevops.cn/blog/badge/Copyright.svg"
13    url: "https://creativecommons.org/licenses/by-nc-sa/4.0/"
14    title: "内容采用 CC BY-NC-SA 4.0 国际许可协议进行许可"
15    
16  - name: "Twikoo"
17    badge: "https://img.xxdevops.cn/blog/badge/Comments-Twikoo.svg"
18    url: "https://twikoo.js.org/"
19    title: "本站评论系统使用 Twikoo"

1# ========================================
2# 文件3: config/themes/hugo-teek/params.toml
3# 主题UI控制配置
4# ========================================
5[footer]
6    show_services = true      # 显示服务徽章

 1# ========================================
 2# 文件4: config/themes/hugo-teek/services.toml
 3# 统计服务配置
 4# ========================================
 5[analytics]
 6  [analytics.busuanzi]
 7    enabled = true
 8    url = "https://busuanzi-eo.xxdevops.cn/busuanzi.eo.js"
 9    api = "https://busuanzi-eo.xxdevops.cn/api/count"
10    type = "eo"
11    style = "comma"
12    site_pv = true
13    site_uv = true

⚙️ 通过管理后台配置

使用 Hugo Teek Admin

Hugo-Teek 提供可视化管理后台，可图形化配置底部栏：

启动管理后台🚀 后台配置路径📝

1make dev-admin
2# 访问: http://localhost:8080

11️⃣ 登录管理后台
22️⃣ 进入「外观管理」->「页脚设置」
33️⃣ 可视化编辑版权信息、备案号、箴言
44️⃣ 开启/关闭服务徽章和统计功能
55️⃣ 保存后自动生成配置

配置方式对比

配置方式	适用场景	难度	灵活性
管理后台	快速调整、可视化编辑	⭐ 简单	⭐⭐⭐
手动编辑	批量修改、版本控制	⭐⭐ 中等	⭐⭐⭐⭐⭐
主题配置	主题开发、默认样式	⭐⭐⭐ 复杂	⭐⭐⭐⭐

🔧 常见问题

底部信息不显示或显示异常

问题1：服务徽章不显示❌ 问题2：版权信息不显示❌ 问题3：ICP备案不显示❌ 问题4：不蒜子统计不显示❌

1原因：show_services 设为 false 或 footerServices.yaml 不存在
2解决：
31️⃣ 检查 config/themes/hugo-teek/params.toml 中 show_services = true
42️⃣ 确认 data/footerServices.yaml 文件存在且格式正确
53️⃣ 重启开发服务器：make dev

1原因：copyright_year_start 或 copyright_suffix 未配置
2解决：
31️⃣ 检查 config/teek-plugins/footer.toml 是否存在
42️⃣ 确认 [params.footer] 节点配置正确
53️⃣ 重启开发服务器：make dev

1原因：enabled 设为 false 或配置未生效
2解决：
31️⃣ 检查 [params.footer.icp] 下的 enabled = true
42️⃣ 确认 number 和 url 已正确填写
53️⃣ 运行 make build 重新合并配置

1原因：analytics.busuanzi.enabled 未启用
2解决：
31️⃣ 检查 services.toml 中 [analytics.busuanzi] enabled = true
42️⃣ 确认 url 和 api 地址可正常访问
53️⃣ 检查网络连接是否正常加载不蒜子脚本

配置生效检查清单

1✅ 配置文件路径正确
2✅ TOML/YAML 语法无误
3✅ 配置项位于正确的节点下
4✅ 启用开关设为 true
5✅ 运行 make dev 或 make build 重新合并配置
6✅ 浏览器强制刷新（Ctrl+F5）清除缓存

📝 配置模板速查

常用底部配置模板

最简配置模板📝 完整配置模板📝 无备案配置模板📝 服务徽章模板📝

1# config/teek-plugins/footer.toml
2[params.footer]
3  copyright_year_start = 2024
4  copyright_suffix = "我的博客"

 1# config/teek-plugins/footer.toml
 2[params.footer]
 3  copyright_year_start = 2024.11
 4  copyright_suffix = "我的博客"
 5  custom_message = "记录生活，分享技术"
 6
 7  [params.footer.icp]
 8    enabled = true
 9    number = "京ICP备12345678号"
10    url = "http://beian.miit.gov.cn/"

1# config/teek-plugins/footer.toml
2[params.footer]
3  copyright_year_start = 2024
4  copyright_suffix = "我的博客"
5  custom_message = "Stay hungry, stay foolish"
6
7  [params.footer.icp]
8    enabled = false

 1# data/footerServices.yaml
 2services:
 3  - name: "Hugo"
 4    badge: "https://img.shields.io/badge/Frame-Hugo-ff4088"
 5    url: "https://gohugo.io/"
 6    title: "基于 Hugo 框架"
 7    
 8  - name: "Vercel"
 9    badge: "https://img.shields.io/badge/Deploy-Vercel-black"
10    url: "https://vercel.com/"
11    title: "部署于 Vercel"

🎉 底部栏配置完成！

如有问题，请在 Hugo-Teek项目仓库的 Issues 中反馈

📡

👤 作者: 余温Gueen

🔗 链接: https://wiki.xxdevops.cn/hobby/dibu-peizhi

🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自余温Gueen Blog！

推荐使用微信支付

推荐使用支付宝

上一篇图片语法下一篇 Hugo-Teek 小白首选，一款简约、唯美、丝滑且强大的博客和文档库二合一