Two years ago, I wrote an article titled "Optimize Baidu Search Results" because I couldn't stand the mixed results in Baidu search, which included but were not limited to "Video Lists," "Baijiahao," "Baidu Stock Market," "Baidu Health," and a bunch of other random stuff.
Two years later, Baidu is still the same, and it has added a series of new features like "AI Replies," "Bullet Screen Interaction," and so on 💩.
I personally believe that search engines only need to display search results to users; there's no need to create so many flashy features. In the spirit of this belief, I recently spent some time optimizing the styles I had previously written, adding two new features: Dark Mode (here's a complaint about the poorly written dark mode in the AC-baidu-redirect script... many texts are hard to read in dark mode) and Automatic Style Source Synchronization (which requires the script to work).
AC-Baidu-CSS#
Comparison of the original Baidu search effect with the AC-Baidu-CSS combined with AC-baidu-redirect effect:
::: gallery
https://cdn.vinking.top/dghGtC3JrGtwvBx.webp
https://cdn.vinking.top/moAI2z0J8cUOUXD.webp
https://cdn.vinking.top/caZ4PCtl8LavZlY.webp
:::
You can find the same rules I am currently using at the link below:
Installation Guide#
Preparation Before Use#
To start using AC-Baidu-CSS, please follow these steps:
- Make sure your browser has the Tampermonkey extension installed and enabled, along with the AC-Baidu Redirect Script.
- Visit the Configuration Page of the AC-Baidu Redirect Script.
- Configure the AC-Baidu Redirect Script according to the images below.
Global Configuration Items#
Baidu Configuration Items#
Now the configuration of the AC-Baidu Redirect Script is complete, let's start introducing AC-Baidu-CSS.
Configure AC-Baidu-CSS#
Method 1: Automatic Style Source Synchronization (Recommended)#
Since the AC-Baidu Redirect Script does not have the capability to parse external stylesheets, you need to use the script below to achieve automatic style synchronization:
// ==UserScript==
// @name Baidu Style Optimization [Subscription]
// @namespace https://www.vinking.top/
// @version 2.4
// @description Achieve cross-device synchronization of blocking effects by subscribing to the corresponding CSS rules.
// @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";
// Subscription source
const cssLink = "https://sub.vinking.top/style.css";
// Predefined CSS styles
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",
"Rule Settings"
);
uElement?.insertBefore(addButton, uElement.firstChild);
return addButton;
}
function createSettingsDiv() {
const settingsDiv = createElementWithClassAndId(
"div",
"ADBlock_hidden",
"ADBlock_Setting",
""
);
settingsDiv.innerHTML = `
<h2>Currently Used Filtering Rules</h2>
<p id="syncTime"></p>
<p>Rule Source: ${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">Save</button>
<button id="ADBlock_Close" class="setting">Close</button>
<button id="ADBlock_Updata" class="setting">Update from URL</button>
<input type="checkbox" id="ADBlock_AutoUpdate" />Auto Update
</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 = `Rule Synchronization Time: ${formatTime(
new Date(GM_getValue("lastUpdate", 0))
)}`;
// Calculate the number of days until the next update
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} (Days until next update: ${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 = "Update Failed";
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 = "Updating";
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 = `Rule Synchronization Time: ${formatTime(now)}`;
GM_addStyle(cssContent);
textarea.value = cssContent;
updateButton.textContent = "Update Successful";
}
},
});
} catch (error) {
updateButton.textContent = "Update Failed";
console.error("Error fetching CSS:", error);
}
};
updateCSS();
});
})();
If you have your own style subscription source, just modify cssLink.
Method 2: Manual Configuration#
Note
This method will not automatically synchronize the style source.
- Visit the Baidu Configuration Items of the AC-Baidu Redirect Script.
- Enable the "Custom Stylesheet - Support Less.js" feature.
- Fill in the content of style.css in the "Stylesheet - Custom Stylesheet" field.
- Save the settings, and now your Baidu search page should have the new styles applied.
Modify Styles#
Warning
Please turn off automatic updates after modifying styles to prevent your changes from being overwritten.
AC-Baidu-CSS blocks many search results that are of no use to me. If you need to re-display a certain search result, you can comment out or delete the corresponding entry according to the method below (for manual configuration, please modify in the "Stylesheet - Custom Stylesheet"):
Similarly, if you want to add new blocking items, you can find the corresponding tql attribute and add it.
Enjoy it 🎉
This article was synchronized and updated to xLog by Mix Space. The original link is https://www.vinking.top/posts/codes/ac-baidu-css-optimizes-baidu-search-experience