安知鱼主题细节美化及实用教程

0x3ff18a2025-11-182025-11-18

这篇文章是一篇教学文章，在我的网站进行新升级后我会在这里长期更新我所实现的效果。如果你有问题可以在文章末尾的评论区进行提问，我会尽快回复。

请注意，当你改动任何配置文件前请务必进行备份操作，这是一种保障也是一个良好的运维习惯。

一、页脚添加备案号

0. 效果图

footer_image

1. 添加 _config.yml 字段

在博客根目录 Hexo 的配置文件(_config.yml)中添加如下新键值（这里要注意，是 Hexo 的配置文件，不是安知鱼主题的配置文件！）：

1
2
3

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

2. 添加、引用 CSS

完成了第 1 步后我们需要为页脚容器进行样式定义。在博客的 /source/ 目录中的 css 文件夹中创建一个名为 coustom.css 的文件（如果你没有 css 文件夹可以自行创建一个）。

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

/*============================= 页脚备案容器开始 blog.yujiay.wang =============================*/

/* 为 #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;
}

/*============================= 页脚备案容器结束 blog.yujiay.wang =============================*/

添加好后记得保存修改的文件。此外还需要在安知鱼主题的配置文件 inject -> head 处进行自定义css的引入工作：

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

3. 修改 footer.pug 文件

紧接着我们需要修改模板引擎，这里特别要注意缩进，Pug 的缩进至关重要，它直接决定了代码能否正确运行以及最终生成的HTML结构。如果你不确定缩进是否正确，最简单的办法，就是在 footer.pug 代码的最底部回车两个空行，然后将输入光标删除到最前端（没有缩进）的地方，复制下面的代码，然后将代码的第一行 #footer-wrap 删除掉。删除掉后不要动下面的代码，直接将空行全部删除即可。

#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}

处理好缩进后我们需要将代码中的链接、图片链接进行替换，替换成为你自己的链接和图片，替换后保存。