hao博客主题是张洪大佬基于Hexo的Butterfly主题的魔改教程合集，而halo-theme-hao则是Halo从Hexo移植的主题。由于Halo建站工具有自己的一套后台管理逻辑，所以和在Hexo上使用有一定的区别。并且某一些样式用起来非常的难受。

一、CSS样式

1、首页样式

在顶部的右侧Banner图中，有一个今日卡片的展示，由于它的字体样式是使用的“todayCard-tips”和“todayCard-title”，这两个样式都是显示的白色的字体，在白色的背景下是看不清的，即便不是显示的白色，如果你使用的背景图比较的花的话，也有可能导致看不清卡片的展示文字。那么如何才能享受背景自由呢？我们可以将展示文字分离出来，增加一个背景。

#在检查样式时，查看到此块使用的样式是“todayCard-info”，我们可以通过在该块增加一个磨砂背景来使得文字展示块与Banner背景进行分离
#这里可以直接修改源代码，也可以使用代码注入的方式进行更改，我这里使用代码注入方式更改。
<style>
.todayCard-info {
  /* 磨砂玻璃核心效果 */
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景（可调整透明度） */
  backdrop-filter: blur(10px); /* 模糊效果（数值越大越模糊） */
  -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */

  /* 增强视觉效果 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明边框 */
  border-radius: 8px; /* 圆角（可选） */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 1); /* 轻微阴影 */

  /* 内容间距（根据需要调整） */
  padding: 10px 10px;  
}    
</style>

展示效果：

2、文章样式

文章中的粗体样式使用了 heo-lighttext 颜色，这样会导致粗体颜色会跟随主题颜色的变化而变化。如果你的主题浅色模式下的颜色是那种较淡的颜色，再加上白色的背景会导致粗体看不清，所以建议直接将粗体的样式覆盖掉。

#这里依旧使用代码注入的方式
<style>
  strong {
    all: revert; /* 重置所有样式到浏览器默认 */
}
</style>

3、近期文章简述

近期文章简述显示不全是参考5ee博客对hao模版的优化。可以使近期文章的展示显示简述。

<style>
/*调整首页，近期文章简述*/
  .recent-post-item .recent-post-info .recent-post-info-top .content {
    opacity: inherit;
}
</style>

二、‘关于’页面的51la网站统计展示

“关于”页面的51la网站展示算是给官方文档的一个补充。官方文档中只说了在网站中引入51la的统计代码，但是实际操作上仅引用网站统计V6的话，卡片无法正常显示。需要引用灵雀应用监控平台，卡片才会正常显示。注意！主题内id填写的还是V6的ID。

最开始也倒腾了好久，发现一直不

起作用，然后查看了源码，有用到灵雀的API。将灵雀的统计代码也注入后就正常了。

三、接入阿里巴巴矢量图标库（iconfont）

在使用iconfont时需要先在iconfont官网注册一个账号，然后进入主页在我的项目中新建一个项目。

在图标库里挑选自己想要使用的图标，加入购物车，在购物车内添加至项目中。

然后在自己的项目中生成在线代码。

每一次添加新的图标进项目里都需要重新生成在线链接。

将在线链接以该格式注入。

<link rel="stylesheet" href="你的symbol链接">
<script charset="UTF-8" src="你的font class链接"></script>

再将主题中的阿里矢量图打开，就可以使用矢量图了。

那么如何插入矢量图呢？

在iconfont官网中你的项目里找到你需要插入的图，复制代码，填入时记得在前方加上#。

这样就可以在你的菜单目录上添加上你想要的图标了。