仅适用于未登录状态的主界面（摸鱼向，仅为简化） 自定义背景颜色 卡片颜色 文字颜色 卡片圆角 卡片高度 修改了图标和标题 自定义卡片布局 去广告
// ==UserScript==
// @name 今日热榜界面简化
// @namespace http://tampermonkey.net/
// @version 2.4.2.2
// @description 仅适用于未登录状态的主界面（摸鱼向，仅为简化） 自定义背景颜色 卡片颜色 文字颜色 卡片圆角 卡片高度 修改了图标和标题 自定义卡片布局 去广告
// @author Yesaye
// @match *://tophub.today/
// @icon https://www.google.com/s2/favicons?domain=tophub.today
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_openInTab
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_notification
// @run-at document-start
// @license MIT
// ==/UserScript==
(function () {
// 页面样式
let style = `
.abcdefg{display: none;}.
bc > :nth-child(-n+2) {display: none;}
.nano{transition: all 500ms;}
#appbar {display: none !important;}
#tabbar {display: none !important;}
.cq {display: none !important;}
.alert {display: none !important;}
.eb-fb {display: none !important;}
.c-d {padding: 0px !important;}
.cc-cd-lb>img {display: none !important;}
.cc-cd-lb>span,
.cc-cd-sb-st {font-weight:1 !important;color:#666666}
.cc-cd {transition: all 500ms;margin-bottom:1%}
body {transition: all 500ms; padding: 20px 0 0 0}
.mp::after {border-bottom:none}
.cc-cd-ih {border-bottom:none}
.cc-cd-if {border-top:none}
.bc > div:nth-child(-n+2) {display: none;}
.bc-tc {display:none}
.bc-cc {padding-bottom: 0;padding-top:0}
`;
addStyle(style, "setTotalStyle");
style = "";
var backgroundColor = GM_getValue("today_BackgroundColor_value")
var cardColor = GM_getValue("today_CardColor_value")
var textColor = GM_getValue("today_TextColor_value")
var cardRadius = GM_getValue("today_CardRadius_value");
var cardHeight = GM_getValue("today_CardHeight_value");
var lingShowNum = GM_getValue("today_LineShow_value");
if (backgroundColor != null) {
style += "body {background-color: " + backgroundColor + " !important;}";
}
if (cardColor != null) {
style += ".cc-cd {background-color: " + cardColor + " !important;}";
}
if (textColor != null) {
style += ".cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .t {color:" + textColor + "} .cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .s {color:" + textColor + "} .cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .s.h {color:" + textColor + "} .cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .e {color:" + textColor + "} .cc-cd-if .i-h {color:" + textColor + "} .cc-cd-if .i-o {color:" + textColor + "} .cc-cd-lb>span, .cc-cd-sb-st {color:" + textColor + "}";
}
addStyle(style, "setColorStyle");
style = "";
if (cardRadius != null) {
style += ".cc-cd {border-radius:" + cardRadius + "px !important;}";
}
if (cardHeight != null) {
style += ".nano {height:" + cardHeight + "px !important;}";
}
addStyle(style, "setRadiusStyle");
addStyle(style, "setHeightStyle");
if (lingShowNum != null) {
changeLineShow(lingShowNum);
}
// 更换图标
changeFavicon("https://www.baidu.com/favicon.ico");
// 更换标题
document.title = "百度一下";
function addStyle(style, clazz) {
let style_Add = document.createElement('style');
style_Add.className = clazz;
if (document.lastChild) {
document.lastChild.appendChild(style_Add).textContent = style;
} else { // 避免网站加载速度太慢的备用措施
let timer1 = setInterval(function () { // 每 10 毫秒检查一下 html 是否已存在
if (document.lastChild) {
clearInterval(timer1); // 取消定时器
document.lastChild.appendChild(style_Add).textContent = style;
}
});
}
}
function setStyle(style, clazz) {
// 先删掉原来的
removeStyle(clazz);
addStyle(style, clazz);
}
function removeStyle(clazz) {
document.querySelectorAll('.' + clazz).forEach((v) => { v.remove() });
}
// 更换图标
function changeFavicon(link) {
let $favicon = document.querySelectorAll('link[rel*="icon"]');
// If a <link rel="icon"> element already exists,
// change its href to the given link.
if ($favicon && $favicon.length != 0) {
$favicon.forEach(x => {
x.href = link;
})
} else {
$favicon = document.createElement("link");
$favicon.rel = "icon";
$favicon.href = link;
document.head.appendChild($favicon);
}
};
// 更改卡片布局
function changeLineShow(num) {
var lineShowNum = (100 - num) / num;
GM_setValue("today_LineShow_value", num);
setStyle(".cc-cd {width: " + lineShowNum + "% !important;}", "setLineShowStyle");
if (num == 2) {
twoLineStyle();
}
if (num == 4) {
fourLineStyle();
}
}
function twoLineStyle() {
var style = "#twoLineShow {color: #ffffff; background: #37c375; border: none; border-radius: 5px; margin: 2px 0 2px 2px; cursor: pointer;}";
removeStyle("setFourLineButtonStyle");
setStyle(style, "setTwoLineButtonStyle");
}
function fourLineStyle() {
var style = "#fourLineShow {color: #ffffff; background: #37c375; border: none; border-radius: 5px; margin: 2px 0 2px 2px; cursor: pointer;}";
removeStyle("setTwoLineButtonStyle");
setStyle(style, "setFourLineButtonStyle");
}
// 菜单
var menu_ALL = [
['today_ChangeColor', '主题', '修改页面主题样式', '']
], menu_ID = [];
for (let i = 0; i < menu_ALL.length; i++) { // 如果读取到的值为 null 就写入默认值
if (GM_getValue(menu_ALL[i][0]) == null) { GM_setValue(menu_ALL[i][0], menu_ALL[i][3]) };
}
registerMenuCommand();
// 注册脚本菜单
function registerMenuCommand() {
if (menu_ID.length > menu_ALL.length) { // 如果菜单ID数组多于菜单数组，说明不是首次添加菜单，需要卸载所有脚本菜单
for (let i = 0; i < menu_ID.length; i++) {
GM_unregisterMenuCommand(menu_ID[i]);
}
}
for (let i = 0; i < menu_ALL.length; i++) { // 循环注册脚本菜单
menu_ALL[i][3] = GM_getValue(menu_ALL[i][0]);
GM_registerMenuCommand(`${menu_ALL[i][1]}`, function () {
menu_setting('checkbox', menu_ALL[i][1], menu_ALL[i][2], [menu_ALL[i + 1], menu_ALL[i + 2], menu_ALL[i + 3], menu_ALL[i + 4]])
});
}
}
// 脚本设置
function menu_setting(type, title, tips, menu) {
let _html = `<style class="today_SettingStyle">
.today_SettingRoot {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
min-width: 400px;
max-width: 600px;
height: auto;
min-height: 150px;
max-height: 400px;
color: #535353;
background-color: #fff;
border-radius: 3px;
}
.today_SettingBackdrop_1 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 203;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}
.today_SettingBackdrop_2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background-color: rgba(18, 18, 18, 0);
-webkit-transition: background-color .3s ease-out;
transition: background-color .3s ease-out;
}
.today_SettingRoot .today_SettingHeader {
padding: 10px 20px;
color: #fff;
font-weight: bold;
background-color: #f0816e;
border-radius: 3px 3px 0 0;
}
.today_SettingRoot .today_SettingMain {
padding: 10px 20px;
border-radius: 0 0 3px 3px;
}
.today_SettingHeader span {
float: right;
cursor: pointer;
}
.today_SettingMain input {
margin: 10px 6px 10px 0;
cursor: pointer;
vertical-align: middle
}
.today_SettingMain label {
margin-right: 20px;
user-select: none;
cursor: pointer;
vertical-align: middle
}
.today_SettingMain hr {
border: 0.5px solid #f4f4f4;
}
[data-theme="dark"] .today_SettingRoot {
color: #adbac7;
background-color: #343A44;
}
[data-theme="dark"] .today_SettingHeader {
color: #d0d0d0;
background-color: #2D333B;
}
[data-theme="dark"] .today_SettingMain hr {
border: 0.5px solid #2d333b;
}
.today_SettingClose .Zi--Close{
transition: transform 1.8s ease-out;
}
.today_SettingClose:hover .Zi--Close {
transform: /*scale(1.5)*/ rotate(900deg)
}
</style>
<div class="today_SettingBackdrop_1">
<div class="today_SettingBackdrop_2"></div>
<div class="today_SettingRoot">
<div class="today_SettingHeader">${title}
<span class="today_SettingClose" title="点击关闭">
<svg class="Zi Zi--Close Modal-closeIcon" fill="currentColor" viewBox="0 0 24 24" width="24"
height="24">
<path
d="M13.486 12l5.208-5.207a1.048 1.048 0 0 0-.006-1.483 1.046 1.046 0 0 0-1.482-.005L12 10.514 6.793 5.305a1.048 1.048 0 0 0-1.483.005 1.046 1.046 0 0 0-.005 1.483L10.514 12l-5.208 5.207a1.048 1.048 0 0 0 .006 1.483 1.046 1.046 0 0 0 1.482.005L12 13.486l5.207 5.208a1.048 1.048 0 0 0 1.483-.006 1.046 1.046 0 0 0 .005-1.482L13.486 12z"
fill-rule="evenodd">
</path>
</svg>
</span>
</div>
<div class="today_SettingMain">
<div id="today_BackgroundColor_box">
背景色<input id="pickColor_BackgroundColor" type="color" value="${backgroundColor}">
</div>
<div id="today_CardColor_box">
卡片色<input id="pickColor_CardColor" type="color" value="${cardColor}">
</div>
<div id="today_CardColor_box">
文字色<input id="pickColor_TextColor" type="color" value="${textColor}">
</div>
<button id="resetColor">重置颜色</button>
<hr/>
<div id="today_CardRadius_box">
卡片圆角<input type="range" min="0" max="200" value="${cardRadius}" id="today_CardRadius">
</div>
<button id="resetRadius">重置圆角</button>
<div id="today_CardHeight_box">
卡片高度<input type="range" min="0" max="2000" value="${cardHeight}" id="today_CardHeight">
</div>
<button id="resetHeight">重置高度</button>
<hr/>
<div id="showTypeBox">
<button id="twoLineShow">双列显示</button>
<button id="fourLineShow">四列显示</button>
</div>
</div>
</div>
</div>`;
document.body.insertAdjacentHTML('beforeend', _html); // 插入网页末尾
setTimeout(function () { // 延迟 100 毫秒，避免太快
// 关闭按钮 点击事件
document.querySelector('.today_SettingClose').onclick = function () { this.parentElement.parentElement.parentElement.remove(); document.querySelector('.today_SettingStyle').remove(); }
// 点击周围空白处 = 点击关闭按钮
document.querySelector('.today_SettingBackdrop_2').onclick = function (event) { if (event.target == this) { document.querySelector('.today_SettingClose').click(); }; }
// 选取背景色
document.getElementById("pickColor_BackgroundColor").addEventListener("change", function (e) {
if (e.target.tagName == "INPUT") {
addStyle("body {background-color: " + e.target.value + " !important;}", "setColorStyle");
GM_setValue("today_BackgroundColor_value", e.target.value);
backgroundColor = e.target.value;
}
})
// 选取卡片色
document.getElementById("pickColor_CardColor").addEventListener("change", function (e) {
if (e.target.tagName == "INPUT") {
addStyle(".cc-cd {background-color: " + e.target.value + " !important;}", "setColorStyle");
GM_setValue("today_CardColor_value", e.target.value);
cardColor = e.target.value;
}
})
// 选取文字色
document.getElementById("pickColor_TextColor").addEventListener("change", function (e) {
if (e.target.tagName == "INPUT") {
addStyle(".cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .t {color:" + e.target.value + "} .cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .s {color:" + e.target.value + "} .cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .s.h {color:" + e.target.value + "} .cc-cd-cb .cc-cd-cb-l .cc-cd-cb-ll .e {color:" + e.target.value + "} .cc-cd-if .i-h {color:" + e.target.value + "} .cc-cd-if .i-o {color:" + e.target.value + "} .cc-cd-lb>span, .cc-cd-sb-st {color:" + e.target.value + "}", "setColorStyle");
GM_setValue("today_TextColor_value", e.target.value);
textColor = e.target.value;
}
})
// 重置背景色和卡片色和文字色
document.getElementById("resetColor").onclick = function () {
GM_setValue("today_BackgroundColor_value", null);
GM_setValue("today_CardColor_value", null);
document.getElementById("pickColor_BackgroundColor").value = "#000000";
document.getElementById("pickColor_CardColor").value = "#000000";
document.getElementById("pickColor_TextColor").value = "#000000";
removeStyle('setColorStyle');
}
// 设置卡片圆角
document.getElementById("today_CardRadius_box").addEventListener("mousedown", f1, false)
function f1() {
document.getElementById("today_CardRadius_box").addEventListener("mousemove", f2, false);
document.getElementById("today_CardRadius_box").addEventListener("click", f2, false);
}
function f2(e) {
cardRadius = document.getElementById("today_CardRadius").value;
GM_setValue("today_CardRadius_value", cardRadius);
setStyle(".cc-cd {border-radius:" + cardRadius + "px !important;}", "setRadiusStyle");
}
document.getElementById("today_CardRadius_box").addEventListener("mouseup", function (e) {
document.getElementById("today_CardRadius_box").removeEventListener("mousemove", f2, false);
})
// 重置卡片圆角
document.getElementById("resetRadius").onclick = function () {
GM_setValue("today_CardRadius_value", null);
document.getElementById("today_CardRadius").value = "100";
removeStyle('setRadiusStyle');
}
// 设置卡片高度
document.getElementById("today_CardHeight_box").addEventListener("mousedown", f12, false)
function f12() {
document.getElementById("today_CardHeight_box").addEventListener("mousemove", f22, false);
document.getElementById("today_CardHeight_box").addEventListener("click", f22, false);
}
function f22(e) {
cardHeight = document.getElementById("today_CardHeight").value;
GM_setValue("today_CardHeight_value", cardHeight);
setStyle(".nano {height:" + cardHeight + "px !important;}", "setHeightStyle");
}
document.getElementById("today_CardHeight_box").addEventListener("mouseup", function (e) {
document.getElementById("today_CardHeight_box").removeEventListener("mousemove", f22, false);
})
// 重置卡片高度
document.getElementById("resetHeight").onclick = function () {
GM_setValue("today_CardHeight_value", 300);
document.getElementById("today_CardHeight").value = "300";
removeStyle('setHeightStyle');
}
// 双列显示和四列显示
document.getElementById("twoLineShow").onclick = function () {
changeLineShow(2);
twoLineStyle();
}
document.getElementById("fourLineShow").onclick = function () {
changeLineShow(4);
fourLineStyle();
}
}, 100)
}
})();