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。将灵雀的统计代码也注入后就正常了。