103 lines
4.5 KiB
Markdown
103 lines
4.5 KiB
Markdown
---
|
||
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
|
||
<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`~~
|