
Halo 网站配置与优化
(hao 主题)移除广告拦截弹窗
在 Halo 控制台的 设置->代码注入 中头部加入以下代码屏蔽弹窗(hao 主题不加这个会不停弹出广告拦截)
<!-- 移除告警弹窗 -->
<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>
(hao 主题)自定义个人技术栈的图标大小与倾斜设置
默认情况更改个人技术栈的图标大小会缩得很小,此时只需更改 Halo 运行目录下的 /themes/theme-hao/templates/assets/zhheo/zhheoblog.css 下的 .tags-group-icon img 选择器
图标默认竖直移动,更改下面注释的属性以获得倾斜效果。
.tags-group-icon img {
/*宽度加大(默认60%)*/
width: 85%;
/*设置倾斜(默认注释)*/
rotate: -50deg;
}
.tags-group-all {
display: flex;
/*设置倾斜(默认0)*/
transform: rotate(50deg);
/*向上移动*/
margin-top: -10rem;
margin-right: 10rem
}
#bannerGroup .tags-group-wrapper {
margin-top: 0;
display: flex;
flex-wrap: wrap;
/*增加滚动动画时长(根据图片数量而定,默认60s)*/
animation: rowup 80s linear infinite;
/*加大宽度(默认320px)*/
width: 400px;
margin-left: auto
}
(hao 主题)首页今日卡片字体无法随主题变动
更改 Halo 运行目录下的 /themes/theme-hao/templates/assets/zhheo/zhheoblog.css 文件
/*今日介绍文本*/
.topGroup .todayCard .todayCard-info {
/*color: var(--white);*/
color: var(--heo-fontcolor);
}
/*更多推荐按钮*/
.topGroup .banner-button {
/*background: var(--heo-white-op);*/
background: var(--heo-card-bg-op);
/*color: var(--white);*/
color: var(--heo-fontcolor);
}
给侧边栏添加天气组件
插件网址:https://weatherwidget.org/zh/
<div id="ww_6a6bfede3f9b6" v='1.3' loc='auto' a='{"t":"horizontal","lang":"zh","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'><a href="https://weatherwidget.org/zh/" id="ww_6a6bfede3f9b6_u" target="_blank">天气插件</a></div><script async src="https://app3.weatherwidget.org/js/?id=ww_6a6bfede3f9b6"></script>
<style>
#ww_6a6bfede3f9b6 {
border-radius: 15px; /* 统一设置四个角为15px圆角 */
overflow: hidden; /* 防止内部内容溢出破坏圆角效果 */
}
</style>
页尾徽标的制作
进入 https://simpleicons.org 查询想要的图标,然后在 https://shields.io/badges 中设置文案和颜色,把图标名字写入到 logo 参数中。
站点地图的地址出现 localhost 的情况
检查站点地图插件生成的站点地图 https://<yourhost.com>/sitemap.xml,<url> 中如果出现 localhost 或 127.0.0.1 的话,需要更改 docker-compose.yaml 中 command 里的 --halo.external-url 参数为外部访问的真实 URL。
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果