安知鱼主题侧边个人卡片美化：切换图片背景

安知鱼主题侧边个人卡片美化：切换图片背景

本教程基于安知鱼（AnZhiYu）主题，介绍如何通过 CSS 美化侧边栏个人信息卡片，实现自定义背景图切换的效果。

一、创建 custom.css 文件

  1. 进入博客根目录。
  2. 检查 source/css 文件夹是否存在（推荐在 source 目录下操作，Hexo 生成时会自动同步到 public）。如果不存在，请新建一个 css 文件夹。
  3. 在 css 文件夹内新建文件，命名为 custom.css。

最终源文件路径：source/css/custom.css
生成后路径：public/css/custom.css

二、添加代码至 custom.css

在 custom.css 文件中添加以下代码：

/* 侧边栏头像卡片背景 */
#aside-content > .card-widget.card-info::before {
  background: url('自定义图片路径');
  border: 0;
  position: absolute;
  background-size: 100% 100%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite !important;
  content: ""; /* 伪元素必须包含 content 属性才能显示 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保背景在文字下方 */
}

三、替换图片路径

（1）本地图片（推荐）

  1. 将图片放入 source/images/ 目录（如果没有 images 文件夹可新建）。
  2. 路径格式如下：
background: url('/images/你的图片名.jpg');

示例：

background: url('/images/bg.png');

（2）外部图片（网络链接）

直接使用完整的 URL 链接：

background: url('https://testingcf.jsdelivr.net/gh/kingkare/owo/img/Personal-card-beautification.gif');

四、保存并生效

1. 确保文件路径正确

确认文件已保存在 source/css/custom.css。

2. 在主题配置中引用

打开博客根目录下的 _config.anzhiyu.yml (或 _config.yml，视具体主题配置项而定)，找到 inject 配置项，添加以下内容：

inject:
  head:
    -

注意：YAML 格式对缩进非常敏感，请确保 - 前面有两个空格。

3. 本地预览

运行以下命令查看效果：

hexo clean && hexo server

4. 正式部署

确认效果无误后，执行部署：

hexo clean && hexo g && hexo d

五、效果示例与注意事项

（1）效果示意

演示图

动态效果

（2）常见问题处理

问题类型 解决方案说明
图片不显示 检查路径拼写是否正确；确保本地图片已复制至 source/images/ 文件夹并重新生成 (hexo g)。
对比度太低 可添加文字颜色样式，如 color: #ffffff;，提升可读性（见进阶建议）。
动画无效 清除浏览器缓存后再试；或检查是否与其他 CSS 冲突。
样式不生效 检查 _config.anzhiyu.yml 中是否正确引入了 custom.css，并执行了 hexo clean。

六、进阶建议（可选）

如果背景图导致文字看不清，可以在 custom.css 中追加以下内容，调整文字颜色与层级：

/* 调整文字颜色与层级关系 */
#aside-content > .card-widget.card-info {
  color: #fff;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 增加文字阴影提升可读性 */
}

七、总结

  • 本方法适用于安知鱼主题用户，旨在为侧边栏卡片设置自定义动态或静态背景图。
  • 通过 custom.css 文件实现，配置灵活且不修改主题核心文件，方便更新维护。
  • 若有更多自定义样式需求，亦可在此文件中继续添加。

图片备份地址：Personal-card-beautification.gif