约 1022 字
预计阅读 3 分钟
咦,我的按钮呢?
2024-10-09
博客
AI 摘要
109酱

各位老友们好,我是 Chlorine。

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

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

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

黑人问号.webp
黑人问号.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

咦,我的按钮呢?
https://www.yoghurtlee.com/eh-where-is-my-button/
作者
Chlorine
发布于
2024-10-09