docs: 补充评论系统完整实现细节

- 补充全局配置对象的详细说明和实际代码示例
- 细化 CSS 变量系统，包含主题色、动画、卡片样式等完整变量
- 扩展夜间模式章节，详细说明四种切换方案和 AMOLED 模式
- 重写 PJAX 章节，补充完整的事件流程和重新初始化逻辑
- 细化瀑布流布局，包含完整算法、响应式适配和性能优化
- 新增主题初始化流程章节，详细说明服务器端和客户端初始化过程
- 补充资源加载策略和强制刷新机制的实现细节
- 所有代码示例均来自实际项目文件，确保准确性

argontheme.js

@@ -45,6 +45,31 @@ if (typeof jQuery !== 'undefined') {
             };
         }
 
+        if (!$.fn._argonInit) {
+            $.fn._argonInit = $.fn.init;
+            $.fn.init = function(selector, context, root) {
+                // 修复空选择器、特殊字符和中文标点导致的语法错误
+                if (typeof selector === 'string') {
+                    let trimmed = selector.trim();
+                    // 检查是否为空或只有 # 符号
+                    if (trimmed === '' || trimmed === '#') {
+                        return new $.fn._argonInit();
+                    }
+                    // 检查是否包含中文标点（可能导致语法错误）
+                    if (/[；，。：！？]/.test(trimmed)) {
+                        console.warn('[Argon] Invalid selector with Chinese punctuation:', selector);
+                        return new $.fn._argonInit();
+                    }
+                    // 检查 ID 选择器是否有效（#后面必须有内容）
+                    if (/^#\s*$/.test(trimmed)) {
+                        return new $.fn._argonInit();
+                    }
+                }
+                return $.fn._argonInit.call(this, selector, context, root);
+            };
+            $.fn.init.prototype = $.fn;
+        }
+        
         // 确保 zoomify 插件存在
         if (typeof $.fn.zoomify === 'undefined') {
             $.fn.zoomify = function() { return this; };
@@ -2336,17 +2361,34 @@ $(document).on("submit" , ".post-password-form" , function(){
 
 /*URL 和# 根据 ID 定位*/
 function gotoHash(hash, durtion, easing = 'easeOutExpo'){
-	if (hash.length == 0){
+	if (!hash || hash === "#"){
 		return;
 	}
-	if ($(hash).length == 0){
+	var target = null;
+	var decodedId = "";
+	try {
+		decodedId = decodeURIComponent(hash.slice(1));
+	} catch (err) {
+		decodedId = hash.slice(1);
+	}
+	if (decodedId) {
+		target = document.getElementById(decodedId);
+	}
+	if (!target) {
+		try {
+			target = document.querySelector(hash);
+		} catch (err) {
+			return;
+		}
+	}
+	if (!target){
 		return;
 	}
 	if (durtion == null){
 		durtion = 200;
 	}
 	$("body,html").stop().animate({
-		scrollTop: $(hash).offset().top - 80
+		scrollTop: $(target).offset().top - 80
 	}, durtion, easing);
 }
 function getHash(url){
@@ -2565,6 +2607,16 @@ function loadImageOptimized(img, effect) {
 		requestAnimationFrame(function() {
 			img.src = src;
 			img.removeAttribute('data-src');
+			let srcset = img.getAttribute('data-srcset');
+			if (srcset) {
+				img.setAttribute('srcset', srcset);
+				img.removeAttribute('data-srcset');
+			}
+			let sizes = img.getAttribute('data-sizes');
+			if (sizes) {
+				img.setAttribute('sizes', sizes);
+				img.removeAttribute('data-sizes');
+			}
 			img.classList.remove('lazyload');
 			
 			// 移除所有lazyload-style-* 类
@@ -2579,6 +2631,16 @@ function loadImageOptimized(img, effect) {
 		requestAnimationFrame(function() {
 			img.src = src;
 			img.removeAttribute('data-src');
+			let srcset = img.getAttribute('data-srcset');
+			if (srcset) {
+				img.setAttribute('srcset', srcset);
+				img.removeAttribute('data-srcset');
+			}
+			let sizes = img.getAttribute('data-sizes');
+			if (sizes) {
+				img.setAttribute('sizes', sizes);
+				img.removeAttribute('data-sizes');
+			}
 			img.classList.remove('lazyload');
 			img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim();
 			
@@ -2688,6 +2750,16 @@ function loadAllImagesImmediately() {
 		if (src) {
 			img.src = src;
 			img.removeAttribute('data-src');
+			let srcset = img.getAttribute('data-srcset');
+			if (srcset) {
+				img.setAttribute('srcset', srcset);
+				img.removeAttribute('data-srcset');
+			}
+			let sizes = img.getAttribute('data-sizes');
+			if (sizes) {
+				img.setAttribute('sizes', sizes);
+				img.removeAttribute('data-sizes');
+			}
 			img.classList.remove('lazyload');
 			img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim();
 		}
@@ -3085,6 +3157,9 @@ function executeInlineScripts(container) {
 	
 	// 需求 4.3: 按照脚本在 DOM 中的顺序执行
 	scripts.forEach((script, index) => {
+		if (script.getAttribute('data-pjax-executed') === 'true') {
+			return;
+		}
 		// 需求 4.2: 只执行内联脚本（没有 src 属性的脚本）
 		if (!script.src) {
 			// 跳过空脚本
@@ -3098,6 +3173,7 @@ function executeInlineScripts(container) {
 			// 需求 4.4: 错误隔离 - 单个脚本失败不影响其他脚本
 			const success = executeScript(script);
 			if (success) {
+				script.setAttribute('data-pjax-executed', 'true');
 				successCount++;
 			} else {
 				failedCount++;
@@ -3118,9 +3194,288 @@ function executeInlineScripts(container) {
 	return result;
 }
 
+var pjaxContainerSelectors = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar'];
+var pjaxContainers = pjaxContainerSelectors.filter(function(selector) {
+	return document.querySelector(selector);
+});
+
+// ==========================================================================
+// 现代化页面加载系统
+// ==========================================================================
+
+/**
+ * 页面加载管理器 - 提供智能加载动画和进度追踪
+ */
+const PageLoader = (function() {
+	// 配置常量
+	const CONFIG = {
+		OVERLAY_ID: 'page-loader',
+		MIN_DISPLAY_TIME: 400,        // 最小显示时间（避免闪烁）
+		FADE_DURATION: 350,            // 淡出动画时长
+		PROGRESS_STEP: 0.1,            // 进度条步进
+		PROGRESS_INTERVAL: 200,        // 进度更新间隔
+		SKELETON_DELAY: 150            // 骨架屏延迟显示
+	};
+	
+	// 状态管理
+	let state = {
+		element: null,
+		isVisible: false,
+		startTime: 0,
+		progress: 0,
+		progressTimer: null,
+		hideTimer: null,
+		skeletonTimer: null
+	};
+	
+	/**
+	 * 创建加载动画 HTML
+	 */
+	function createHTML() {
+		return `
+			<div class="page-loader-backdrop"></div>
+			<div class="page-loader-content">
+				<!-- 进度环 -->
+				<div class="loader-ring-container">
+					<svg class="loader-ring" viewBox="0 0 100 100">
+						<circle class="loader-ring-bg" cx="50" cy="50" r="45"></circle>
+						<circle class="loader-ring-progress" cx="50" cy="50" r="45"></circle>
+					</svg>
+					<div class="loader-icon">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/>
+						</svg>
+					</div>
+				</div>
+				
+				<!-- 加载文字 -->
+				<div class="loader-text">
+					<div class="loader-title">加载中</div>
+					<div class="loader-subtitle">正在为您准备内容</div>
+				</div>
+				
+				<!-- 骨架屏（延迟显示） -->
+				<div class="loader-skeleton">
+					<div class="skeleton-card">
+						<div class="skeleton-image"></div>
+						<div class="skeleton-content">
+							<div class="skeleton-title"></div>
+							<div class="skeleton-line"></div>
+							<div class="skeleton-line short"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+	
+	/**
+	 * 创建加载器元素
+	 */
+	function createElement() {
+		const el = document.createElement('div');
+		el.id = CONFIG.OVERLAY_ID;
+		el.className = 'page-loader';
+		el.innerHTML = createHTML();
+		return el;
+	}
+	
+	/**
+	 * 获取或创建元素
+	 */
+	function getElement() {
+		if (!state.element) {
+			state.element = document.getElementById(CONFIG.OVERLAY_ID);
+			if (!state.element) {
+				state.element = createElement();
+				document.body.appendChild(state.element);
+			}
+		}
+		return state.element;
+	}
+	
+	/**
+	 * 更新进度环
+	 */
+	function updateProgress(progress) {
+		const el = state.element;
+		if (!el) return;
+		
+		const circle = el.querySelector('.loader-ring-progress');
+		if (circle) {
+			const circumference = 2 * Math.PI * 45;
+			const offset = circumference - (progress / 100) * circumference;
+			circle.style.strokeDashoffset = offset;
+		}
+		
+		state.progress = progress;
+	}
+	
+	/**
+	 * 自动递增进度
+	 */
+	function startProgressAnimation() {
+		stopProgressAnimation();
+		
+		state.progress = 0;
+		updateProgress(0);
+		
+		state.progressTimer = setInterval(function() {
+			if (state.progress < 90) {
+				// 使用缓动函数，越接近 90% 越慢
+				const increment = CONFIG.PROGRESS_STEP * (1 - state.progress / 100);
+				state.progress = Math.min(90, state.progress + increment * 10);
+				updateProgress(state.progress);
+			}
+		}, CONFIG.PROGRESS_INTERVAL);
+	}
+	
+	/**
+	 * 停止进度动画
+	 */
+	function stopProgressAnimation() {
+		if (state.progressTimer) {
+			clearInterval(state.progressTimer);
+			state.progressTimer = null;
+		}
+	}
+	
+	/**
+	 * 完成进度到 100%
+	 */
+	function completeProgress() {
+		stopProgressAnimation();
+		updateProgress(100);
+	}
+	
+	/**
+	 * 显示加载器
+	 */
+	function show() {
+		// 清理之前的定时器
+		if (state.hideTimer) {
+			clearTimeout(state.hideTimer);
+			state.hideTimer = null;
+		}
+		if (state.skeletonTimer) {
+			clearTimeout(state.skeletonTimer);
+			state.skeletonTimer = null;
+		}
+		
+		const el = getElement();
+		state.startTime = Date.now();
+		state.isVisible = true;
+		
+		// 移除隐藏类，添加显示类
+		el.classList.remove('is-hiding');
+		void el.offsetWidth; // 强制重排
+		el.classList.add('is-visible');
+		
+		// 启动进度动画
+		startProgressAnimation();
+		
+		// 延迟显示骨架屏（避免快速加载时闪烁）
+		state.skeletonTimer = setTimeout(function() {
+			if (state.isVisible && el) {
+				el.classList.add('show-skeleton');
+			}
+		}, CONFIG.SKELETON_DELAY);
+	}
+	
+	/**
+	 * 隐藏加载器
+	 */
+	function hide() {
+		if (!state.isVisible) return;
+		
+		const el = state.element;
+		if (!el) return;
+		
+		// 完成进度
+		completeProgress();
+		
+		// 计算已显示时间
+		const elapsedTime = Date.now() - state.startTime;
+		const remainingTime = Math.max(0, CONFIG.MIN_DISPLAY_TIME - elapsedTime);
+		
+		// 确保最小显示时间后再隐藏
+		state.hideTimer = setTimeout(function() {
+			el.classList.add('is-hiding');
+			el.classList.remove('show-skeleton');
+			
+			// 动画结束后清理
+			setTimeout(function() {
+				el.classList.remove('is-visible', 'is-hiding');
+				state.isVisible = false;
+				stopProgressAnimation();
+			}, CONFIG.FADE_DURATION);
+		}, remainingTime);
+	}
+	
+	/**
+	 * 设置进度（手动控制）
+	 */
+	function setProgress(progress) {
+		progress = Math.max(0, Math.min(100, progress));
+		stopProgressAnimation();
+		updateProgress(progress);
+	}
+	
+	/**
+	 * 销毁加载器
+	 */
+	function destroy() {
+		stopProgressAnimation();
+		
+		if (state.hideTimer) {
+			clearTimeout(state.hideTimer);
+			state.hideTimer = null;
+		}
+		if (state.skeletonTimer) {
+			clearTimeout(state.skeletonTimer);
+			state.skeletonTimer = null;
+		}
+		
+		if (state.element && state.element.parentNode) {
+			state.element.parentNode.removeChild(state.element);
+		}
+		
+		state.element = null;
+		state.isVisible = false;
+	}
+	
+	// 公开 API
+	return {
+		show: show,
+		hide: hide,
+		setProgress: setProgress,
+		destroy: destroy
+	};
+})();
+function startPageTransition() {
+	document.documentElement.classList.add('page-transition-enter');
+	pjaxContainers.forEach(function(selector) {
+		var c = document.querySelector(selector);
+		if (c) c.classList.add('page-transition-content');
+	});
+}
+function activatePageTransition() {
+	requestAnimationFrame(function() {
+		document.documentElement.classList.add('page-transition-active');
+	});
+}
+function endPageTransition() {
+	document.documentElement.classList.remove('page-transition-active');
+	document.documentElement.classList.remove('page-transition-enter');
+	pjaxContainers.forEach(function(selector) {
+		var c = document.querySelector(selector);
+		if (c) c.classList.remove('page-transition-content');
+	});
+}
+
 $.pjax.defaults.timeout = 10000;
-$.pjax.defaults.container = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar'];
+$.pjax.defaults.container = pjaxContainers;
-$.pjax.defaults.fragment = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar'];
+$.pjax.defaults.fragment = pjaxContainers;
 
 /*
  * PJAX 事件处理优化说明：
@@ -3134,15 +3489,17 @@ $.pjax.defaults.fragment = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_i
  * - pjax:complete: 需求 1.5, 1.6 (模块初始化和错误隔离)
  * - pjax:end: 需求 1.7 (特定任务处理)
  */
-$(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):not([download]):not(.reference-link):not(.reference-list-backlink)")
+if (argonConfig.disable_pjax != true && argonConfig.disable_pjax != 'true') {
+$(document).pjax(
+	"a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):not([download]):not(.reference-link):not(.reference-list-backlink):not([href^='#'])",
+	pjaxContainers.length ? pjaxContainers[0] : '#primary',
+	{ fragment: (pjaxContainers.length ? pjaxContainers : ['#primary']), timeout: $.pjax.defaults.timeout }
+)
 .on('pjax:click', function(e, f, g){
-	if (argonConfig.disable_pjax == true){
-		e.preventDefault();
-		return;
-	}
 	NProgress.remove();
 	NProgress.start();
 	pjaxLoading = true;
+	PageLoader.show();
 }).on('pjax:afterGetContainers', function(e, f, g) {
 	pjaxScrollTop = 0;
 	if ($("html").hasClass("banner-as-cover")){
@@ -3152,6 +3509,7 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	}
 }).on('pjax:send', function() {
 	NProgress.set(0.618);
+	startPageTransition();
 }).on('pjax:beforeReplace', function(e, dom) {
 	// ========== 需求 1.1-1.4: 清理旧页面的所有资源 ==========
 	// 调用统一的资源清理管理器
@@ -3175,10 +3533,21 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	// ========== 需求 1.5, 1.6: 重新初始化所有功能模块 ==========
 	pjaxLoading = false;
 	NProgress.inc();
+	startPageTransition();
+	activatePageTransition();
+	setTimeout(function() {
+		PageLoader.hide();
+		endPageTransition();
+	}, 320);
 	
 	// ========== 需求 4.1-4.5: 执行新页面中的内联脚本 ==========
 	try {
-		executeInlineScripts(document);
+		pjaxContainers.forEach(function(selector) {
+			var container = document.querySelector(selector);
+			if (container) {
+				executeInlineScripts(container);
+			}
+		});
 	} catch (err) {
 		ArgonDebug.error('executeInlineScripts failed:', err);
 	}
@@ -3240,6 +3609,10 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	}
 
 	NProgress.done();
+}).on('pjax:error', function() {
+	PageLoader.hide();
+	endPageTransition();
+	pjaxLoading = false;
 }).on('pjax:end', function() {
 	// ========== 需求 1.7: 执行特定任务 ==========
 	
@@ -3255,6 +3628,7 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	// GT4: PJAX 后确保评论页验证码已初始化
 	resetGT4Captcha();
 });
+}
 
 window.addEventListener('hashchange', function() {
 	handleHashNavigation();
@@ -3270,7 +3644,14 @@ if (document.readyState === 'loading') {
 /*Reference 跳转*/
 $(document).on("click", ".reference-link , .reference-list-backlink" , function(e){
 	e.preventDefault();
-	$target = $($(this).attr("href"));
+	var href = $(this).attr("href");
+	if (!href || href === "#" ) { return; }
+	var $target;
+	try {
+		$target = $(href);
+	} catch (err) {
+		return;
+	}
 	$("body,html").animate({
 		scrollTop: $target.offset().top - document.body.clientHeight / 2 - 75
 	}, 500, 'easeOutExpo')
@@ -3283,7 +3664,7 @@ $(document).on("click", ".reference-link , .reference-list-backlink" , function(
 	}, 1);
 });
 
-/*Tags Dialog pjax 加载后自动关闭/
+/*Tags Dialog pjax 加载后自动关闭 */
 $(document).on("click" , "#blog_tags .tag" , function(){
 	$("#blog_tags button.close").trigger("click");
 });
@@ -4591,10 +4972,29 @@ void 0;
             if (progress >= 90) { clearInterval(interval); progress = 90; }
             bar.style.width = progress + '%';
         }, 100);
+        var overlay = document.getElementById('article-loading-overlay');
+        if (!overlay) {
+            overlay = document.createElement('div');
+            overlay.id = 'article-loading-overlay';
+            var inner = document.createElement('div');
+            inner.className = 'overlay-content';
+            inner.innerHTML = '<div class="overlay-title"></div><div class="overlay-thumb"></div><div class="overlay-row" style="width:85%"></div><div class="overlay-row" style="width:70%"></div><div class="overlay-row" style="width:90%"></div><div class="overlay-grid"><div class="overlay-grid-item"></div><div class="overlay-grid-item"></div></div><div class="center-spinner"><div class="loading-spinner"></div><div class="overlay-row" style="width:120px;height:14px;margin:0"></div></div>';
+            overlay.appendChild(inner);
+            document.body.appendChild(overlay);
+        }
+        overlay.classList.remove('is-hiding');
+        requestAnimationFrame(function() {
+            overlay.classList.add('is-visible');
+        });
         window.addEventListener('load', function() {
             clearInterval(interval);
             bar.style.width = '100%';
             setTimeout(function() { bar.style.opacity = '0'; setTimeout(function() { bar.remove(); }, 300); }, 200);
+            if (overlay) {
+                overlay.classList.remove('is-visible');
+                overlay.classList.add('is-hiding');
+                setTimeout(function() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360);
+            }
         });
     }
 
@@ -4607,12 +5007,32 @@ void 0;
             if (!bar) { bar = document.createElement('div'); bar.id = 'page-loading-bar'; document.body.appendChild(bar); }
             bar.style.opacity = '1'; bar.style.width = '30%';
             setTimeout(function() { bar.style.width = '60%'; }, 200);
+            var overlay = document.getElementById('article-loading-overlay');
+            if (!overlay) {
+                overlay = document.createElement('div');
+                overlay.id = 'article-loading-overlay';
+                var inner = document.createElement('div');
+                inner.className = 'overlay-content';
+                inner.innerHTML = '<div class="overlay-title"></div><div class="overlay-thumb"></div><div class="overlay-row" style="width:85%"></div><div class="overlay-row" style="width:70%"></div><div class="overlay-row" style="width:90%"></div><div class="overlay-grid"><div class="overlay-grid-item"></div><div class="overlay-grid-item"></div></div><div class="center-spinner"><div class="loading-spinner"></div><div class="overlay-row" style="width:120px;height:14px;margin:0"></div></div>';
+                overlay.appendChild(inner);
+                document.body.appendChild(overlay);
+            }
+            overlay.classList.remove('is-hiding');
+            requestAnimationFrame(function() {
+                overlay.classList.add('is-visible');
+            });
         });
         jQuery(document).on('pjax:end', function() {
             jQuery('#primary').removeClass('pjax-loading');
             var bar = document.getElementById('page-loading-bar');
             if (bar) { bar.style.width = '100%'; setTimeout(function() { bar.style.opacity = '0'; setTimeout(function() { bar.remove(); }, 300); }, 200); }
             setTimeout(function() { initImageLoadAnimation(); initScrollAnimations(); initSmoothScroll(); }, 100);
+            var overlay = document.getElementById('article-loading-overlay');
+            if (overlay) {
+                overlay.classList.remove('is-visible');
+                overlay.classList.add('is-hiding');
+                setTimeout(function() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360);
+            }
         });
     }
 

header.php

@@ -726,18 +726,33 @@
 $card_opacity = get_option('argon_post_background_opacity', '0.7');
 $card_blur = get_option('argon_card_blur', '20');
 $card_saturate = get_option('argon_card_saturate', '180');
+$bg_opacity = get_option('argon_page_background_opacity', '1');
+
+// 顶栏模糊度为卡片模糊度的 60%（12px / 20px = 0.6）
+$toolbar_blur = round($card_blur * 0.6);
 
 // 如果透明度为空或为1，使用推荐默认值
 if ($card_opacity == '' || $card_opacity == '1') {
 	$card_opacity = '0.7';
 }
+if ($bg_opacity == '') {
+	$bg_opacity = '1';
+}
 ?>
 
 <style id="theme_card_effect_css">
 	:root {
+		--bg-opacity: <?php echo $bg_opacity; ?>;
 		--card-opacity: <?php echo $card_opacity; ?>;
 		--card-blur: <?php echo $card_blur; ?>px;
 		--card-saturate: <?php echo $card_saturate; ?>%;
+		--toolbar-blur: <?php echo $toolbar_blur; ?>px;
+		--page-background-opacity: <?php echo $bg_opacity; ?>;
+		--banner-mask-height: 120px;
+		--banner-mask-opacity-top: 0.25;
+		--banner-mask-opacity-mid: 0.15;
+		--banner-mask-stop-mid: 35%;
+		--banner-title-shadow: 0 5px 15px rgba(0, 0, 0, .2);
 	}
 </style>
 
@@ -1168,11 +1183,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
 			background-size: cover;
 
 			background-repeat: no-repeat;
-
+			opacity: var(--page-background-opacity);
-			opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
-
-			transition: opacity .5s ease;
-
 		}
 
 		html.darkmode #content:before{
@@ -1217,7 +1228,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
 
 			html.darkmode #content:after {
 
-				opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
+				opacity: var(--page-background-opacity);
 
 			}
 
@@ -1246,9 +1257,9 @@ if ($card_opacity == '' || $card_opacity == '1') {
 		.post-navigation.card,
 		.related-posts.card,
 		.card.bg-white {
-			background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_inline; ?>) !important;
+			background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
-			backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-			-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
 			background-clip: padding-box;
 			-webkit-transform: translateZ(0);
 			transform: translateZ(0);
@@ -1264,13 +1275,13 @@ if ($card_opacity == '' || $card_opacity == '1') {
 		html.darkmode .post-navigation.card,
 		html.darkmode .related-posts.card,
 		html.darkmode .card.bg-white {
-			background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_inline; ?>) !important;
+			background-color: rgba(66, 66, 66, var(--card-opacity)) !important;
 		}
 		#leftbar .card,
 		#leftbar_part1,
 		#leftbar_part2 {
-			backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-			-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
 		}
 
 	</style>
@@ -1298,9 +1309,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 	.post-navigation.card,
 	.related-posts.card,
 	.card.bg-white {
-		background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_standalone; ?>) !important;
+		background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
-		backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-		-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
 		background-clip: padding-box;
 		-webkit-transform: translateZ(0);
 		transform: translateZ(0);
@@ -1316,13 +1327,13 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 	html.darkmode .post-navigation.card,
 	html.darkmode .related-posts.card,
 	html.darkmode .card.bg-white {
-		background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_standalone; ?>) !important;
+		background-color: rgba(66, 66, 66, var(--card-opacity)) !important;
 	}
 	#leftbar .card,
 	#leftbar_part1,
 	#leftbar_part2 {
-		backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-		-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
 	}
 </style>
 <?php endif; ?>
@@ -1344,9 +1355,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 
 			top: 0;
 
-			height: 120px;
+			height: var(--banner-mask-height);
 
-			background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 100%);
+			background: linear-gradient(180deg, rgba(0,0,0,var(--banner-mask-opacity-top)) 0%, rgba(0,0,0,var(--banner-mask-opacity-mid)) var(--banner-mask-stop-mid), rgba(0,0,0,0) 100%);
 
 			display: block;
 
@@ -1356,7 +1367,7 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 
 		.banner-title {
 
-			text-shadow: 0 5px 15px rgba(0, 0, 0, .2);
+			text-shadow: var(--banner-title-shadow);
 
 		}
 

style.css

@@ -991,7 +991,7 @@ html.darkmode .mermaid-loading-spinner {
 	gap: 5px;
 	z-index: 10;
 	background: rgba(255, 255, 255, 0.85);
-	backdrop-filter: blur(10px);
+	backdrop-filter: blur(calc(var(--card-blur) / 2));
 	border-radius: 6px;
 	padding: 5px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
@@ -1110,11 +1110,11 @@ html.darkmode .mermaid-zoom-btn[title]::after {
 
 html.darkmode .mermaid-hint {
 	background: rgba(255, 255, 255, 0.15);
-	backdrop-filter: blur(10px);
+	backdrop-filter: blur(calc(var(--card-blur) / 2));
 }
 
-/* 拖拽时的光标和视觉反馈 */
+/* 拖拽时的光标和视觉反<EFBFBD>?*/
-/* 需求 13.1, 13.2, 13.4: 优化拖拽视觉反馈 */
+/* 需<EFBFBD>?13.1, 13.2, 13.4: 优化拖拽视觉反馈 */
 .mermaid-container-inner.dragging {
 	cursor: grabbing !important;
 	user-select: none;
@@ -1127,7 +1127,7 @@ html.darkmode .mermaid-hint {
 	cursor: grab;
 }
 
-/* 拖拽时禁用 SVG 内的文本选择 */
+/* 拖拽时禁<EFBFBD>?SVG 内的文本选择 */
 .mermaid-container-inner.dragging svg {
 	user-select: none;
 	-webkit-user-select: none;
@@ -1135,7 +1135,7 @@ html.darkmode .mermaid-hint {
 	-ms-user-select: none;
 }
 
-/* 需求 14: Mermaid 全屏模式样式 */
+/* 需<EFBFBD>?14: Mermaid 全屏模式样式 */
 .mermaid-fullscreen {
 	position: fixed !important;
 	top: 0 !important;
@@ -1157,7 +1157,7 @@ html.darkmode .mermaid-fullscreen {
 	background: var(--color-widgets) !important;
 }
 
-/* 全屏模式下的工具栏 */
+/* 全屏模式下的工具<EFBFBD>?*/
 .mermaid-fullscreen .mermaid-zoom-controls {
 	opacity: 1;
 	transform: translateY(0);
@@ -1170,13 +1170,13 @@ html.darkmode .mermaid-fullscreen .mermaid-zoom-controls {
 	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
 }
 
-/* 全屏按钮激活状态 */
+/* 全屏按钮激活状<EFBFBD>?*/
 .mermaid-zoom-btn[data-action="fullscreen"].active {
 	background: rgba(94, 114, 228, 0.2);
 	color: var(--themecolor);
 }
 
-/* 需求 15: Mermaid 导出功能样式 */
+/* 需<EFBFBD>?15: Mermaid 导出功能样式 */
 /* 导出按钮 */
 .mermaid-export-btn {
 	position: relative;
@@ -1240,7 +1240,7 @@ html.darkmode .mermaid-export-option:hover {
 	background: rgba(94, 114, 228, 0.2);
 }
 
-/* 需求 15.5: 导出错误提示 */
+/* 需<EFBFBD>?15.5: 导出错误提示 */
 .mermaid-export-error {
 	position: absolute;
 	top: 50%;
@@ -1304,8 +1304,8 @@ article.card .mermaid-container {
 	margin: 20px -20px;
 }
 
-/* 响应式调整 */
+/* 响应式调<EFBFBD>?*/
-/* 需求 16.1: 移动端工具栏适配 - 调整按钮大小 */
+/* 需<EFBFBD>?16.1: 移动端工具栏适配 - 调整按钮大小 */
 @media screen and (max-width: 768px) {
 	.mermaid-container {
 		margin: 15px -15px;
@@ -1316,7 +1316,7 @@ article.card .mermaid-container {
 		margin: 15px -15px;
 	}
 	
-	/* 移动端工具栏按钮放大，便于触摸 */
+	/* 移动端工具栏按钮放大，便于触<EFBFBD>?*/
 	.mermaid-zoom-controls {
 		padding: 8px;
 		gap: 8px;
@@ -1334,14 +1334,14 @@ article.card .mermaid-container {
 		padding: 0 10px;
 	}
 	
-	/* 移动端提示文本调整 */
+	/* 移动端提示文本调<EFBFBD>?*/
 	.mermaid-hint {
 		font-size: 11px;
 		padding: 5px 10px;
 		bottom: 8px;
 	}
 	
-	/* 移动端导出菜单调整 */
+	/* 移动端导出菜单调<EFBFBD>?*/
 	.mermaid-export-menu {
 		right: 8px;
 		top: 50px;
@@ -1354,7 +1354,7 @@ article.card .mermaid-container {
 	}
 }
 
-/* 需求 16.5: 横屏模式优化 - 自动调整图表布局 */
+/* 需<EFBFBD>?16.5: 横屏模式优化 - 自动调整图表布局 */
 @media screen and (max-width: 768px) and (orientation: landscape) {
 	.mermaid-container {
 		max-height: 70vh;
@@ -1365,7 +1365,7 @@ article.card .mermaid-container {
 		max-height: 65vh;
 	}
 	
-	/* 横屏时工具栏更紧凑 */
+	/* 横屏时工具栏更紧<EFBFBD>?*/
 	.mermaid-zoom-controls {
 		padding: 5px;
 		gap: 5px;
@@ -2431,13 +2431,9 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main {
 }
 
 #navbar_search_input_container.open .input-group {
-
 	background: rgba(255, 255, 255, 0.2);
-
+	-webkit-backdrop-filter: blur(var(--toolbar-blur));
-	-webkit-backdrop-filter: blur(12px);
+	backdrop-filter: blur(var(--toolbar-blur));
-
-	backdrop-filter: blur(12px);
-
 }
 
 #navbar_search_input_container.open .input-group:hover,
@@ -2575,27 +2571,18 @@ html.navbar-absolute:not(.no-banner) #navbar-main {
 }
 
 html.no-banner #navbar-main {
-
+	background-color: rgba(var(--themecolor-rgbstr), calc(var(--bg-opacity) - 0.08)) !important;
-	background-color: rgba(var(--themecolor-rgbstr), 0.82) !important;
-
 }
 
 html.no-banner.toolbar-blur #navbar-main {
-
+	background-color: rgba(var(--themecolor-rgbstr), calc(var(--card-opacity))) !important;
-	background-color: rgba(var(--themecolor-rgbstr), 0.6) !important;
+	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(130%);
-
+	backdrop-filter: blur(var(--card-blur)) saturate(130%);
-	-webkit-backdrop-filter: blur(20px) saturate(130%);
-
-	backdrop-filter: blur(20px) saturate(130%);
-
 }
 
 html.no-banner.toolbar-blur #navbar-main.navbar-no-blur {
-
+	background-color: rgba(var(--themecolor-rgbstr), calc(var(--bg-opacity) - 0.05)) !important;
-	background-color: rgba(var(--themecolor-rgbstr), 0.85) !important;
-
 	backdrop-filter: blur(0px);
-
 }
 
 .banner {
@@ -3952,10 +3939,8 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o {
 	box-shadow: 
 		0 12px 40px rgba(0, 0, 0, 0.15),
 		0 4px 12px rgba(0, 0, 0, 0.08);
-
+	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-	-webkit-backdrop-filter: blur(24px) saturate(180%);
+	backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-
-	backdrop-filter: blur(24px) saturate(180%);
 	overflow-y: auto;
 }
 
@@ -10589,9 +10574,9 @@ html.darkmode.amoled-dark #content:after {
 		border-radius: 50%;
 		background: rgba(255, 255, 255, 0.15);
 
-		-webkit-backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(calc(var(--card-blur) / 2));
 
-		backdrop-filter: blur(10px);
+		backdrop-filter: blur(calc(var(--card-blur) / 2));
 		cursor: pointer;
 		transition: all var(--animation-fast) var(--ease-standard);
 		color: #fff;
@@ -10660,9 +10645,9 @@ html.darkmode.amoled-dark #content:after {
 		gap: 0;
 		background: rgba(255, 255, 255, 0.12);
 
-		-webkit-backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(calc(var(--card-blur) / 2));
 
-		backdrop-filter: blur(10px);
+		backdrop-filter: blur(calc(var(--card-blur) / 2));
 		border-radius: 16px;
 		padding: 12px 8px;
 		position: relative;
@@ -11751,10 +11736,8 @@ html.darkmode.amoled-dark #content:after {
 		height: 100vh;
 		z-index: 1001;
 		background: rgba(0, 0, 0, 0.5);
-
+		-webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 6));
-		-webkit-backdrop-filter: blur(2px);
+		backdrop-filter: blur(calc(var(--toolbar-blur) / 6));
-
-		backdrop-filter: blur(2px);
 		opacity: 0;
 		visibility: hidden;
 		transition: opacity var(--animation-normal) var(--ease-standard),
@@ -12219,10 +12202,8 @@ html.darkmode.amoled-dark #content:after {
 	}
 	
 	html.leftbar-opened #sidebar_mask {
-
+		-webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 3));
-		-webkit-backdrop-filter: blur(4px);
+		backdrop-filter: blur(calc(var(--toolbar-blur) / 3));
-
-		backdrop-filter: blur(4px);
 	}
 }
 
@@ -12802,57 +12783,105 @@ html.using-safari .friend-link-description:after {
   * 放置于这里的CSS将应用于所有皮<E69C89>?
   * 萌娘百科仅开放Vector皮肤 
   * 请尊重萌娘百科版权，以下代码除非注明均是管理员手敲出来的！！！复制需要注明源自萌娘百科，并且附上URL地址 `http://zh.moegirl.org/MediaWiki:Common.css` 
-  * 版权协定：知识共<E8AF86>?署名-非商业性使<E680A7>?相同方式共享 3.0 
+/* ==========================================================================
-  * 复制之后请把图片换成自己网站上URL地址<EFBFBD>?
+   黑幕效果（Spoiler/Heimu<EFBFBD>?
-  */ 
+   ========================================================================== */
 
-.heimu, .heimu a, a .heimu, .heimu a.new { 
+/* 基础黑幕样式 */
+.heimu,
+.heimu a,
+a .heimu,
+.heimu a.new {
 	background-color: #252525 !important;
 	color: #252525 !important;
 	text-shadow: none !important;
-    transition: color var(--heimu-transition-time, .2s) ease, background-color var(--heimu-transition-time, .2s) ease;
+	transition: color 0.2s ease, background-color 0.2s ease;
+	cursor: pointer;
 }
-.heimu a { color: inherit !important; transition: inherit; }
+.heimu a {
-.heimu:hover, .heimu:active, 
+	color: inherit !important;
-.heimu:hover .heimu, .heimu:active .heimu { 
+	transition: inherit;
+}
+
+/* 悬停和激活状<E6B4BB>?*/
+.heimu:hover,
+.heimu:active,
+.heimu:hover .heimu,
+.heimu:active .heimu {
 	color: white !important;
+	background-color: transparent !important;
 }
-.heimu:hover a, a:hover .heimu, 
+.heimu:hover a,
-.heimu:active a, a:active .heimu { 
+a:hover .heimu,
+.heimu:active a,
+a:active .heimu {
 	color: inherit !important;
 }
-.heimu:hover .new, .heimu .new:hover, .new:hover .heimu, 
+.heimu:hover .new,
-.heimu:active .new, .heimu .new:active, .new:active .heimu { 
+.heimu .new:hover,
+.new:hover .heimu,
+.heimu:active .new,
+.heimu .new:active,
+.new:active .heimu {
 	color: #BA0000 !important;
 }
 
-/* Fix macro styles in dark mode */
+/* 文章内容中的黑幕 */
-html.darkmode .heimu a, 
+article .post-content .heimu,
-html.darkmode .color-curtain a {
+article .entry-content .heimu,
-    color: inherit !important;
+.article-content .heimu {
+	background-color: #252525 !important;
+	color: #252525 !important;
+}
+article .post-content .heimu:hover,
+article .entry-content .heimu:hover,
+.article-content .heimu:hover,
+article .post-content .heimu:active,
+article .entry-content .heimu:active,
+.article-content .heimu:active {
+	color: white !important;
+	background-color: transparent !important;
 }
 
+/* 夜间模式 */
+html.darkmode .heimu,
+html.darkmode .heimu a,
+html.darkmode a .heimu,
+html.darkmode .heimu a.new {
+	background-color: #1a1a1a !important;
+	color: #1a1a1a !important;
+}
+html.darkmode .heimu:hover,
+html.darkmode .heimu:active {
+	color: #e0e0e0 !important;
+	background-color: transparent !important;
+}
+html.darkmode .heimu a {
+	color: inherit !important;
+}
 html.darkmode .heimu:hover a,
 html.darkmode .color-curtain:hover a {
 	color: inherit !important;
 }
 
-/* Ensure heimu/color-curtain visibility in dark mode comment sections */
+/* 评论区黑<EFBFBD>?*/
 html.darkmode .comment-content .heimu,
 html.darkmode .comment-content .color-curtain {
-    background-color: #252525 !important;
+	background-color: #1a1a1a !important;
-    color: #252525 !important;
+	color: #1a1a1a !important;
 }
-
 html.darkmode .comment-content .heimu:hover,
 html.darkmode .comment-content .heimu:active,
 html.darkmode .comment-content .color-curtain:hover,
 html.darkmode .comment-content .color-curtain:active {
-    color: #fff !important;
+	color: #e0e0e0 !important;
+	background-color: transparent !important;
 }
 
-/* Disable global underline effect for links in macros to prevent animation conflicts */
+/* 禁用链接下划线动画（防止冲突<EFBFBD>?*/
 article .post-content .heimu a:before,
+article .entry-content .heimu a:before,
+.article-content .heimu a:before,
 article .post-content .color-curtain a:before,
 article .post-content .text-blur a:before,
 article .post-content .huhua a:before {
@@ -12860,8 +12889,11 @@ article .post-content .huhua a:before {
 	content: none !important;
 }
 
-/* Ensure links in macros inherit transition properties */
+/* 确保宏内链接继承过渡属<EFBFBD>?*/
-.heimu a, .color-curtain a, .text-blur a, .huhua a {
+.heimu a,
+.color-curtain a,
+.text-blur a,
+.huhua a {
 	transition: inherit !important;
 }
 
@@ -12904,10 +12936,8 @@ article .post-content .huhua a:before {
 	right: 0;
 	bottom: 0;
 	background: rgba(0, 0, 0, 0.6);
-
+	-webkit-backdrop-filter: blur(calc(var(--card-blur) / 2.5));
-	-webkit-backdrop-filter: blur(8px);
+	backdrop-filter: blur(calc(var(--card-blur) / 2.5));
-
-	backdrop-filter: blur(8px);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -13575,11 +13605,8 @@ html.darkmode .todo-add-form input:focus {
 	border-radius: 14px;
 	gap: 4px;
 	color: #fff;
-	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);	-webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 3));
-
+	backdrop-filter: blur(calc(var(--toolbar-blur) / 3));
-	-webkit-backdrop-filter: blur(4px);
-
-	backdrop-filter: blur(4px);
 }
 
 .leftbar-mobile-user-name .duolingo-streak.not-done {
@@ -14095,8 +14122,8 @@ html.darkmode .argon-fl-item:hover {
 
 /* 顶栏基础增强 - 柔和毛玻璃效<E79283>?*/
 #navbar-main {
-    -webkit-backdrop-filter: blur(12px) saturate(120%);
+	-webkit-backdrop-filter: blur(var(--toolbar-blur)) saturate(120%);
-    backdrop-filter: blur(12px) saturate(120%);
+	backdrop-filter: blur(var(--toolbar-blur)) saturate(120%);
 	border-bottom: none;
 	box-shadow: none;
 }
@@ -14131,8 +14158,8 @@ html.navbar-absolute:not(.no-banner) #navbar-main.navbar-ontop {
         rgba(0, 0, 0, 0.1) 50%,
         transparent 100%
     ) !important;
-    -webkit-backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 1.5));
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(calc(var(--toolbar-blur) / 1.5));
 }
 
 /* 顶栏渐变背景模式 */
@@ -14145,13 +14172,13 @@ html.toolbar-gradient #navbar-main {
 
 /* 顶栏玻璃态模<E68081>?*/
 html.toolbar-glass #navbar-main {
-    background: rgba(255, 255, 255, 0.12) !important;
+	background: rgba(255, 255, 255, var(--bg-opacity)) !important;
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
+	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-    backdrop-filter: blur(20px) saturate(180%);
+	backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
 	border-bottom: none;
 }
 html.toolbar-glass.darkmode #navbar-main {
-    background: rgba(0, 0, 0, 0.25) !important;
+	background: rgba(0, 0, 0, var(--bg-opacity)) !important;
 }
 
 /* 顶栏阴影增强 - 更柔<E69BB4>?*/
@@ -14939,8 +14966,8 @@ article .post-content a:hover {
 /* 搜索框展开时默认毛玻璃状<E79283>?*/
 #navbar_search_input_container.open .input-group {
 	background: rgba(255, 255, 255, 0.15) !important;
-    -webkit-backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(var(--card-blur));
-    backdrop-filter: blur(20px);
+	backdrop-filter: blur(var(--card-blur));
 	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
 }
 
@@ -14961,8 +14988,8 @@ article .post-content a:hover {
 #navbar_search_input_container.open .input-group:focus-within,
 #navbar_search_input_container.open.has-text .input-group {
 	background: rgba(255, 255, 255, 0.95) !important;
-    -webkit-backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(var(--card-blur));
-    backdrop-filter: blur(20px);
+	backdrop-filter: blur(var(--card-blur));
 	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
 
@@ -15127,12 +15154,14 @@ html.darkmode body {
 /* 卡片悬浮效果增强 */
 .card {
 	border: 1px solid rgba(var(--themecolor-rgbstr), 0.06);
-    background-color: var(--color-foreground);
+	background-color: rgba(255, 255, 255, var(--card-opacity));
+	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
+	backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
 }
 
 html.darkmode .card {
 	border: 1px solid rgba(255, 255, 255, 0.05);
-    background-color: var(--color-foreground);
+	background-color: rgba(66, 66, 66, var(--card-opacity));
 }
 
 /* 文章卡片优化 */
@@ -15522,8 +15551,8 @@ body {
 /* 响应式优<E5BC8F>?*/
 @media (max-width: 768px) {
 	.card {
-        -webkit-backdrop-filter: blur(6px);
+		-webkit-backdrop-filter: blur(calc(var(--card-blur) / 3));
-        backdrop-filter: blur(6px);
+		backdrop-filter: blur(calc(var(--card-blur) / 3));
 	}
 	
 	article.post.card:hover {
@@ -15782,13 +15811,13 @@ html.darkmode .related-posts.card {
 	box-shadow: 
 		0 10px 40px rgba(0, 0, 0, 0.12),
 		0 2px 10px rgba(0, 0, 0, 0.06);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
+	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-    backdrop-filter: blur(20px) saturate(180%);
+	backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
-    background: rgba(255, 255, 255, 0.9);
+	background: rgba(255, 255, 255, var(--bg-opacity));
 }
 
 html.darkmode .dropdown-menu {
-    background: rgba(40, 40, 40, 0.9);
+	background: rgba(40, 40, 40, var(--bg-opacity));
 	border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -15798,8 +15827,8 @@ html.darkmode .dropdown-menu {
 	box-shadow: 
 		0 25px 80px rgba(0, 0, 0, 0.25),
 		0 10px 30px rgba(0, 0, 0, 0.1);
-    -webkit-backdrop-filter: blur(30px) saturate(150%);
+	-webkit-backdrop-filter: blur(calc(var(--card-blur) * 1.5)) saturate(calc(var(--card-saturate) * 0.83));
-    backdrop-filter: blur(30px) saturate(150%);
+	backdrop-filter: blur(calc(var(--card-blur) * 1.5)) saturate(calc(var(--card-saturate) * 0.83));
 	background: rgba(255, 255, 255, 0.95);
 }
 
@@ -16131,8 +16160,8 @@ html.darkmode.style-glass article.post.post-full.card {
         justify-content: center;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.18);
-        -webkit-backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(calc(var(--card-blur) / 2.5));
-        backdrop-filter: blur(8px);
+        backdrop-filter: blur(calc(var(--card-blur) / 2.5));
         color: #fff;
         cursor: pointer;
         z-index: 2;
@@ -16204,8 +16233,8 @@ html.darkmode.style-glass article.post.post-full.card {
 	.leftbar-mobile-stats {
 		display: flex;
 		background: rgba(255, 255, 255, 0.15);
-        -webkit-backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(calc(var(--card-blur) / 2.5));
-        backdrop-filter: blur(8px);
+		backdrop-filter: blur(calc(var(--card-blur) / 2.5));
 		border-radius: 16px;
 		padding: 14px 10px;
 		position: relative;
@@ -16971,10 +17000,10 @@ article.post.card .post-thumbnail {
 #rightbar .card:nth-child(3) { animation-delay: 200ms; }
 
 /* 5. 页面过渡和浮动按钮动<E992AE>?*/
-#primary.pjax-loading { opacity: 0.6; transform: translateY(10px); pointer-events: none; }
+#primary.pjax-loading { opacity: 0.6; transform: translate3d(0, 10px, 0); pointer-events: none; }
-#primary { transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); }
+#primary { transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); will-change: opacity, transform; }
-@keyframes modernContentFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes modernContentFadeIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
-article.post.post-full:not(.no-animation) { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate); }
+article.post.post-full:not(.no-animation) { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate) both; will-change: opacity, transform; }
 article.post.post-full { transform-origin: center top; }
 
 #float_action_buttons { transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); }
@@ -17047,9 +17076,370 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"]
 /* 11. 骨架屏和加载动画 */
 @keyframes modernSkeletonPulse { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
 .skeleton { background: linear-gradient(90deg, var(--color-border-on-foreground) 25%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 75%); background-size: 200% 100%; animation: modernSkeletonPulse 1.5s ease-in-out infinite; border-radius: var(--card-radius); }
-@keyframes modernSpinnerRotate { to { transform: rotate(360deg); } }
+/* ==========================================================================
-.loading-spinner { width: 24px; height: 24px; border: 2px solid var(--color-border); border-top-color: var(--themecolor); border-radius: 50%; animation: modernSpinnerRotate 0.8s linear infinite; }
+   现代化页面加载系<E8BDBD>?
-#page-loading-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--themecolor-gradient); z-index: 9999; transition: width var(--animation-fast) var(--ease-out-expo); box-shadow: 0 0 10px rgba(var(--themecolor-rgbstr), 0.5); }
+   ========================================================================== */
+
+/* ---------- 基础旋转器（保留用于其他地方<E59CB0>?---------- */
+@keyframes modernSpinnerRotate {
+	to {
+		transform: rotate(360deg);
+	}
+}
+.loading-spinner {
+	width: 24px;
+	height: 24px;
+	border: 2px solid var(--color-border);
+	border-top-color: var(--themecolor);
+	border-radius: 50%;
+	animation: modernSpinnerRotate 0.8s linear infinite;
+}
+
+/* ---------- 顶部进度<E8BF9B>?---------- */
+#page-loading-bar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 3px;
+	background: var(--themecolor-gradient);
+	z-index: 9999;
+	transition: width var(--animation-fast) var(--ease-out-expo);
+	box-shadow: 0 0 10px rgba(var(--themecolor-rgbstr), 0.5);
+}
+
+/* ---------- 页面加载器容<E599A8>?---------- */
+.page-loader {
+	position: fixed;
+	inset: 0;
+	z-index: 9998;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
+}
+.page-loader.is-visible {
+	opacity: 1;
+	visibility: visible;
+	pointer-events: auto;
+	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
+}
+.page-loader.is-hiding {
+	opacity: 0;
+	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+/* ---------- 背景遮罩 ---------- */
+.page-loader-backdrop {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.03) 0%, rgba(var(--themecolor-rgbstr), 0.08) 100%);
+	-webkit-backdrop-filter: blur(calc(var(--card-blur) * 1.2)) saturate(var(--card-saturate));
+	backdrop-filter: blur(calc(var(--card-blur) * 1.2)) saturate(var(--card-saturate));
+}
+html.darkmode .page-loader-backdrop {
+	background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+/* ---------- 内容容器 ---------- */
+.page-loader-content {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 32px;
+	transform: translateY(20px) scale(0.95);
+	opacity: 0;
+	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
+}
+.page-loader.is-visible .page-loader-content {
+	transform: translateY(0) scale(1);
+	opacity: 1;
+	transition-delay: 0.1s;
+}
+
+/* ---------- 进度环容<E78EAF>?---------- */
+.loader-ring-container {
+	position: relative;
+	width: 120px;
+	height: 120px;
+}
+
+/* ---------- SVG 进度<E8BF9B>?---------- */
+.loader-ring {
+	width: 100%;
+	height: 100%;
+	transform: rotate(-90deg);
+	filter: drop-shadow(0 4px 12px rgba(var(--themecolor-rgbstr), 0.2));
+}
+.loader-ring-bg {
+	fill: none;
+	stroke: var(--color-border);
+	stroke-width: 3;
+	opacity: 0.2;
+}
+.loader-ring-progress {
+	fill: none;
+	stroke: url(#loaderGradient);
+	stroke-width: 3;
+	stroke-linecap: round;
+	stroke-dasharray: 283;
+	stroke-dashoffset: 283;
+	transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 渐变定义（通过 JS 动态添加或使用内联 SVG<56>?*/
+.loader-ring::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	background: conic-gradient(from 0deg, var(--themecolor), transparent);
+	opacity: 0.1;
+	animation: ringGlow 2s ease-in-out infinite;
+}
+@keyframes ringGlow {
+	0%, 100% {
+		opacity: 0.1;
+	}
+	50% {
+		opacity: 0.3;
+	}
+}
+
+/* ---------- 中心图标 ---------- */
+.loader-icon {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 48px;
+	height: 48px;
+	color: var(--themecolor);
+	animation: iconPulse 2s ease-in-out infinite;
+}
+.loader-icon svg {
+	width: 100%;
+	height: 100%;
+	animation: iconRotate 3s linear infinite;
+}
+@keyframes iconPulse {
+	0%, 100% {
+		opacity: 0.6;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	50% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1.1);
+	}
+}
+@keyframes iconRotate {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* ---------- 加载文字 ---------- */
+.loader-text {
+	text-align: center;
+	opacity: 0;
+	transform: translateY(10px);
+	animation: textFadeIn 0.5s ease forwards;
+	animation-delay: 0.3s;
+}
+@keyframes textFadeIn {
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+.loader-title {
+	font-size: 20px;
+	font-weight: 600;
+	color: var(--color-font);
+	margin-bottom: 8px;
+	letter-spacing: 0.5px;
+}
+.loader-subtitle {
+	font-size: 14px;
+	color: var(--color-font-sub);
+	font-weight: 400;
+}
+
+/* ---------- 骨架屏（延迟显示<E698BE>?---------- */
+.loader-skeleton {
+	opacity: 0;
+	transform: translateY(20px);
+	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+	pointer-events: none;
+}
+.page-loader.show-skeleton .loader-skeleton {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+/* ---------- 骨架卡片 ---------- */
+.skeleton-card {
+	width: min(480px, 85vw);
+	background: var(--color-foreground);
+	border-radius: 16px;
+	overflow: hidden;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+}
+html.darkmode .skeleton-card {
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* ---------- 骨架图片 ---------- */
+.skeleton-image {
+	width: 100%;
+	height: 200px;
+	background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%);
+	background-size: 200% 100%;
+	animation: skeletonShimmer 1.5s ease-in-out infinite;
+	position: relative;
+	overflow: hidden;
+}
+.skeleton-image::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: -100%;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+	animation: shimmerSlide 2s infinite;
+}
+html.darkmode .skeleton-image::after {
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+}
+@keyframes shimmerSlide {
+	to {
+		left: 100%;
+	}
+}
+@keyframes skeletonShimmer {
+	0%, 100% {
+		background-position: 0% 0%;
+	}
+	50% {
+		background-position: 100% 0%;
+	}
+}
+
+/* ---------- 骨架内容 ---------- */
+.skeleton-content {
+	padding: 20px;
+}
+.skeleton-title {
+	height: 24px;
+	width: 70%;
+	border-radius: 12px;
+	background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%);
+	background-size: 200% 100%;
+	animation: skeletonShimmer 1.5s ease-in-out infinite;
+	margin-bottom: 16px;
+}
+.skeleton-line {
+	height: 14px;
+	border-radius: 7px;
+	background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%);
+	background-size: 200% 100%;
+	animation: skeletonShimmer 1.5s ease-in-out infinite;
+	margin-bottom: 10px;
+}
+.skeleton-line.short {
+	width: 60%;
+}
+
+/* ---------- 响应式适配 ---------- */
+@media (max-width: 768px) {
+	.loader-ring-container {
+		width: 100px;
+		height: 100px;
+	}
+	.loader-icon {
+		width: 40px;
+		height: 40px;
+	}
+	.loader-title {
+		font-size: 18px;
+	}
+	.loader-subtitle {
+		font-size: 13px;
+	}
+	.skeleton-image {
+		height: 160px;
+	}
+	.skeleton-content {
+		padding: 16px;
+	}
+}
+@media (max-width: 480px) {
+	.page-loader-content {
+		gap: 24px;
+	}
+	.loader-ring-container {
+		width: 90px;
+		height: 90px;
+	}
+	.loader-icon {
+		width: 36px;
+		height: 36px;
+	}
+	.skeleton-card {
+		width: 92vw;
+	}
+	.skeleton-image {
+		height: 140px;
+	}
+}
+
+/* ---------- 减少动画（无障碍<E99A9C>?---------- */
+@media (prefers-reduced-motion: reduce) {
+	.page-loader,
+	.page-loader-content,
+	.loader-ring-progress,
+	.loader-icon,
+	.loader-text,
+	.loader-skeleton,
+	.skeleton-image,
+	.skeleton-title,
+	.skeleton-line {
+		animation: none !important;
+		transition: none !important;
+	}
+	.page-loader.is-visible .page-loader-content {
+		transform: none;
+		opacity: 1;
+	}
+}
+
+/* 页面过渡内容容器 */
+.page-transition-content {
+    will-change: opacity, transform;
+    transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-emphasized-decelerate);
+    transform: translate3d(0, 0, 0);
+}
+html.page-transition-enter .page-transition-content {
+    opacity: 0;
+    transform: translate3d(0, 8px, 0);
+}
+html.page-transition-enter.page-transition-active .page-transition-content {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .page-transition-content,
+    #article-loading-overlay,
+    #article-loading-overlay .overlay-content {
+        transition: none !important;
+        animation: none !important;
+    }
+}
 
 /* 12. 模态框和下拉菜单动<E58D95>?*/
 .modal { transition: opacity var(--animation-normal) var(--ease-standard); }
@@ -17198,7 +17588,7 @@ html.darkmode .mermaid-error-code pre {
 	gap: 5px;
 	z-index: 10;
 	background: rgba(255, 255, 255, 0.85);
-	backdrop-filter: blur(10px);
+	backdrop-filter: blur(calc(var(--card-blur) / 2));
 	border-radius: 6px;
 	padding: 5px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
@@ -17406,3 +17796,40 @@ html.darkmode .mermaid-container::-webkit-scrollbar-thumb {
 html.darkmode .mermaid-container::-webkit-scrollbar-thumb:hover {
         background: var(--color-text-secondary-dark);
 }
+
+.argon-hidden-text {
+    transition: all 0.3s ease;
+}
+.argon-hidden-text-background {
+    background-color: #252525;
+    color: #252525;
+    text-shadow: none;
+    border-radius: 2px;
+    padding: 0 2px;
+}
+.argon-hidden-text-background:hover, 
+.argon-hidden-text-background:active {
+    color: #fff;
+}
+html.darkmode .argon-hidden-text-background {
+    background-color: #ddd;
+    color: #ddd;
+}
+html.darkmode .argon-hidden-text-background:hover, 
+html.darkmode .argon-hidden-text-background:active {
+    color: #000;
+}
+
+.argon-hidden-text-blur {
+    filter: blur(5px);
+    -webkit-filter: blur(5px);
+    cursor: default;
+    user-select: none;
+}
+.argon-hidden-text-blur:hover, 
+.argon-hidden-text-blur:active {
+    filter: none;
+    -webkit-filter: none;
+    user-select: auto;
+}
+