feat(显示设置): 添加背景模糊功能

在显示设置中添加背景模糊控制功能,包括滑块调节和本地存储
修改卡片背景样式,增加模糊效果并调整透明度
This commit is contained in:
二叉树树
2025-12-28 20:36:20 +08:00
parent 3c976f29ed
commit 4e57b489de
6 changed files with 51 additions and 4 deletions

View File

@@ -236,10 +236,11 @@ const bannerOffset =
#bg-box.loaded {
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 -->
</style>
<slot name="head"></slot>
<link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/>
<!-- Umami分析自建 -->
<script defer src="https://umami.acofork.com/script.js" data-website-id="5d710dbd-3a2e-43e3-a553-97b415090c63" data-swup-ignore-script></script>
@@ -402,7 +403,7 @@ import {
// SizeObserverPlugin,
// ClickScrollPlugin
} from 'overlayscrollbars';
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
import {getHue, getStoredTheme, setHue, setTheme, getBgBlur, setBgBlur} from "../utils/setting-utils";
import {pathsEqual, url} from "../utils/url-utils";
import {
BANNER_HEIGHT,
@@ -486,6 +487,10 @@ function loadHue() {
setHue(getHue())
}
function loadBgBlur() {
setBgBlur(getBgBlur())
}
function initCustomScrollbar() {
const bodyElement = document.querySelector('body');
if (!bodyElement) return;
@@ -532,6 +537,7 @@ function init() {
// disableAnimation()() // TODO
loadTheme();
loadHue();
loadBgBlur();
initCustomScrollbar();
showBanner();
}