自定义GM左侧背景+自定义头条图片

Hadley0T · 发表于前天 12:10

看黑色的男人看腻了（没有说BOOW不好的意思，也没有说头条不好看，现在我已经看腻了关了脚本了），就找AI跑了一下替换掉这两个图片的脚本。虽然AI总是给我出一点奇怪的乱子。

使用方法很简单，将需要的图片链接在代码里替换一下就行了。

如图所示，需要注意下图片的尺寸大小。

左侧背景为620*1135

头条图为1500*338

最终效果展示如图，可能会非常花里胡俏。如果马老师可以出个简化首页的脚本就更好了。主页的黑色配色其实我一直觉得看着有点难受不够简洁来着（虽然自定义图片后看起来更像是某种GV网站了）。无奈主题的黑暗模式也不是反色，而是更暗。

因为是本地的所以你自己用更黄更暴力的图都没问题。

后面一堆有的没的应该可以直接优化下，大佬们就可以自己动手了。或者直接在帖子里帮我优化下也行。白嫖下大佬（X

<div>// ==UserScript==
// [url=home.php?mod=space&uid=668096]@Name[/url] GameMale 左侧背景+头图双自定义
// @namespace https://www.gamemale.com/
// @version 2.0
// @description 同时自定义左侧 wp-bg 背景和 portal_block_summary 头图，独立配置无冲突
// @author You
// [url=home.php?mod=space&uid=700810]@Match[/url] https://www.gamemale.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// ====================== 自定义配置区（修改这里即可）======================
// 1. 左侧背景（wp-bg）配置
const CUSTOM_BG_URL = "图片直链"; // 620*1135 外链
const ENABLE_CUSTOM_BG = true; // true=启用，false=恢复默认
// 2. 头图（portal_block_summary）配置
const CUSTOM_IMG_URL = "图片直链"; // 建议1500*338 外链
const ENABLE_CUSTOM_IMG = true; // true=启用，false=恢复默认
// ======================================================================
// ------------------------------ 左侧背景（wp-bg）替换逻辑 ------------------------------
// 注入左侧背景样式（保持原布局兼容）
const bgStyle = document.createElement('style');
bgStyle.textContent = `
.wp-bg {
position: fixed !important;
top: 0 !important;
overflow: hidden !important;
margin-left: -502px !important;
width: 620px !important;
height: 100% !important;
min-height: 700px !important;
background-size: auto 100% !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-color: #0C0C0E !important;
}
`;
document.head.appendChild(bgStyle);
// 左侧背景核心替换函数
function setCustomBackground() {
let wpBgElement = document.querySelector('.wp-bg');
// 未找到元素时自动创建适配结构
if (!wpBgElement) {
wpBgElement = document.createElement('div');
wpBgElement.className = 'wp-bg';
wpBgElement.innerHTML = '<span></span><div></div>';
const wrapperBody = document.querySelector('.wrapper-body');
if (wrapperBody) {
wrapperBody.parentNode.insertBefore(wpBgElement, wrapperBody);
} else {
document.body.insertBefore(wpBgElement, document.body.firstChild);
}
}
// 保存默认背景（避免重复覆盖）
if (!window.defaultWpBgStyle) {
window.defaultWpBgStyle = {
backgroundImage: wpBgElement.style.backgroundImage || 'url(./template/mwt2/extend/img/hdbg.jpg)',
backgroundColor: wpBgElement.style.backgroundColor || '#0C0C0E'
};
}
// 根据配置设置背景
if (ENABLE_CUSTOM_BG && CUSTOM_BG_URL) {
const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/;
if (urlRegex.test(CUSTOM_BG_URL)) {
wpBgElement.style.backgroundImage = `url(${CUSTOM_BG_URL})`;
} else {
console.warn('左侧背景脚本：外链格式错误，已恢复默认');
wpBgElement.style.backgroundImage = window.defaultWpBgStyle.backgroundImage;
}
} else {
wpBgElement.style.backgroundImage = window.defaultWpBgStyle.backgroundImage;
wpBgElement.style.backgroundColor = window.defaultWpBgStyle.backgroundColor;
}
}
// ------------------------------ 头图（portal_block_summary）替换逻辑 ------------------------------
// 注入头图样式（自适应缩放）
const imgStyle = document.createElement('style');
imgStyle.textContent = `
.portal_block_summary > img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
max-width: 100% !important;
border: none !important;
outline: none !important;
}
.portal_block_summary {
position: relative !important;
overflow: hidden !important;
}
`;
document.head.appendChild(imgStyle);
// 头图核心替换函数
function replacePortalImgOnly() {
const targetImgs = document.querySelectorAll('.portal_block_summary > img');
if (!targetImgs.length) {
console.warn('头图脚本：未找到目标 img 元素，暂不生效');
return;
}
targetImgs.forEach(img => {
// 保存原图 src（仅首次记录）
if (!window.defaultPortalImgSrc) {
window.defaultPortalImgSrc = img.src;
}
// 根据配置替换 src
if (ENABLE_CUSTOM_IMG && CUSTOM_IMG_URL) {
const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*\/?)$/;
if (urlRegex.test(CUSTOM_IMG_URL)) {
img.src = CUSTOM_IMG_URL;
img.dataset.customSrc = CUSTOM_IMG_URL; // 标记自定义状态
} else {
console.warn('头图脚本：外链格式错误，已恢复默认');
restorePortalImg(img);
}
} else {
restorePortalImg(img);
}
});
}
// 头图恢复默认函数
function restorePortalImg(img) {
if (window.defaultPortalImgSrc) {
img.src = window.defaultPortalImgSrc;
img.removeAttribute('data-custom-src');
}
}
// ------------------------------ 统一执行与监听逻辑（避免冲突） ------------------------------
// 页面加载完成后执行双替换
function initAllReplace() {
setCustomBackground();
replacePortalImgOnly();
}
if (document.readyState === "complete" || document.readyState === "interactive") {
initAllReplace();
} else {
document.addEventListener('DOMContentLoaded', initAllReplace);
}
// 统一监听页面变化（轻量化，避免重复监听）
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
// 监听左侧背景相关变化
if (mutation.addedNodes.length > 0 && ENABLE_CUSTOM_BG) {
const wpBg = document.querySelector('.wp-bg');
if (wpBg && !wpBg.style.backgroundImage.includes(CUSTOM_BG_URL)) {
setCustomBackground();
}
}
// 监听头图相关变化
if (ENABLE_CUSTOM_IMG) {
const isTargetImgChange = mutation.type === 'attributes' &&
mutation.target.tagName === 'IMG' &&
mutation.target.closest('.portal_block_summary') &&
mutation.attributeName === 'src';
const isTargetBlockAdded = mutation.addedNodes.length > 0 &&
mutation.target.classList.contains('portal_block_summary');
if (isTargetImgChange || isTargetBlockAdded) {
const targetImg = mutation.target.tagName === 'IMG' ? mutation.target : mutation.target.querySelector('img');
if (targetImg && targetImg.dataset.customSrc !== CUSTOM_IMG_URL) {
replacePortalImgOnly();
}
}
}
});
});
// 启动监听（仅监听必要事件，最小化性能影响）
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['src']
});
})();</div>