Halo主题美化记录
本文最后更新于 2024-09-27，文章内容可能已经过时。
Halo-Theme-Hao 是一款适用于 Halo2.x 的博客主题。
移植自 Hexo 社区中 张洪 Heo 对 Hexo-Theme-Butterfly 主题的魔改版本。
当前网站所用版本为：1.5.8
不过后续网站会基于该主题版本进行二创的自定义修改。
一、关于界面右栏默认长度问题
最后一个span标签因为默认长度问题，将内容强行划分为两句，所以在父级的div标签加了长度，让最后一句话完整显示。
<div class="author-content-item-tips">个人见解</div>
<h2>优秀的产品
<br>
<span class="inline-word">源自</span>
<div class="mask" style="width: 400px;">
<span class="first-tips" data-show="">独特的理解</span>
<span>出色的设计</span>
<span>高效的编程</span>
<span data-up="">人性化的用户体验</span>
</div>
</h2>二、修改首页个人信息栏的跳转路径
在服务器中找到halo/data/themes/theme-hao/templates/modules/widgets/aside/profile.html 文件进行编辑，找到以下代码后修改a标签跳转路径为关于页面的路径。
<!-- 跳转信息 -->
<div class="banner-button-group">
<a class="banner-button" href="/aboutMe">
<i class="haofont hao-icon-circle-arrow-right"></i>
<span class="banner-button-text">了解更多</span>
</a>
</div>三、添加友联自主提交插件
1、增加模板内容
找到theme-hao/templates/macro/content-links.html文件，找到如下内容：
<th:block th:if="${not #strings.isEmpty(theme.config.link.linksArticle)}"
th:utext="${theme.config.link.linksArticle}"> </th:block>在该代码之后，添加以下内容：
<!-- 友链自助提交插件 start -->
<th:block th:if="${theme.config.link.FriendLinkSubmitPlugin}">
<details>
<summary>友情链接页免责声明</summary>
<h2 id="免责声明">
<a href="#免责声明" class="headerlink" title="免责声明" data-pjax-state=""></a>免责声明
</h2>
<p>
本博客遵守中华人民共和国相关法律。本页内容仅作为方便学习而产生的快速链接的链接方式，对与友情链接中存在的链接、好文推荐链接等均为其他网站。我本人能力有限无法逐个甄别每篇文章的每个字，并无法获知是否在收录后原作者是否对链接增加了违反法律甚至其他破坏用户计算机等行为。因为部分友链网站甚至没有做备案、域名并未做实名认证等，所以友链网站均可能存在风险，请你须知。
</p>
<p>所以在我力所能及的情况下，我会包括但不限于：</p>
<ol>
<li>针对收录的博客中的绝大多数内容通过标题来鉴别是否存在有风险的内容</li>
<li>在收录的友链好文推荐中检查是否存在风险内容</li>
</ol>
<p>但是你在访问的时候，仍然无法避免，包括但不限于：</p>
<ol>
<li>作者更换了超链接的指向，替换成了其他内容</li>
<li>作者的服务器被恶意攻击、劫持、被注入恶意内容</li>
<li>作者的域名到期，被不法分子用作他用</li>
<li>作者修改了文章内容，增加钓鱼网站、广告等无效信息</li>
<li>不完善的隐私保护对用户的隐私造成了侵害、泄漏</li>
</ol>
<p>最新文章部分为机器抓取，本站作者未经过任何审核和筛选，本着友链信任原则添加的。如果你发现其中包含违反中华人民共和国法律的内容，请及时联系和举报。该友链会被拉黑。</p>
<p>如果因为从本页跳转给你造成了损失，深表歉意，并且建议用户如果发现存在问题在本页面进行回复。通常会很快处理。如果长时间无法得到处理，建议联系<strong>1170764787@qq.com</strong>。
</p>
</details>
<details class="folding-tag">
<summary>出现问题的友链</summary>
<h2 id="出现问题的友链">
<a href="#出现问题的友链" class="headerlink" title="出现问题的友链" data-pjax-state=""></a>出现问题的友链
</h2>
<p>如果友链出现问题会展示在这里，不再进行友链相关审查，如果已解决问题还请主动告知。</p>
</details>
<details>
<summary>🧀 友链申请方式</summary>
<h2 id="本站添加的友链要求">
<a href="#本站添加的友链要求" class="headerlink" title="本站添加的友链要求" data-pjax-state=""></a>本站添加的友链要求
</h2>
<ol>
<li>能够正常访问</li>
<li>含本站友链</li>
<li>网站类型为<strong>个人博客</strong>
</li>
</ol>
<p>请（<a onclick="addFriendLink()" href="#post-comment" data-pjax-state="anchor">点击这里快速添加</a>）
站点信息申请友情链接，申请后在我不忙的时候会统一添加，即使不通过也会给予邮件回复。</p>
<h2 id="你提交的信息有可能被修改">
<a href="#你提交的信息有可能被修改" class="headerlink" title="你提交的信息有可能被修改" data-pjax-state=""></a>你提交的信息有可能被修改
</h2>
<p>如果有修改，我会将修改内容进行告知</p>
<ol>
<li>为了友链相关页面和组件的统一性和美观性，可能会对你的昵称进行缩短处理，例如昵称包含<strong>博客</strong>、<strong>XX的XX</strong>等内容或形式将被简化。
</li>
<li>为了图片加载速度和内容安全性考虑，头像实际展示图片均使用博客自己图床，所以无法收到贵站自己的头像更新，如果有迫切的更改信息需求，请在本页的评论中添加。</li>
<!-- <li>为了保证鱼塘能够正确抓取文章，所有的友链链接要求为博客主页链接，而不是个人主页链接。</li> -->
</ol>
<h2 id="我的友链信息">
<a href="#我的友链信息" class="headerlink" title="我的友链信息" data-pjax-state=""></a>我的友链信息
</h2>
<p>为了避免图床问题，建议你将头像存储到贵站图床。</p>
<ol>
<li>网站名称: <code>[[${site.title}]]</code>
</li>
<li>网站地址: <code>[[${theme.config.link.url}]]</code>
</li>
<li>RSS订阅地址: <code>[[${theme.config.link.rssSubcribeUrl}]]</code>
</li>
<li>头像: <code>[[${theme.config.link.logoUrl}]]</code>
</li>
<li>描述: <code>[[${theme.config.link.siteDescription}]]</code>
</li>
</ol>
<h2 id="友链申请格式如下">
<strong>
友链申请格式如下🥳
</strong>
</h2>
<div class="code-toolbar">
<pre class="line-numbers language-bash" tabindex="0"><code class="hljs language-bash">昵称（请勿包含博客等字样）：
网站地址（要求博客地址，请勿提交个人主页）：
RSS订阅地址（请提供有效的订阅地址）：
头像图片url（请提供尽可能清晰的图片，最好是自己的图片地址）：
描述：
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<div class="toolbar c-title c-hr">
<div class="toolbar-item">
<span>Bash</span>
</div>
<div class="custom-item absolute top-0">
<i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i>
<i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i>
</div>
<div class="custom-item absolute top-0">
<i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i>
<i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i>
</div>
</div>
</div>
<h2 id="友链申请格式如下">
<strong>
示例 📢：
</strong>
</h2>
<div class="code-toolbar">
<pre class="line-numbers language-bash" tabindex="0"><code class="hljs language-bash">昵称：[[${site.title}]]
网站地址：[[${theme.config.link.url}]]
RSS订阅地址：[[${theme.config.link.rssSubcribeUrl}]]
头像图片url：[[${theme.config.link.logoUrl}]]
描述：[[${theme.config.link.siteDescription}]]
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<div class="toolbar c-title c-hr">
<div class="toolbar-item">
<span>Bash</span>
</div>
<div class="custom-item absolute top-0">
<i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i>
<i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i>
</div>
<div class="custom-item absolute top-0">
<i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i>
<i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i>
</div>
</div>
</div>
</details>
<div id="friends-link-self-submit">
<div class="whitebox">
<h2 style="text-align: center;">🧀本站友链信息</h2>
<div class="childbox">
<ol>
<li>网站名称: <code>[[${site.title}]]</code>
</li>
<li>网站地址: <code>[[${theme.config.link.url}]]</code>
</li>
<li>RSS订阅地址: <code>[[${theme.config.link.rssSubcribeUrl}]]</code>
</li>
<li>头像: <code>[[${theme.config.link.logoUrl}]]</code>
</li>
<li>描述: <code>[[${theme.config.link.siteDescription}]]</code>
</li>
</ol>
</div>
</div>
</div>
<div class="whitebox">
<div class="childbox" >
<p>请<strong>勾选</strong>你符合的条件：</p>
<div id="friendlink_checkboxs">
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox1" onclick="checkForm()">我已添加 <b>[[${site.title}]]</b> 博客的友情链接</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox2" onclick="checkForm()">我的链接主体为 <b>个人</b>，网站类型为<b>博客</b>
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在中国大陆区域正常访问</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合中国大陆法律法规</label>
</p>
</div>
</div>
</div>
<script>
var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
if(twikooSubmit) {
twikooSubmit.style.opacity = "0";
}
function checkForm() {
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
var checkbox4 = document.getElementById("checkbox4");
var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked) {
twikooSubmit.style.opacity = "1";
twikooSubmit.style.height = "auto";
twikooSubmit.style.overflow = "auto";
var input = document.getElementsByClassName('el-textarea__inner')[0];
let evt = document.createEvent('HTMLEvents');
evt.initEvent('input', true, true);
input.value = '昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\nRSS订阅地址（请提供有效的订阅地址）：\n头像图片url（请提供尽可能清晰的图片，最好是自己的图片地址）：\n描述：\n';
input.dispatchEvent(evt);
input.focus();
input.setSelectionRange(-1, -1);
} else {
twikooSubmit.style.opacity = "0";
twikooSubmit.style.height = "0";
twikooSubmit.style.overflow = "hidden";
}
}
</script>
<style>
.whitebox{
background-color: #fff;
border-radius: 12px;
}
.childbox{
margin: 0px 12px 12px 12px;
}
.tk-comments>.tk-submit{opacity:0;height:0;transition:opacity .5s,height .5s;overflow:hidden}
.checkbox {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.checkbox input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: 16px;
width: 16px;
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
-o-transition: all 0.15s ease-out 0s;
-ms-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
cursor: pointer;
display: inline-block;
outline: none;
border-radius: 2px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin-right: 8px;
border: 2px solid #2196f3;
pointer-events: none;
}
.checkbox input[type="checkbox"]:before {
left: 1px;
top: 5px;
width: 0;
height: 2px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.checkbox input[type="checkbox"]:after {
right: 7px;
bottom: 3px;
width: 2px;
height: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.checkbox input[type="checkbox"]:checked {
background: #2196f3;
}
.checkbox input[type="checkbox"]:checked:before {
left: 0;
top: 7px;
width: 6px;
height: 2px;
}
.checkbox input[type="checkbox"]:checked:after {
right: 3px;
bottom: 1px;
width: 2px;
height: 10px;
}
.checkbox.minus input[type="checkbox"]:after {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px;
}
.checkbox.minus input[type="checkbox"]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}
.checkbox.minus input[type="checkbox"]:checked:after {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}
.checkbox.plus input[type="checkbox"]:before {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px;
}
.checkbox.plus input[type="checkbox"]:after {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
left: 5px;
top: 1px;
width: 2px;
height: 0;
}
.checkbox.plus input[type="checkbox"]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}
.checkbox.plus input[type="checkbox"]:checked:after {
left: 5px;
top: 1px;
width: 2px;
height: 10px;
}
.checkbox.times input[type="checkbox"]:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
left: 3px;
top: 1px;
width: 0;
height: 2px;
}
.checkbox.times input[type="checkbox"]:after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
right: 3px;
top: 1px;
width: 0;
height: 2px;
}
.checkbox.times input[type="checkbox"]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}
.checkbox.times input[type="checkbox"]:checked:after {
right: 1px;
top: 5px;
width: 10px;
height: 2px;
}
.checkbox input[type="radio"] {
border-radius: 50%;
}
.checkbox input[type="radio"]:before {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 2px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.checkbox input[type="radio"]:checked:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background: var(--text-bg-hover);
}
.checkbox.red input {
border-color: #fe5f58;
}
.checkbox.red input[type="checkbox"]:checked {
background: #fe5f58;
}
.checkbox.red input[type="radio"]:checked:before {
background: #fe5f58;
}
.checkbox.green input {
border-color: #3dc550;
}
.checkbox.green input[type="checkbox"]:checked {
background: #3dc550;
}
.checkbox.green input[type="radio"]:checked:before {
background: #3dc550;
}
.checkbox.yellow input {
border-color: #ffbd2b;
}
.checkbox.yellow input[type="checkbox"]:checked {
background: #ffbd2b;
}
.checkbox.yellow input[type="radio"]:checked:before {
background: #ffbd2b;
}
.checkbox.cyan input {
border-color: #1bcdfc;
}
.checkbox.cyan input[type="checkbox"]:checked {
background: #1bcdfc;
}
.checkbox.cyan input[type="radio"]:checked:before {
background: #1bcdfc;
}
.checkbox.blue input {
border-color: #2196f3;
}
.checkbox.blue input[type="checkbox"]:checked {
background: #2196f3;
}
.checkbox.blue input[type="radio"]:checked:before {
background: #2196f3;
}
.checkbox p {
display: inline-block;
margin-top: 2px !important;
margin-bottom: 0 !important;
}
.checkbox input[type="checkbox"]:before,
.checkbox input[type="checkbox"]:after {
position: absolute;
content: "";
background: #fff;
}
</style>
</th:block>
<!-- 友链自助提交插件 end -->为顶部的申请友链按钮添加定位锚点：将如下代码中a标签的href属性替换为#friend-link-submit-plugin即可。
<a class="banner-button" href="#friends-link-self-submit" rel="external nofollow">
<i class="haofont hao-icon-link"></i>
<span class="banner-button-text">申请友链</span>
</a>2、增加配置项
为了便于修改一些友链自助提交插件兼容模版的一些信息，可以增加一些配置项方便后续修改，找到主题根目录下的 settings.yaml 文件，在友链设置 (group 为 link 的配置项) 下增加以下配置：
- group: link
label: 友链
formSchema:
- $formkit: text
name: smallTitle
label: 小标题
value: 友情链接
- $formkit: text
name: bigTitle
label: 大标题
value: 我和我的小伙伴们
- $formkit: url
name: fcircleUrl
value: "/fcircle"
label: 鱼塘链接
- $formkit: url
name: linksUrl
value: "/links"
label: 友链链接
- $formkit: radio
name: linksCanvas
label: 互动友链
value: false
options:
- label: 打开
value: true
- label: 关闭
value: false
- $formkit: checkbox
name: enable_comment
label: 启用评论
help: "启用链接插件原生适配的评论组件，需要链接插件 >= 1.4.0 版本"
- $formkit: code
name: linksArticle
height: 300px
label: 底部显示内容
language: html
- $formkit: radio
name: FriendLinkSubmitPlugin
label: 友链自助提交插件
id: FriendLinkSubmitPlugin
key: FriendLinkSubmitPlugin
value: false
options:
- label: 启用
value: true
- label: 禁用
value: false
- $formkit: url
if: $get(FriendLinkSubmitPlugin).value
name: url
value:
label: 网站地址
- $formkit: url
if: $get(FriendLinkSubmitPlugin).value
name: logoUrl
value:
label: 头像地址
- $formkit: url
if: $get(FriendLinkSubmitPlugin).value
name: rssSubcribeUrl
value:
label: rss订阅地址
- $formkit: text
if: $get(FriendLinkSubmitPlugin).value
name: siteDescription
value:
label: 站点描述
help: 区分与系统设置中seo选项的站点描述，如不填写，则默认为系统设置中seo选项的站点描述3、增加模板样式
找到theme-hao/templates/assets/zhheo/zhheoblog.css文件，在文件最后添加如下样式：
/** 友链自助提交样式 start **/
#friends-link-self-submit{
margin: -15px 0 8px;
padding: 5px 0 8px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
@media screen and (max-width: 500px) {
#friends-link-self-submit .right-select-condition #friendlink_checkboxs{
width: 100% !important;
}
#friends-link-self-submit .left-link-info .personal-links-info .logo-inline span{
width: 210px;
height: 30px;
overflow-x: scroll;
overflow-x: hidden;
}
}
#friends-link-self-submit .left-link-info .headline{
font-size: 18px;
letter-spacing: 1px;
color: var(--heo-fontcolor);
}
#friends-link-self-submit .left-link-info .personal-links-info{
width: fit-content;
padding: 2px 16px 4px;
margin: 0 0 15px;
border: 1px solid var(--style-border-always);
box-shadow: var(--heo-shadow-border);
border-radius: 12px;
background: var(--heo-card-bg);
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg{
display: flex;
height: 28px;
margin: 16px 0;
justify-content: flex-start;
align-items: center;
font-size: 16px;
transition: .8s;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg span{
font-size: 13px;
margin-left: 6px;
background: var(--heo-secondbg);
padding: 2px 8px;
border-radius: 12px;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg:hover{
color: var(--heo-theme);
transition: .8s;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg .copy-btn{
width: 28px;
height: 28px;
padding: 5px;
margin-left: 6px;
background: var(--heo-secondbg);
border-radius: 50%;
box-shadow: var(--heo-shadow-border);
vertical-align: middle;
appearance: none;
transition: .7s;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg .copy-btn:hover{
color: var(--heo-theme);
cursor: pointer;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg .copy-tips-box{
font-size: 14px;
transition: .8s;
}
/*右侧自助提交选择框样式*/
#friends-link-self-submit .right-select-condition{
margin-left: 20px;
margin-top: 0;
}
#friends-link-self-submit .right-select-condition .tips{
font-size: 18px;
letter-spacing: 1px;
font-weight: bold;
margin: 20px 0 14px;
}
#friends-link-self-submit .right-select-condition #friendlink_checkboxs{
width: fit-content;
padding: 6px 16px;
margin: 0 0 15px;
border: 1px solid var(--style-border-always);
box-shadow: var(--heo-shadow-border);
border-radius: 8px;
background: var(--heo-card-bg);
}
#friends-link-self-submit #friendlink_checkboxs .self-submit-checkbox{
display: flex;
height: 28px;
justify-content: flex-start;
align-items: center;
margin: 16px 0;
}
#friends-link-self-submit #friendlink_checkboxs .self-submit-checkbox .origin-checkbox{
display: block;
border-radius: 3px;
border: 1px solid var(--style-border);
}
#friends-link-self-submit #friendlink_checkboxs .self-submit-checkbox span{
margin-left: 8px;
font-size: 14px;
background-color: var(--heo-secondbg);
border-radius: 12px;
padding: 0 8px;
}
/** 友链自助提交样式 end **/至此，已完成所有修改，在上传了主题文件夹后请重载主题配置，清理模板缓存，并启用相关配置项才能生效！
参考博文：
四、移除广告拦截警告弹窗
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>参考：https://blog.flycat.tech/archives/halo-blog-hao-theme-how-to-remove-ad-blocking-alerts
如果在修改美化过程中遇到了问题，欢迎评论区讨论，让教程变得更完善，希望我的修改对你有所帮助。
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
