refactor(背景): 重构背景图片实现并更新相关配置

- 将背景图片从CSS伪元素改为独立的div元素
- 移除背景图片加载检测逻辑
- 更新文章和配置中的图片URL
- 禁用默认背景图片功能

src/config.ts

@@ -36,8 +36,8 @@ export const siteConfig: SiteConfig = {
 		},
 	},
 	background: {
-		enable: true, // Enable background image
+		enable: false, // Enable background image
-		src: "https://cf-img.acofork.com/h", // Background image URL (supports HTTPS)
+		src: "", // Background image URL (supports HTTPS)
 		position: "center", // Background position: 'top', 'center', 'bottom'
 		size: "cover", // Background size: 'cover', 'contain', 'auto'
 		repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'

src/content/posts/pin.md

@@ -1,6 +1,6 @@
 ---
 title: 加群向导
-image: https://cf-img.acofork.com/h
+image: /random/h
 published: 2025-05-24
 pinned: true
 category: 置顶

src/content/posts/record.md

@@ -2,7 +2,7 @@
 category: 记录
 description: 一些记录，不定时更新
 draft: false
-image: https://cf-img.acofork.com/h
+image: /random/h
 lang: zh_CN
 published: 1999-01-01
 tags:

src/layouts/Layout.astro

@@ -115,7 +115,7 @@ const bannerOffset =
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		<script src="/js/umami-share.js" defer></script>
-		{/* <!-- <script data-swup-ignore-script is:inline src="https://pic.acofork.com/random.js"></script> --> */}
+		<script data-swup-ignore-script is:inline src="https://pic.acofork.com/random.js"></script>
 		
 		
 		
@@ -163,27 +163,27 @@ const bannerOffset =
 			offset = offset - offset % 4;
 			document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
 			
-			// Background image loading detection
+			// // Background image loading detection
-			const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
+			// const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
-			const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
+			// const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
 			
-			if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
+			// if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
-				const img = new Image();
+			// 	const img = new Image();
-				const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
+			// 	const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
-				if (urlMatch) {
+			// 	if (urlMatch) {
-					img.onload = function() {
+			// 		img.onload = function() {
-						// 背景图片完全加载后，显示背景并启用卡片透明效果
+			// 			// 背景图片完全加载后，显示背景并启用卡片透明效果
-						document.body.classList.add('bg-loaded');
+			// 			document.body.classList.add('bg-loaded');
-						document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
+			// 			document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
-						document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
+			// 			document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
-					};
+			// 		};
-					img.onerror = function() {
+			// 		img.onerror = function() {
-						// Keep cards opaque if background image fails to load
+			// 			// Keep cards opaque if background image fails to load
-						console.warn('Background image failed to load, keeping cards opaque');
+			// 			console.warn('Background image failed to load, keeping cards opaque');
-					};
+			// 		};
-					img.src = urlMatch[1];
+			// 		img.src = urlMatch[1];
-				}
+			// 	}
-			}
+			// }
 		</script>
 		<style define:vars={{
 			configHue,
@@ -217,27 +217,24 @@ const bannerOffset =
 				--bg-opacity: var(--bg-opacity);
 			}
 
-			body::before {
+			#bg-box {
-				content: '' !important;
+				position: fixed;
-				position: fixed !important;
+				top: 0;
-				top: 0 !important;
+				left: 0;
-				left: 0 !important;
+				width: 100%;
-				width: 100% !important;
+				height: 100%;
-				height: 100% !important;
+				background-position: var(--bg-position);
-				background-image: var(--bg-url) !important;
+				background-size: var(--bg-size);
-				background-position: var(--bg-position) !important;
+				background-repeat: var(--bg-repeat);
-				background-size: var(--bg-size) !important;
+				background-attachment: var(--bg-attachment);
-				background-repeat: var(--bg-repeat) !important;
+				opacity: 0;
-				background-attachment: var(--bg-attachment) !important;
+				pointer-events: none;
-				opacity: 0 !important;
+				z-index: -1;
-				pointer-events: none !important;
+				transition: opacity 0.3s ease-in-out;
-				z-index: -1 !important;
-				display: block !important;
-				transition: opacity 0.3s ease-in-out !important;
 			}
 			
-			body.bg-loaded::before {
+			#bg-box.loaded {
-				opacity: calc(var(--bg-opacity) * var(--bg-enable)) !important;
+				opacity: calc(var(--bg-opacity) * var(--bg-enable));
 			}
 		</style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
 
@@ -289,6 +286,7 @@ var _hmt = _hmt || [];
 	<body class=" min-h-screen transition " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
 		  data-overlayscrollbars-initialize
 	>
+		<div id="bg-box"></div>
 		<ConfigCarrier></ConfigCarrier>
 		<slot />