咦，我的按钮呢？

各位老友们好，我是 Chlorine。

今天讲一件维护博客时遇到的趣事。本来想着周末更周报一起更了，但是想了想还是想水篇文章，~~拦不住的小氯酱呢~~。

园子的首页有一个 back-to-top 的按钮，继承自恐咖兵糖大佬的 Landscape 主题，一个蛮人性化的组件。由于这个组件实在是太简单了，因此我一直没多管。

不过，今天我在园子闲逛时，突然发现按钮不见了。

黑人问号.webp

原本以为又是 Swup 的锅（~~Swup：能不能别什么事情都怪到我身上~~），结果刷新了几次都没有反应。

嗯？

赶紧回到本地跑构建，结果发现按钮是正常的。

这就很奇怪了。⌘ + ⌥ + I 打开控制台，调试启动。

首先扔一串 JavaScript，看下这个元素还在不在。

const element = document.getElementById('back-to-top-btn');
if (element) {
    console.log('Element with id "back-to-top-btn" exists:', element);
} else {
    console.log('Element with id "back-to-top-btn" does not exist.');
}

结果是在的，这至少说明 HTML 没问题。

定位到查看器……为什么这个 HTML 是灰色的？

再看一会儿旁边的样式表……我的 lg-block 怎么被覆盖了？

赶紧去翻找，结果发现了一个神秘规则：

.w-full > .banner.el-carousel, .grid > .container > #aside-promotion, .flex-row > #propagandaLeft, .flex-row > #propagandaRight, .link > .image[src*=".qhimg.com/"], .back-to-top-wrapper, #back-to-top-btn, .back-to-top-btn {
	display: none !important;
}

嗯？这都是一堆什么？我不记得我有这个 CSS 规则啊？

再一看文件名，好家伙，这家伙直接把文件内容当成名字了。

去样式编辑器看看，不看不知道，一看吓一跳，这里面有一大堆 CSS，而且含有大量的链接。虽然不知道那是什么，但是一看其中的某些链接就不是什么好早餐饼干，具体是什么我就不说了，免得园子被请去喝茶。

小氯瞬间不淡定了。这该不会是什么注入攻击吧？

赶紧去排查 JavaScript，但是刚刚排查了几个文件，小氯突然想到了一个关键的问题：这一大堆东西，好像都被设置了 display: none; 啊？

让我仔细看看。那个 CSS 极长，里面有一大堆的东西，像什么 a[href="/e/member/register/index.php?tobind=0&groupid=1"]，什么 a[onclick$="'clicked', 'ad');"]，一堆不可描述的网站，还有一些~~牢朋友~~老朋友，比如说 Google 和 Facebook。

Suddenly, at that very instant, I had an epiphany.

既然这个 CSS 费这么大劲把这些东西设置成了不可见，而且这些看起来似乎是广告和恶意链接，那这会不会是我的广告屏蔽插件？

赶紧把 uBlock Origin 关掉，结果按钮显示出来了。

破案了，就是因为这个按钮的类名字起得不太好，所以被 uBlock Origin 误杀了。

那接下来的事情就好办了，回去改个类和 ID 名即可。这里小氯也搞了点小小的趣味：

<div class="genki-dash lg:block">
    <div id="sora-tabi-btn" class="sora-tabi-btn hide flex items-center rounded-2xl overflow-hidden transition"
        onclick="soraTabi()">
        <button aria-label="Sora Tabi" class="btn-card h-[3.75rem] w-[3.75rem] border-none">
            <div class="i-mdi-arrow-top"></div>
        </button>
    </div>
</div>

{{ with resources.Get "css/addon/b2t.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

{{ with resources.Get "js/b2t.js" }}
<script src="{{ .RelPermalink }}" defer></script>
{{ end }}

起一个比较萌的名字，一般就不会被误伤了呢ヾ(≧∇≦*)ゝ

~~Grok 甚至建议我起名为 rasengan-btn~~