Next 主题增加公安备案信息

发表于 更新于 分类于
本文字数： 881 阅读时长 ≈ 1 分钟

Photo by Artem Sapegin

2020-09：NexT-8.x 已经解决了底部公安备案信息的样式问题，不需要做额外处理

今天起床收到公安网的短信通知，网站备案已经完成。不知道是不是临近过年的原因，这次备案审核速度很快，全程加起来不到两个工作日。

NexT 6.x 的_config.yml 文件可以配置 ICP 备案信息，但找不到公安备案设置入口，内置 custom_text 字段写入 html 标签总是报错，看来又是折腾的一天，自已动手丰衣足食。

  1. 尽量不要将变量写死在源码，应由配置文件控制

  2. footer 区另起一行填写 ICP 备案和公安备案信息

改造对比

Next6.X默认备案区

NexT6.X自定义备案区

环境版本

Hexo: 3.8.0

NexT: 6.7.0

NexT 7.3 之后增加了公安备案配置项，但个人还是喜欢原来的展示方式，如果你也是 7.3.0 之后的版本，可以直接看最后的 [新版处理] 章节

修改配置

在主题目录下的 _config.yml 文件中找到 footer: 标签，加入配置字段

1
2
3
4
5
6
7
8
9
10
11
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian:
  enable: true
  icp: 粤ICP备18149642号-1

# 这里是新加的内容，填写公安备案信息
gongan:
 enable: true
 local: 粤
 num: 44011202000693

修改 footer

先把公安备案的国徽图标存放在 /images/beian.png，然后打开 themes/next/layout/_partials/footer.swig 找到并删除以下代码

1
2
3
4
{#
#}{% if theme.footer.beian.enable %}{#
#}  {{ next_url('http://www.miitbeian.gov.cn', theme.footer.beian.icp + ' ') }}{#
#}{% endif %}

在 footer.swig 底部增加以下代码，用两个 <div> 块展示 ICP 备案与公安备案，利用 style="display:inline-block" 实现宽屏幕并排，窄屏幕换行

1
2
3
4
5
6
7
8
9
10
11
12
<div style="display:inline-block">
{% if theme.footer.beian.enable %}{#
#}  {{ next_url('http://www.miitbeian.gov.cn', theme.footer.beian.icp ) }}
{% endif %}
</div>

<div style="display:inline-block">
{% if theme.footer.gongan.enable %}{#
#} <span style="padding-left:25px;background:url(/images/beian.png) no-repeat left center" rel="nofollow">
{{ next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+theme.footer.gongan.num, theme.footer.gongan.local+'公网安备'+theme.footer.gongan.num+'号' ) }}</span>{#
#}{% endif %}
</div>

新版处理

NexT 7.3 在原来的配置文件 beian 项增加 gongan_id、gongan_num、gongan_icon_url，将公安备案信息紧跟在 ICP 备案之后，这种展示方式不太好看，小屏幕下还会出问题，小改造了一下：

默认展示方式

修改后的展示方式

思路大概是这样子：修改配置文件的标签项，然后将 footer.swig 中相关内容复制到数据目录，这样可以避免改动源文件。首先要启用数据目录，详见启用数据目录的方法，然后修改 next.yml，在 custom_file_path 下启用 footer 配置，再找到 beian 标签改为 beian_mod：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  postMeta: source/_data/post-meta.swig
  postBodyEnd: source/_data/post-body-end.swig
  # 把footer前面的#删掉，启用自定义数据目录
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl


# Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  # 原版beian方式不好看，为避免修改footer.swig源文件，改名为beian_mod，交给数据文件下的footer.swig处理
  beian_mod:
    enable: true
    icp: 粤ICP备18149642号-1
    # The digit in the num of gongan beian.
    gongan_id: 44011202000693
    # The full num of gongan beian.
    gongan_num: 粤公网安备44011202000693号
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url: /images/beian.png

在 hexo/source/_data 目录下新建 footer.swig，粘贴以下内容并保存

1
2
3
4
5
6
7
8
9
10
11
12
<div style="display:inline-block">
{% if theme.footer.beian_mod.enable %}{#
#}  {{ next_url('http://www.miitbeian.gov.cn', theme.footer.beian_mod.icp ) }}
{% endif %}
</div>
<div style="display:inline-block">
{% if theme.footer.beian_mod.enable %}{#
#} <img src="{{ theme.footer.beian_mod.gongan_icon_url }}" align="center" height="18" width="18" style="display:inline-block;"/>
{{ next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footer.beian_mod.gongan_id,
  theme.footer.beian_mod.gongan_num + ' ') }}{#
#}{% endif %}
</div>

大功告成！

相关文章