<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Css on Howar31 Blog</title><link>https://blog.howar31.com/tags/css/</link><description>Recent content in Css on Howar31 Blog</description><generator>Hugo</generator><language>zh-tw</language><lastBuildDate>Wed, 22 Apr 2026 20:34:23 +0800</lastBuildDate><atom:link href="https://blog.howar31.com/tags/css/index.xml" rel="self" type="application/rss+xml"/><item><title>Discord 完全隱藏封鎖/忽略的訊息</title><link>https://blog.howar31.com/posts/discord-hide-blocked-messages/</link><pubDate>Thu, 01 Jan 2026 00:00:00 +0000</pubDate><guid>https://blog.howar31.com/posts/discord-hide-blocked-messages/</guid><description>&lt;h2 id="前言"&gt;前言&lt;/h2&gt;
&lt;p&gt;Discord 提供了兩種「照顧心理衛生」的方式來處理不想看到的訊息：&lt;strong&gt;封鎖（Block）&lt;strong&gt;和&lt;/strong&gt;忽略（Ignore）&lt;/strong&gt;。這兩種功能可以幫助使用者避免看到特定使用者或伺服器的訊息，讓聊天環境更加舒適。&lt;/p&gt;
&lt;p&gt;然而，Discord 官方並沒有提供完全隱藏這些訊息的功能。即使你封鎖或忽略了某個使用者，他們的訊息仍然會在聊天室中顯示一個提示，例如「你已封鎖此使用者」或「你已忽略此使用者」的系統訊息。這些提示雖然不會顯示實際的訊息內容，但仍然會在聊天記錄中佔據空間，對於想要完全「眼不見為淨」的使用者來說，這可能還不夠。&lt;/p&gt;
&lt;div class="hint-container tip"&gt;
 &lt;p class="hint-container-title"&gt;
 &lt;i class="fas fa-lightbulb" aria-hidden="true"&gt;&lt;/i&gt;
 Tip
 &lt;/p&gt;
 忽略功能在顯示邏輯（HTML 結構）上與封鎖功能是相同的，因此我們可以使用相同的方法來處理這兩種情況。
&lt;/div&gt;

&lt;h2 id="實作"&gt;實作&lt;/h2&gt;
&lt;h3 id="為什麼選擇-css-injection"&gt;為什麼選擇 CSS Injection？&lt;/h3&gt;
&lt;p&gt;要達成完全隱藏這些訊息提示，我們有幾種方式可以選擇：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Javascript Injection&lt;/strong&gt;：可以動態修改 DOM 元素&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;CSS Injection&lt;/strong&gt;：透過 CSS 選擇器隱藏元素&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;我選擇使用 &lt;strong&gt;CSS Injection&lt;/strong&gt; 的方式，主要原因如下：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;效能考量&lt;/strong&gt;：CSS 的效能通常比 JavaScript 好，不會對頁面造成額外的運算負擔&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;動態載入問題&lt;/strong&gt;：Discord 使用動態載入內容，JavaScript 在處理動態載入的元素時可能會遇到時機問題，需要額外監聽 DOM 變化&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;簡單直接&lt;/strong&gt;：CSS 選擇器可以直接針對特定的 HTML 結構進行隱藏，不需要複雜的邏輯&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="解除-developer-tool-防護"&gt;解除 Developer Tool 防護&lt;/h3&gt;
&lt;p&gt;Discord 官方有針對開發者工具（Developer Tool）進行警告與防護機制。在進行以下操作之前，請先解除 Discord 對開發者工具的防護。&lt;/p&gt;
&lt;h4 id="1-無法開啟開發者工具"&gt;1. 無法開啟開發者工具&lt;/h4&gt;
&lt;p&gt;如果你無法使用 &lt;code&gt;Ctrl+Shift+I&lt;/code&gt;（Windows/Linux）或 &lt;code&gt;Cmd+Option+I&lt;/code&gt;（macOS）開啟開發者工具，需要先在設定檔中啟用開發者工具。&lt;/p&gt;
&lt;div class="hint-container warning"&gt;
 &lt;p class="hint-container-title"&gt;
 &lt;i class="fas fa-exclamation-triangle" aria-hidden="true"&gt;&lt;/i&gt;
 Warning
 &lt;/p&gt;
 必須先解除防護後，才能使用 &lt;code&gt;Ctrl+Shift+I&lt;/code&gt;（Windows/Linux）或 &lt;code&gt;Cmd+Option+I&lt;/code&gt;（macOS）開啟開發者工具。
&lt;/div&gt;

&lt;h5 id="windows"&gt;Windows&lt;/h5&gt;
&lt;p&gt;在 Windows 上，請編輯以下檔案：&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-text"&gt;%appdata%/discord/settings.json
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;在 &lt;code&gt;settings.json&lt;/code&gt; 中加入以下設定：&lt;/p&gt;</description></item></channel></rss>