halo-theme-hao主题美化记录

halo-theme-hao 是一款 Halo2.0 的博客主题

移植于 Hexo 社区 hexo-theme-butterfly 主题中 Heo 的魔改

很多细节上的细致末节还是有一点缺陷

但是依然是一个非常优秀的主题

我参考的这个文章♪(^∇^*)欢迎肥来！halo-theme-hao食用指南 | 芥子

但是我又觉得显得比较突兀

我就修改了一下

<style>
.todayCard-info {
  /* 核心磨砂玻璃效果优化 */
  background: rgba(255, 255, 255, 0.15); /* 降低背景不透明度 */
  backdrop-filter: blur(12px) saturate(160%); /* 增加模糊度并提升色彩饱和度 */
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  
  /* 边框优化 */
  border: 1px solid rgba(255, 255, 255, 0.18); /* 更细更透明的边框 */
  
  /* 光影重构 */
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08), /* 外阴影更柔和 */
    inset 0 0 12px rgba(255, 255, 255, 0.1); /* 添加内发光增强玻璃质感 */
  
  /* 边缘过渡 */
  border-radius: 12px; /* 增大圆角使过渡更自然 */
  
  /* 内部细节 */
  padding: 16px; /* 增加内边距 */
  position: relative; /* 为伪元素定位准备 */
  overflow: hidden; /* 隐藏溢出的伪元素 */
  transition: all 0.4s ease; /* 添加过渡动画 */
}

/* 添加渐变覆盖层增强质感 */
.todayCard-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0.25), 
    rgba(255, 255, 255, 0.01)
  );
  z-index: -1;
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

/* 悬停效果增强交互感 */
.todayCard-info:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 24px rgba(0, 0, 0, 0.12),
    inset 0 0 16px rgba(255, 255, 255, 0.15);
}
</style>

再将代码注入全局head

效果展示

还有调用阿里iconfont 阿里巴巴矢量图标库

最开始怎么都不行跟着网上的文章来

后面发现网上的文章都只调用了css 同时调用js文件就可以引用彩色图标

还是在head插入

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4997368_qol1achqb0e.css">
<script charset="UTF-8" src="//at.alicdn.com/t/c/font_4997368_qol1achqb0e.js"></script>