1.图片背景加载优化

1.1-背景加载优化-全局背景图

全局 head 标签添加代码

<style>
  /* 博客全局背景图 */
  [data-theme='dark'] {
    --heo-background-image: url(https://api.miaomc.cn/image/get);
  }
  /* 背景图渐变样式 */
div#web_bg { 
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: transform; /* 添加性能优化 */
    background-image: var(--heo-background-image);
    background-attachment: fixed;
    background-position: 100%;
    background-size: cover;
    animation: blur-to-clear 1s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 normal
        backwards running,
      scale 1.5s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 both;
  }
</style>

1.2-文章封面图赖加载渐变模糊过度动画样式

<style>
#recent-posts > .recent-post-item .post_cover img.entered {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s;
    will-change: transform; /* 添加性能优化 */
    animation: blur-to-clear 2s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 normal
        backwards running,
      scale 1.5s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 both;
  }
</style>

1.3-不启用页脚底部，去掉底部多余黑块

<style>
span {
    padding: initial !important;
  }
</style>

2.修改字体

2.1-选择字体

推荐前往

100font.com

商用免费的中文字体的免费下载和在线预览-字体天下

免费字体-猫啃网

全部字体 - 字由 | 免费字体大全，5000+精选字体授权商用

喵闪字库-提供中文字体的在线预览和免费下载

2.2-压缩字体

为啥要进行字体压缩？我下载引入的字体有足足21MB，这个字体文件大小对于个人网站微薄的带宽来说太恐怖了，会极大的拖慢网站的加载速度，导致很不好的访问体验。于是接下来要对字体进行压缩重新上传。

字体压缩可使用该在线压缩工具：https://cloudconvert.com/ttf-to-woff2，将前面下载的ttf字体文件上传后进行压缩，最终21MB的字体文件被压缩到了11MB，压缩率达到了60%，最后在全局head标签中引入代码的文件后缀即可完成替换，看了下效果和没压缩前没区别，但是页面的加载速度有能直观的提升

如果想进一步压缩，推荐一个软件:Fontmin - 字体子集化方案

下载Windows端或者访问 ecomfe/fontmin: Minify font seamlessly Github使用

实际可以把很大的字体文件直接压缩到1~3M多点

这里我用的是3500字库，压缩下来只有1M多，而且保留了很多特殊符号，日文俄文等

也有Web端可以选择

字体超级压缩|工具喵

每天100次，但是限制20M

接下来把压缩过后的ttf文件转换成woff2文件

至此，21M的字体文件被压缩成了770kb，十分适合网站使用

2.3-加载字体

上传字体

将刚下载的字体上传到Halo附件管理模块中，或者上传到任何博客页面可以访问到的地方

引入字体

在Halo后台管理点击设置菜单，点击代码注入切换标签，在全局head标签中增加以下代码：

<style>
@font-face{
   font-family: "XiaolaiMonoSC";/* 自定义字体引用名称 */
   src: url('/upload/XiaolaiMonoSC-Regular.woff2');/* 字体文件链接或路径 */
}
*{
   font-family: "XiaolaiMonoSC" !important;
}
</style>

到这里我们自定义的字体就引入完成

3.加载自定义光标

仿照 github.com/imsyy/home 的光标

全局Head注入

<style>
    /* 全局禁用所有元素的系统光标 */
    * {
        cursor: none; /* Hide the default cursor for all elements */
    }

    body, html {
        margin: 0;
        height: 100%;
        background-color: #808080;
    }

    .cursor {
        position: fixed;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: white;
        pointer-events: none;
        z-index: 9999; /* 确保最顶端 */
        transform: translate(-50%, -50%);
    }

    .shadow {
        position: fixed;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
        pointer-events: none;
        z-index: 9998; /* 比鼠标指针低1层 */
        transition: transform 0.2s ease-in-out;
        transform: translate(-50%, -50%);
    }
</style>
    <div class="cursor" id="cursor"></div>
    <div class="shadow" id="shadow"></div>

    <script>
        const cursor = document.getElementById('cursor');
        const shadow = document.getElementById('shadow');
        
        let mouseX = 0;
        let mouseY = 0;
        let shadowX = 0;
        let shadowY = 0;

        // 跟踪相对于窗口的光标位置
        window.addEventListener('mousemove', function(e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
            cursor.style.left = mouseX + 'px';
            cursor.style.top = mouseY + 'px';
        });

        //  使阴影平滑地向光标移动
        function animateShadow() {
            shadowX += (mouseX - shadowX) * 0.3;
            shadowY += (mouseY - shadowY) * 0.3;

            shadow.style.left = shadowX + 'px';
            shadow.style.top = shadowY + 'px';

            requestAnimationFrame(animateShadow);
        }

        //   在窗口进入/离开时显示和隐藏光标
        window.addEventListener('mouseenter', function() {
            cursor.style.display = 'block';
            shadow.style.display = 'block';
        });

        window.addEventListener('mouseleave', function() {
            cursor.style.display = 'none';
            shadow.style.display = 'none';
        });

        //  在滚动时更新光标位置
        window.addEventListener('scroll', function() {
            cursor.style.left = mouseX + 'px';
            cursor.style.top = mouseY + 'px';
        });

        // 将 cursor: none; 应用于动态添加的元素，以防止出现任何系统光标
        document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll("a, button, input, select, textarea").forEach(el => {
                el.style.cursor = "none";
            });
        });

        // 检测选择更改以在文本选择期间保持自定义光标可见
        document.addEventListener('selectionchange', () => {
            const selection = document.getSelection();
            if (selection && !selection.isCollapsed) {
                cursor.style.display = 'block';
                shadow.style.display = 'block';
            }
        });

        animateShadow();
    </script>

4.移除广告拦截警告弹窗

halo版本更新带来的告警弹窗实在是影响用户体验，一旦有广告插件，每打开一次网站就会先弹窗，还不会自动关闭，有点恶心。。。

将下面的js代码写入到halo设置的代码注入的全局 head 标签中即可。

<!-- 移除告警弹窗 -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var originalAlert = window.alert; // 保存原始的 alert 函数
    window.alert = function(message) { // 重写 alert 函数
      if (message.includes("页脚信息可能被AdBlocker Ultimate拦截")) {
        console.log("弹窗被屏蔽:", message); // 输出提示信息到控制台
      } else {
        originalAlert(message); // 调用原始的 alert 函数，处理其他弹窗
      }
    };
  });
</script>

5.萌备

页脚注入

<style>
    .mengbei {
      text-align: center;
}
</style>
<div class="mengbei">
<a href="https://icp.gov.moe/?keyword=20249222" target="_blank">萌ICP备20249222号</a>
</div>