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>
License:
CC BY 4.0