INIT (I swear I will never re-init this repo again)

content/posts/百草园/咦，我的按钮呢？.md

@@ -0,0 +1,103 @@
+---
+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 主题，一个蛮人性化的组件。由于这个组件实在是太简单了，因此我一直没多管。
+
+不过，今天我在园子闲逛时，突然发现按钮不见了。
+
+![|500](https://img.viento.cc/emoji/EMJ-confused.webp "黑人问号.webp")
+
+原本以为又是 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`~~