对博客的备案信息的美化效果

这篇文章是安和鱼主题的一篇美化文章，主要是针对安和鱼主题的调用备案信息的美化，默认的安和鱼备案信息说不上丑陋，但是过于简单，我么可以看一下默认的备案信息调用效果：

今天我们将这个备案信息代码稍微美化一下，下面我们来看实际的操作过程：

1.添加信息字段

我们需要对博客根目录下面的 _config.yml 进行字段添加，打开这个文件之后，找一个合适的位置添加以下代码

1
2
3
#建议添加在 timezone 下面，你也可以添加在其他位置
icp: 填写 ICP 备案号
gb: 填写公网安备号

2.添加并引用 CSS

完成了第一步后我们需要为页脚容器进行样式定义。

在博客主题的 /source/ 目录中的 css 文件夹中，创建一个名为 coustom.css 的文件。

在新建的 custom.css 文件中添加如下代码：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*============================= 页脚备案容器开始 =============================*/

/* 为 #footer-bar 设置相对定位，作为备案容器的定位参考 */
#footer-bar {
    /* 为备案信息预留更多空间 */
    min-height: 100px;
    /* 底部内边距，确保有足够空间 */
    padding-bottom: 50px;
}

/* 备案链接容器样式 - 使用ID选择器 */
#beian-links {
    /* 定位样式 - 绝对定位在 footer-bar 底部居中 */
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    /* 文本和布局样式 */
    display: block;
    width: auto;
    text-align: center;
    white-space: nowrap;

    /* 字体样式 */
    font-size: 12px;
    color: var(--anzhiyu-fontcolor);
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* 确保在最上层 */
    z-index: 10;
}

/* 备案链接的样式 */
#beian-links a.footer-bar-link {
    color: var(--anzhiyu-fontcolor); /* 链接文字也设置为深色 */
    text-decoration: none;
    transition: color 0.3s ease; /* 添加过渡效果 */
}

#beian-links a.footer-bar-link:hover {
    text-decoration: none;
    color: var(--anzhiyu-lighttext); /* 悬停颜色 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    #beian-links {
        margin: -30px 0;
        font-size: 11px;
        white-space: normal; /* 允许内容换行 */
        text-align: center; /* 确保换行后内容依然居中 */
        max-width: 90%;
        bottom: 10px;
        /* 使整个容器在移动端独占一行，居中效果更稳定 */
        display: block;
    }
    
    #beian-links a.footer-bar-link {
        display: inline-block;
        line-height: 1.8;
        padding: 2px 4px;
        /* 单独成行，可以设置为 block，并赋予宽度或使用其他布局 */
        /* display: block; */
    }

     /* 移动端适配链接样式 */
    #beian-links .separator {
            display: none !important; /* 上下排列时隐藏竖线分隔符 */
        }
    
}

/* 暗色模式适配 */
[data-theme="dark"] #beian-links a.footer-bar-link {
    color: var(--anzhiyu-fontcolor);;
}

[data-theme="dark"] #beian-links a.footer-bar-link:hover {
    color: var(--anzhiyu-lighttext);
    text-decoration: none;
}

/* 竖线分隔符样式 */
#beian-links .separator {
    color: #CCCCCC;
    margin: 0 10px;
    display: inline-block;
}

/* 暗色模式竖线适配 */
[data-theme="dark"] #beian-links .separator {
    color: #666666;
}

/*============================= 页脚备案容器结束 =============================*/

做好上面的文件之后，在安知鱼主题的配置文件中搜索 inject ，就会找到如下代码

1
2
3
4
5
6
7
8
9
10
11
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

  bottom:
    # 自定义js
    # - <script src="/js/xxx"></script>

在 head 处进行自定义 css 文件的引入工作：

1
- <link rel="stylesheet" href="/css/custom.css">

修改完之后的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="/css/custom.css">

  bottom:
    # 自定义js
    # - <script src="/js/xxx"></script>
    - <script src="/js/countdown.js"></script>

紧接着我们需要修改模板引擎，这里特别要注意缩进，Pug 的缩进至关重要，它直接决定了代码能否正确运行以及最终生成的 HTML 结构。

如果你不确定缩进是否正确，最简单的办法，就是在 footer.pug 代码的最底部回车两个空行，然后将输入光标删除到最前端（没有缩进）的地方，复制下面的代码，然后将代码的第一行 #footer-wrap 删除掉。然后将空行全部删除即可。

1
2
3
4
5
6
7
8
9
#footer-wrap    // 这行最后一定要删除
    #beian-links
        a.footer-bar-link(href="#修改为你的链接" target="_blank" rel="nofollow noopener")
            img.beian-icon(src="#修改为你的图片" alt="公网安备图标" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px;")
            | #{config.gb}
        span.separator ｜
        a.footer-bar-link(href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener")
            img.beian-icon(src="#修改为你的图片" alt="备案图标" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px;")
        | #{config.icp}

一般情况下不会受影响，顺便把我的文件整体分享一下

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
#footer-wrap
  if theme.footer.socialBar.enable
    - let centerImg = theme.footer.socialBar.centerImg ? theme.footer.socialBar.centerImg : theme.avatar.img
    - let leftInfo = theme.footer.socialBar.left
    - let rightInfo = theme.footer.socialBar.right
    #footer_deal
      each item, index in leftInfo
        a.deal_link(href=url_for(item.link) title=item.title)
          if (item.icon.startsWith("fa"))
            i(class=`${item.icon}`)
          else if (item.icon.startsWith("icon"))
            svg.icon(aria-hidden="true")
              use(xlink:href=`#`+ item.icon)
          else if (item.icon.startsWith("anzhiyu"))
            i.anzhiyufont(class=`${item.icon}`)
      img.footer_mini_logo(title=_p('footer.back_to_top'), alt=_p('footer.back_to_top') onclick="anzhiyu.scrollToDest(0, 500)", src=centerImg, size="50px")
      each item, index in rightInfo
        a.deal_link(href=url_for(item.link) title=item.title)
          if (item.icon.startsWith("fa"))
            i(class=`${item.icon}`)
          else if (item.icon.startsWith("icon"))
            svg.icon(aria-hidden="true")
              use(xlink:href=`#`+ item.icon)
          else if (item.icon.startsWith("anzhiyu"))
            i.anzhiyufont(class=`${item.icon}`)

  if theme.footer.owner.enable && !theme.footer.footerBar.enable
    - var nowYear = new Date().getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `&copy;${nowYear} By ${config.author}`

  - let work_img = theme.footer.runtime.work_img
  - let work_description = theme.footer.runtime.work_description
  if theme.footer.runtime.enable
    #workboard
      if work_img != null
        img(src=`${work_img}`, alt=`${work_description}`, title=`${work_description}`, class="workSituationImg boardsign")
      #runtimeTextTip
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

  if theme.footer.list.enable
    - let projectList = theme.footer.list.project
    #anzhiyu-footer
      each item, index in projectList
        .footer-group
          .footer-title=item.title
          .footer-links
            each iten, indey in item.links
              a.footer-item(title=iten.title href=url_for(iten.link))=iten.title
      if theme.footer.list.randomFriends > 0
        .footer-group
          .footer-title-group
            .footer-title=_p('footer.friend_links')
            a.random-friends-btn#footer-random-friends-btn(href="javascript:addFriendLinksInFooter();" title=_p('footer.refresh_friends'))
              i.anzhiyufont.anzhiyu-icon-arrow-rotate-right
          .footer-links#friend-links-in-footer

  if theme.footer.bdageitem.enable
    p#ghbdages
      each item in theme.footer.bdageitem.list
        a.github-badge(target='_blank' href=item.link style='margin-inline:5px' data-title=item.message title=item.message)
          img(src=item.shields alt=item.message)

if theme.footer.footerBar && theme.footer.footerBar.enable
  #footer-bar
    .footer-bar-links
      .footer-bar-left
        #footer-bar-tips
          if theme.footer.owner.enable
            - var nowYear = new Date().getFullYear()
            - let authorLink = theme.footer.footerBar.authorLink ? theme.footer.footerBar.authorLink : config.url
            if theme.footer.owner.since && theme.footer.owner.since != nowYear
              .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By `
                a.footer-bar-link(href=url_for(authorLink) title=config.author target="_blank")=config.author
            else
              .copyright!= `&copy;${nowYear} By `
                a.footer-bar-link(href=url_for(authorLink) title=config.author target="_blank")=config.author
        #footer-type-tips
        if theme.footer.footerBar && theme.footer.footerBar.subTitle && theme.footer.footerBar.subTitle.enable
          .js-pjax
            include ./third-party/footerBarSubtitle.pug
      .footer-bar-right
        each item in theme.footer.footerBar.linkList
          a.footer-bar-link(href=url_for(item.link) title=item.text)=item.text
        if theme.footer.footerBar.cc.enable
          a.footer-bar-link.cc(href=url_for(theme.footer.footerBar.cc.link) title=_p('footer.cc_license'))
            i.anzhiyufont.anzhiyu-icon-copyright-line
            i.anzhiyufont.anzhiyu-icon-creative-commons-by-line
            i.anzhiyufont.anzhiyu-icon-creative-commons-nc-line
            i.anzhiyufont.anzhiyu-icon-creative-commons-nd-line
    #beian-links
        a.footer-bar-link(href="#修改为你的链接" target="_blank" rel="nofollow noopener")
            img.beian-icon(src="#修改为你的图片" alt="公网安备图标" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px;")
            | #{config.gb}
        span.separator ｜
        a.footer-bar-link(href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener")
            img.beian-icon(src="#修改为你的图片" alt="备案图标" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px;")
        | #{config.icp}

如果你没有对主题文件进行过修改，可以把代码复制进去，然后保存就可以。

当然，还需要将代码中的链接、图片链接进行替换，替换成为你自己的链接和图片，替换后保存。

1.4 结束语

最后 Hexo 三连（hexo cl && hexo g && hexo s）就可以在页面底部查看效果，单独成一行，美观大方的排列在文章最底部。

最后说一句，这个 css 进行了响应式适配，移动端也可以很好的展示。