---
slug: eh-where-is-my-button
summary: 好有趣的一个意外呢
tags:
- 博客
- 折腾
title: 咦，我的按钮呢？
date: 2024-10-09
description: 本文讲述了作者在维护博客时发现返回顶部按钮消失的趣事。最初怀疑是 Swup 插件的问题，但经过本地测试和调试后，发现按钮实际上存在于 HTML 中，只是被 CSS 隐藏了。进一步检查后，发现是广告屏蔽插件 uBlock Origin 误将按钮的类名当成广告或恶意链接的一部分隐藏了。最后，作者通过更改按钮的类名和 ID 解决了问题，并为此取了一个更具趣味性的名字，以避免未来被误识别。
categories: ["百草园"]
featuredImage: https://img.viento.cc/cover/eh-where-is-my-button-cover.webp
draft: false
---
各位老友们好，我是 Chlorine。
今天讲一件维护博客时遇到的趣事。本来想着周末更周报一起更了，但是想了想还是想水篇文章，~~拦不住的小氯酱呢~~。
园子的首页有一个 back-to-top 的按钮，继承自恐咖兵糖大佬的 Landscape 主题，一个蛮人性化的组件。由于这个组件实在是太简单了，因此我一直没多管。
不过，今天我在园子闲逛时，突然发现按钮不见了。
原本以为又是 Swup 的锅（~~Swup：能不能别什么事情都怪到我身上~~），结果刷新了几次都没有反应。
嗯？
赶紧回到本地跑构建，结果发现按钮是正常的。
这就很奇怪了。`⌘ + ⌥ + I` 打开控制台，调试启动。
首先扔一串 JavaScript，看下这个元素还在不在。
```js
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` 怎么被覆盖了？
赶紧去翻找，结果发现了一个神秘规则：
```css
.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 名即可。这里小氯也搞了点小小的趣味：
```html
{{ with resources.Get "css/addon/b2t.css" }}
{{ end }}
{{ with resources.Get "js/b2t.js" }}
{{ end }}
```
起一个比较萌的名字，一般就不会被误伤了呢 ヾ(≧∇≦*)ゝ
~~Grok 甚至建议我起名为 `rasengan-btn`~~