HEXO主题个人档美化

HEXO主题个人档美化：切换图片背景

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

一、创建 custom.css 文件

  1. 进入博客根目录（如 Hexo 的 blog/public）。
  2. 检查是否存在 css 文件夹，如果没有则新建一个。
  3. 在 css 文件夹内新建文件，命名为 custom.css。

最终路径为：

blog/public/css/custom.css

二、添加代码至 custom.css

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

1
2
3
4
5
6
7
8
9
10
/* 侧边栏头像卡片 */
#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;
}

三、替换图片路径

（1）本地图片（推荐）

  • 存放位置：将图片放入 public/images/ 目录。
  • 路径格式：
1
url('/images/你的图片名.jpg')
  • 示例：
1
background: url('/images/bg.png');

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

  • 路径格式：
1
url('https://example.com/完整图片链接.jpg')
  • 示例：
1
background: url('https://cdn.example.com/bg.jpg');

四、保存并生效

  • 确保文件路径正确：即 blog/public/css/custom.css
  • 在主题中引用：
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
  • 本地预览：运行 hexo server，查看效果
  • 正式部署：
1
hexo clean && hexo g && hexo d

五、效果示例与注意事项

（1）效果示意

效果展示

（2）常见问题处理

问题类型 解决方案说明
图片不显示 检查路径拼写是否正确；确保本地图片已复制至 public/images/ 文件夹。
对比度太低 可添加文字颜色样式，如 color: #ffffff;，提升可读性。
动画无效 清除浏览器缓存后再试；或尝试将 animation 相关 CSS 去掉。
样式不生效 检查是否正确引入了 custom.css，并确认缓存已清除。

六、进阶建议（可选）

你还可以在 custom.css 中追加以下内容：

1
2
3
4
5
6
/* 调整文字颜色与层级关系 */
.card-info {
  color: #fff;
  position: relative;
  z-index: 2;
}

七、总结

  • 适用于安知鱼主题用户想为侧边栏卡片设置自定义背景图。
  • 通过 custom.css 文件实现，配置灵活。
  • 若有更多自定义样式需求，亦可在此文件中继续添加。