给 Hugo LoveIt 主题手动添加公安备案号显示

2026-06-11 约 1419 字预计阅读 3 分钟

geluli

一、问题背景

LoveIt 是 Hugo 生态中维护活跃、功能丰富的技术博客主题，原生支持 ICP 备案号显示，但部分旧版本 footer.html 模板中**未内置公安备案号的渲染逻辑。如果你的备案信息包含公安备案号（格式：京公网安备 XXXXXXXXXXXXXX号`），直接配置无法在页面底部显示，需要手动修改模板添加支持。

本文记录完整的修改流程，无需等待主题更新，5分钟即可生效，适配 Hugo 0.158+ 版本。

二、环境准备

已安装 Hugo 0.158+ 扩展版
已使用 LoveIt 主题（安装方式：git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt）
已完成工信部备案 + 公安备案，拿到备案号：
- ICP 备案号：京ICP备2020043732号-3
- 公安备案号：京公网安备 11010502001234号

三、步骤1：确认模板无公安备案逻辑

执行命令检查 LoveIt 主题的 footer 模板是否已包含公安备案代码：

        
cd /data/hugo
grep -r "gongan" themes/LoveIt/layouts/partials/footer.html

✅ 如果无任何输出，说明模板确实未内置该逻辑，需要手动添加。

vi themes/LoveIt/layouts/partials/footer.html

2. 找到 ICP 备案的代码块

模板中 ICP 备案逻辑通常如下：

        
{{- /* ICP */ -}}
{{- with .Site.Params.footer.icp -}}
    <span class="icp-splitter">&nbsp;|&nbsp;</span><br class="icp-br"/>
    <span class="icp">{{ . | safeHTML }}</span>
{{- end -}}

3. 在该代码块后添加公安备案逻辑

直接复制粘贴以下代码到 ICP 代码块后面：

        
        
        
    
{{- /* 公安备案 */ -}}
{{- with .Site.Params.footer.gongan -}}
    <br class="icp-br"/>
    <span class="icp">
        {{ . | safeHTML }}
    </span>
{{- end -}}

保存退出（ESC + :wq）。

五、步骤3：配置 hugo.toml 备案信息

打开项目根目录的 hugo.toml：

        
        
        
    
vi hugo.toml
#添加/修改 [params.footer] 配置块（ICP 和公安备案均支持 HTML 格式，可自定义链接）：
[params]
   #其他原有配置（subtitle、avatar等）全部保留

  [params.footer]
    # ICP 备案号（带跳转链接，自动渲染可点击）
    icp = '<a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">京ICP备2020043732号-3</a>'
    # 公安备案号（完整内容+跳转链接，模板会直接渲染 safeHTML）
    gongan = '<a href="https://beian.gov.cn" target="_blank" rel="noopener noreferrer">京公网安备 11010502001234号</a>'

六、步骤4：编译预览生效

1. 清理旧缓存（必须执行，否则配置不生效）

rm -rf public resources

2. 启动本地预览

        
hugo server -D --bind=0.0.0.0 --port=1313

3. 验证效果

浏览器访问 http://你的服务器IP:1313，滑动到页面最底部 footer，会显示：京ICP备2020043732号-3 | 京公网安备 11010502001234号 ✅ 两个备案号均为蓝色可点击链接 ✅ 点击 ICP 备案跳转到工信部官网 https://beian.miit.gov.cn ✅ 点击公安备案跳转到公安备案平台 https://beian.gov.cn ✅ 公安备案号完整显示地域信息，无省略

七、避免主题更新丢失改动

你修改的是主题目录下的文件，后续执行 git pull 更新 LoveIt 主题时，改动会被覆盖，两种方案可选：方案1：生成补丁文件（推荐）

1. 生成当前改动补丁

        
cd themes/LoveIt
git diff layouts/partials/footer.html > ~/loveit-gongan-beian.patch

2. 后续更新主题后重新打补丁

        
        
        
    
git pull
git apply ~/loveit-gongan-beian.patch
方案2：使用项目自定义模板（不碰主题文件）
# 1. 复制主题 footer 到项目自定义目录
mkdir -p layouts/partials
cp themes/LoveIt/layouts/partials/footer.html layouts/partials/footer.html

# 2. 修改项目目录下的 layouts/partials/footer.html，主题更新不影响
vi layouts/partials/footer.html

八、常见问题排查

问题解决方案公安备案号不显示检查 hugo.toml 中是否配置 [params.footer]，且 gongan 字段无拼写错误备案号不显示链接确认 icp/gongan 字段写的是带 < a> 标签的完整 HTML，外层用单引号，内层用双引号页面报错 safeHTML 相关检查 HTML 标签是否闭合，引号是否匹配主题更新后改动丢失按「七、避免主题更新丢失改动」的方案重新打补丁

九、总结

LoveIt 主题未内置公安备案逻辑时，只需手动修改 footer.html 添加 5 行代码，配合 hugo.toml 的 HTML 格式配置，即可完整显示带链接的公安备案号，完全符合国内站点合规要求。整个过程无破坏性修改，兼容 Hugo 最新版本，5分钟即可完成。

目录