使用「AC-Baidu-CSS」優化百度搜索結果

兩年前因為受不了百度搜索結果裡面夾雜著包括但不限於「視頻大全」、「百家號」、「百度股市通」、「百度健康」等等一大堆亂七八糟的東西而寫了一篇《優化一下百度搜索結果》的文章。

兩年之後百度還是這個德性，還增加了「AI 回覆」、「彈幕互動」等等一系列新大便💩。

個人認為搜索引擎只需要向用戶展示搜索結果就好了，沒必要搞出這麼多花裡胡哨的功能。本著這個精神，最近花了點時間對以前編寫的樣式重新進行了優化，加入了深色模式（這裡吐槽一下 AC-baidu - 重定向腳本自帶的深色模式寫得太拉了... 深色模式下很多地方的字都看不清）以及自動同步樣式源（需要配合腳本）兩個新功能。

AC-Baidu-CSS#

AC-Baidu-CSS 預覽

百度搜索原效果與 AC-Baidu-CSS 搭配 AC-baidu - 重定向效果對比：

::: gallery
https://cdn.vinking.top/dghGtC3JrGtwvBx.webp
https://cdn.vinking.top/moAI2z0J8cUOUXD.webp
https://cdn.vinking.top/caZ4PCtl8LavZlY.webp
:::

可以在下面鏈接找到我正在用的同款規則：

安裝指南#

使用前準備#

要開始使用 AC-Baidu-CSS ，請按照以下步驟操作：

確保你的瀏覽器安裝並啟用油猴插件以及 AC-Baidu 重定向腳本。
訪問 AC-Baidu 重定向腳本的配置頁面。
按照以下圖片配置 AC-Baidu 重定向腳本

全局配置項#

全局配置項

百度配置項#

百度配置項

到這裡就完成了 AC-Baidu 重定向腳本的配置，下面開始引入 AC-Baidu-CSS 。

配置 AC-Baidu-CSS#

方法一、自動同步樣式源（推薦）#

因為 AC-Baidu 重定向腳本並沒有解析外聯樣式表的功能，所以需要搭配下面的腳本實現自動同步樣式功能：

// ==UserScript==
// @name         百度樣式優化【訂閱】
// @namespace    https://www.vinking.top/
// @version      2.4
// @description  通過訂閱相應的 CSS 規則，實現跨設備同步屏蔽效果。
// @author       Vinking
// @match        https://www.baidu.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=baidu.com
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

(function () {
  "use strict";
  // 訂閱源
  const cssLink = "https://sub.vinking.top/style.css";

  // 預定義的CSS樣式
  const predefinedCSS = `
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.setting {
  transition: all 0.35s ease-in-out;
  padding: 3px 11px;
  border-radius: 6px;
  border: none;
  text-align: left;
  margin: 0px 5px;
  cursor: pointer;
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgb(240, 240, 240);
}

#ADBlock_Setting {
  position: fixed;
  top: 60px;
  right: 20px;
  background-color: rgba(209, 213, 219, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 20px;
  border-radius: 10px;
  border: none;
  z-index: 9999;

  & > textarea {
    width: 400px;
    height: 400px;
    border: none;
    border-radius: 10px;
    padding: 10px 5px;
    resize: none;
    margin: 10px 0px;
    position: relative;
  }
  & > textarea:focus {
    outline: none;
  }
  & button {
    transition: all 0.35s ease-in-out;
    padding: 3px 11px;
    border-radius: 6px;
    border: none;
    text-align: left;
    margin: 0px 5px;
    cursor: pointer;
    color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: #3478bf;
  }
  & > h2 {
    margin: 0 0 10px 0;
    font-size: 20px;
  }
  & > p {
    margin: 0;
    font-size: 12px;
  }
  & > textarea::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    background-color: transparent !important;
  }
  & > textarea::-webkit-scrollbar {
    width: 6px;
    height: 0;
  }
  & > textarea::-webkit-scrollbar-corner {
    background: unset;
  }
  & > textarea::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 5px;
  }
  & > textarea::-webkit-scrollbar-thumb {
    background: rgba(135, 135, 135, 0.4);
    border-radius: 6px;
  }

  & > textarea::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-radius: 5px;
  }
  & > textarea::-webkit-scrollbar-track {
    background: rgba(135, 135, 135, 0.1);
  }
  & > textarea::-webkit-scrollbar-track {
    background-color: #fff;
  }
}
.ADBlock_hidden {
  display: none;
}
.wrapper_new #u {
  top: 50px;
}
@media screen and (min-width: 1225px) {
  .wrapper_new #u {
    top: 0px !important;
  }
}`;

  GM_addStyle(predefinedCSS);
  const savedCSS = GM_getValue("cssContent");
  if (savedCSS) {
    GM_addStyle(savedCSS);
  }

  window.addEventListener("DOMContentLoaded", () => {
    function createElementWithClassAndId(tag, className, id, textContent) {
      const element = document.createElement(tag);
      element.className = className;
      element.id = id;
      element.textContent = textContent;
      return element;
    }

    function addStylesButton(uElement) {
      const addButton = createElementWithClassAndId(
        "button",
        "setting",
        "ADBlock_Button",
        "規則設置"
      );
      uElement?.insertBefore(addButton, uElement.firstChild);
      return addButton;
    }

    function createSettingsDiv() {
      const settingsDiv = createElementWithClassAndId(
        "div",
        "ADBlock_hidden",
        "ADBlock_Setting",
        ""
      );

      settingsDiv.innerHTML = `
        <h2>目前使用的過濾規則</h2>
        <p id="syncTime"></p>
        <p>規則源：${cssLink
          .replace(/(http|https):\/\//, "")
          .replace(/\/.*/, "")}</p>
        <textarea id="ADBlock_Rule"></textarea>
        <br />
        <div class="flex align-center justify-center">
            <button id="ADBlock_Save" class="setting">保存</button>
            <button id="ADBlock_Close" class="setting">關閉</button>
            <button id="ADBlock_Updata" class="setting">從URL更新</button>
            <input type="checkbox" id="ADBlock_AutoUpdate" />自動更新
        </div>`;
      document.body.appendChild(settingsDiv);
      return settingsDiv;
    }

    const uElement = document.getElementById("u");
    const addButton = addStylesButton(uElement);
    const settingsDiv = createSettingsDiv();

    const updateButton = document.getElementById("ADBlock_Updata");
    const saveButton = document.getElementById("ADBlock_Save");
    const closeButton = document.getElementById("ADBlock_Close");
    const textarea = document.getElementById("ADBlock_Rule");
    const syncTimeLabel = document.getElementById("syncTime");
    const setting = document.getElementById("ADBlock_Setting");
    const settingsButton = document.getElementById("ADBlock_Button");
    const autoUpdateCheckbox = document.getElementById("ADBlock_AutoUpdate");

    autoUpdateCheckbox.checked = GM_getValue("autoUpdate", false);
    settingsButton.addEventListener("click", () => {
      setting.classList.toggle("ADBlock_hidden");
    });

    autoUpdateCheckbox.addEventListener("change", (event) => {
      GM_setValue("autoUpdate", event.target.checked);
    });

    const formatTime = (time) =>
      new Date(time)
        .toLocaleString(undefined, {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
        })
        .replace(/(\d+)\/(\d+)\/(\d+), (\d+:\d+:\d+)/, "$1/$2/$3 $4");

    const updateTime = `規則同步時間：${formatTime(
      new Date(GM_getValue("lastUpdate", 0))
    )}`;

    // 計算距離下次更新时间的天數
    const now = new Date();
    const lastUpdate = new Date(GM_getValue("lastUpdate", 0));
    const oneWeek = 7 * 24 * 60 * 60 * 1000;
    const daysUntilUpdate = Math.ceil(
      (lastUpdate.getTime() + oneWeek - now.getTime()) / (1000 * 3600 * 24)
    );

    syncTimeLabel.textContent = `${updateTime} (距離下次更新還有${daysUntilUpdate}天)`;

    const cssContent = GM_getValue("cssContent", "");
    textarea.value = cssContent;

    saveButton.addEventListener("click", async () => {
      GM_setValue("cssContent", textarea.value);
      GM_addStyle(textarea.value);
      setting.classList.add("ADBlock_hidden");
    });

    closeButton.addEventListener("click", () => {
      setting.classList.add("ADBlock_hidden");
    });

    updateButton.addEventListener("click", () => {
      updateCSSFromUrl(updateButton);
    });

    document.addEventListener("click", (event) => {
      if (
        settingsDiv &&
        !settingsDiv.contains(event.target) &&
        event.target !== settingsButton
      ) {
        setting.classList.add("ADBlock_hidden");
      }
    });

    function updateCSS() {
      const now = new Date();
      const lastUpdate = new Date(GM_getValue("lastUpdate", 0));
      const oneWeek = 7 * 24 * 60 * 60 * 1000;
      if (now - lastUpdate > oneWeek && GM_getValue("autoUpdate", false)) {
        try {
          GM_xmlhttpRequest({
            method: "GET",
            url: cssLink + "?t=" + now.getTime(),
            onload: function (res) {
              if (res.status == 200) {
                const cssContent = res.responseText;
                GM_setValue("cssContent", cssContent);
                GM_setValue("lastUpdate", now.getTime());
                GM_addStyle(cssContent);
              }
            },
          });
        } catch (error) {
          updateButton.innerText = "更新失敗";
          console.error("Error fetching CSS:", error);
        }
      } else {
        const cssContent = GM_getValue("cssContent", "");
        if (cssContent) {
          GM_addStyle(cssContent);
        }
      }
    }

    const updateCSSFromUrl = (updateButton) => {
      const now = new Date();
      updateButton.textContent = "更新中";
      try {
        GM_xmlhttpRequest({
          method: "GET",
          url: cssLink + "?t=" + now.getTime(),
          onload: function (res) {
            if (res.status == 200) {
              const cssContent = res.responseText;
              GM_setValue("cssContent", cssContent);
              GM_setValue("lastUpdate", now.getTime());

              document.getElementById(
                "syncTime"
              ).textContent = `規則同步時間：${formatTime(now)}`;
              GM_addStyle(cssContent);
              textarea.value = cssContent;
              updateButton.textContent = "更新成功";
            }
          },
        });
      } catch (error) {
        updateButton.textContent = "更新失敗";
        console.error("Error fetching CSS:", error);
      }
    };

    updateCSS();
  });
})();

如果你有自己的樣式訂閱源，修改 cssLink 即可。

方法二、手動配置#

Note

此方法不會自動同步樣式源

訪問 AC-Baidu 重定向腳本的百度配置項。
啟用「自定義樣式表 - 支持 Less.js」功能。
「樣式表 - 自定義樣式表」字段中填入 style.css 的內容即可。
保存設置，現在你的百度搜索頁面應該已經應用了新的樣式。

修改樣式#

Warning

修改樣式後請關閉自動更新，防止修改被更新覆蓋

AC-Baidu-CSS 屏蔽了許多對我來說一點用處都沒有的搜索結果，如果你需要重新展示某種搜索結果可以按照下面方法註釋或者刪除掉對應的條目（手動配置請在「樣式表 - 自定義樣式表」修改）：

同理，如果想添加新的屏蔽項目可以找到對應的 tql 屬性加上即可。

Enjoy it 🎉

此文由 Mix Space 同步更新至 xLog 原始鏈接為 https://www.vinking.top/posts/codes/ac-baidu-css-optimizes-baidu-search-experience