halo代码注入——实现悬浮展示当前文章二维码 和 自定义主题字体

文章页面悬浮在二维码标志上面，就会把当前页面链接变成二维码并且展示出来，我当前使用的主题没有，所以写此文章记录一下。

效果展示

悬浮二维码效果展示

自定义字体效果展示

代码注入位置

代码一：悬浮二维码

原始

<style>
  .qr-code {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border: 1px solid #ddd;
    background-color: white;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  .show-qr-code .qr-code {
    display: block;
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 查找已有的二维码图标元素
    var qrIcon = document.querySelector('.fa-solid.fa-qrcode');
    var innerTool;

    if (qrIcon) {
      // 创建二维码容器
      var qrCodeDiv = document.createElement('div');
      qrCodeDiv.className = 'qr-code';
      qrIcon.parentElement.style.position = 'relative'; // 确保父元素有定位上下文
      qrIcon.parentElement.appendChild(qrCodeDiv);

      // 动态生成二维码
      qrIcon.addEventListener('mouseenter', function() {
        if (qrCodeDiv.innerHTML === '') {
          var url = window.location.href;
          new QRCode(qrCodeDiv, {
            text: url,
            width: 128,
            height: 128
          });
        }
        // 隐藏tooltip
        innerTool = document.querySelector('.tooltip.bs-tooltip-auto.fade.show');
        if (innerTool) {
          innerTool.style.display = 'none';
        }
        qrCodeDiv.style.display = 'block';
        
      });

      qrIcon.addEventListener('mouseleave', function() {
        qrCodeDiv.style.display = 'none';
        // 恢复tooltip
        //if (innerTool) {
          //innerTool.style.display = 'block';
        //}
      });
    }
  });
</script>

压缩之后

<style>.qr-code{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:150px;height:150px;border:1px solid #ddd;background-color:white;padding:10px;box-shadow:0 4px 8px rgba(0,0,0,0.1);z-index:1000}.show-qr-code .qr-code{display:block}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>document.addEventListener("DOMContentLoaded",function(){var qrIcon=document.querySelector(".fa-solid.fa-qrcode"),innerTool;if(qrIcon){var qrCodeDiv=document.createElement("div");qrCodeDiv.className="qr-code",qrIcon.parentElement.style.position="relative",qrIcon.parentElement.appendChild(qrCodeDiv),qrIcon.addEventListener("mouseenter",function(){if(""===qrCodeDiv.innerHTML){var url=window.location.href;new QRCode(qrCodeDiv,{text:url,width:128,height:128})}innerTool=document.querySelector(".tooltip.bs-tooltip-auto.fade.show"),innerTool&&(innerTool.style.display="none"),qrCodeDiv.style.display="block"}),qrIcon.addEventListener("mouseleave",function(){qrCodeDiv.style.display="none"})}});</script>

代码二：halo 代码注入字体设置

原始

<link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-webfont/1.7.0/style.css" />
<style>
  body,#post-content,.markdown-body {
    font-family: "LXGW WenKai",PingFang SC,Hiragino Sans GB,Droid Sans Fallback,Microsoft YaHei,sans-serif !important;
  }

  :root {
    --halo-comment-widget-base-font-family: "LXGW WenKai",PingFang SC,Hiragino Sans GB,Droid Sans Fallback,Microsoft YaHei,sans-serif !important;
    --halo-search-widget-base-font-family: "LXGW WenKai",PingFang SC,Hiragino Sans GB,Droid Sans Fallback,Microsoft YaHei,sans-serif !important;
  }
</style>

压缩后

<link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-webfont/1.7.0/style.css" /><style>body,#post-content,.markdown-body{font-family:"LXGW WenKai",PingFang SC,Hiragino Sans GB,Droid Sans Fallback,Microsoft YaHei,sans-serif!important}:root{--halo-comment-widget-base-font-family:"LXGW WenKai",PingFang SC,Hiragino Sans GB,Droid Sans Fallback,Microsoft YaHei,sans-serif!important;--halo-search-widget-base-font-family:"LXGW WenKai",PingFang SC,Hiragino Sans GB,Droid Sans Fallback,Microsoft YaHei,sans-serif!important}</style>