Hexo添加域名备案图案及备案号到页脚

申请备案

登陆全国公安机关互联网站安全服务平台，注册账号并按照官网说明申请域名备案。如果顺利的话，一周后会备案成功。

获取备案图案及信息

备案通过后可在全国公安机关互联网站安全服务平台下载备案图案及备案编号HTML代码。

备案图案如下：

备案代码如下：

<div style="width:300px;margin:0 auto; padding:20px 0;">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010602000549" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">川公网安备 51010602000549号</p></a>
</div>

将备案图案及备案号添加到Hexo页脚

首先为了部署后能在静态页中找到备案图案，需要先将备案图案置于 Hexo\themes\next\source\images 下，生成博客后通过 /images/备案图标.png 的方式来索引到。

之后修改 Hexo\themes\next\layout_partials 下的 footer.swig 文件来插入备案信息到页脚。将备案代码贴入改文件下的末尾，如下面的代码块所示：

{% if theme.copyright %}
<div class="theme-info">
  xxxxxxxxxxxxxxxxxxxxxx
</div>
{% endif %}

<div style="width:300px;margin:0 auto; padding:20px 0;">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010602000549" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">川公网安备 51010602000549号</p></a>
</div>

通过“hexo s”指令查看本地博客，可以看到备案信息已经显示在页脚，但是没有备案图案。

修改上面的代码，将备案信息中的

<img src="" style="float:left;"/>

段做如下修改：

<img src="/images/备案图标.png" style="float:left;"/>

添加了图片的相对路径（原来没有），之后再本地博客里面刷新，就可以看到备案图案及信息了。

Tips

有没有发现备案信息和Hexo原来的页脚之间间距较大，可以通过将备案代码

<div style="width:300px;margin:0 auto; padding:20px 0;">

中的 padding：20px 改成5个皮克斯，这样看上去就比较自然了。

谢谢观看！