使用「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