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


### 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 模板是否已包含公安备案代码：
```bash
cd /data/hugo
grep -r "gongan" themes/LoveIt/layouts/partials/footer.html
```

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

## 四、步骤2：修改 footer 模板添加公安备案代码1
### 1. 编辑 footer 模板

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

### 2. 找到 ICP 备案的代码块

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

```toml
{{- /* 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 代码块后面：

```toml
{{- /* 公安备案 */ -}}
{{- with .Site.Params.footer.gongan -}}
    <br class="icp-br"/>
    <span class="icp">
        {{ . | safeHTML }}
    </span>
{{- end -}}
```
保存退出（ESC + :wq）。

## 五、步骤3：配置 hugo.toml 备案信息
打开项目根目录的 hugo.toml：
```bash
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. 清理旧缓存（必须执行，否则配置不生效）
```bash
rm -rf public resources
```
### 2. 启动本地预览
```bash
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. 生成当前改动补丁
```bash
cd themes/LoveIt
git diff layouts/partials/footer.html > ~/loveit-gongan-beian.patch
```

### 2. 后续更新主题后重新打补丁
```bash
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分钟即可完成。

---