juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 09:03:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(背景图片): 更新背景图片URL并优化加载逻辑

Browse Source 
将背景图片URL统一更新为https://cf-img.acofork.com/h
移除原随机脚本注释并优化背景图片加载检测逻辑
使用伪元素替代原bg-box div实现背景效果
This commit is contained in:
二叉树树
2025-12-27 13:34:10 +08:00
parent a22f496862
commit 2f304fece0
4 changed files with 47 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/config.ts
View File

@@ -37,7 +37,7 @@ export const siteConfig: SiteConfig = {
},
background: {
enable: true, // Enable background image
src: "", // Background image URL (supports HTTPS)
src: "https://cf-img.acofork.com/h", // 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'

2
src/content/posts/pin.md
View File

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

2
src/content/posts/record.md
View File

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

62
src/layouts/Layout.astro
View File

@@ -115,7 +115,9 @@ 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> --> */}
{/* <!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://giscus.app https://hpic.072103.xyz https://umami.acofork.com https://hm.baidu.com https://www.googletagmanager.com https://www.google-analytics.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://static.cloudflareinsights.com https://*.adtrafficquality.google; style-src 'self' 'unsafe-inline' https://giscus.app https://fonts.googleapis.com https://api.iconify.design; font-src 'self' https://fonts.gstatic.com https://api.iconify.design; img-src 'self' data: https: http:; connect-src 'self' https://umami.acofork.com https://hm.baidu.com https://www.google-analytics.com https://analytics.google.com https://api.iconify.design https://static.cloudflareinsights.com https://pic.2x.nz https://q2.qlogo.cn https://ep1.adtrafficquality.google https://googleads.g.doubleclick.net; frame-src 'self' https://giscus.app *.bilibili.com https://www.google.com https://googleads.g.doubleclick.net https://support.nodeget.com https://*.adtrafficquality.google; object-src 'none'; base-uri 'self'; form-action 'self';"> */}
@@ -160,6 +162,28 @@ const bannerOffset =
let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
offset = offset - offset % 4;
document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
// Background image loading detection
const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
const img = new Image();
const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
if (urlMatch) {
img.onload = function() {
// 背景图片完全加载后，显示背景并启用卡片透明效果
document.body.classList.add('bg-loaded');
document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
};
img.onerror = function() {
// Keep cards opaque if background image fails to load
console.warn('Background image failed to load, keeping cards opaque');
};
img.src = urlMatch[1];
}
}
</script>
<style define:vars={{
configHue,
@@ -193,24 +217,27 @@ const bannerOffset =
--bg-opacity: var(--bg-opacity);
}
#bg-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: var(--bg-position);
background-size: var(--bg-size);
background-repeat: var(--bg-repeat);
background-attachment: var(--bg-attachment);
opacity: 0;
pointer-events: none;
z-index: -1;
transition: opacity 0.3s ease-in-out;
body::before {
content: '' !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: var(--bg-url) !important;
background-position: var(--bg-position) !important;
background-size: var(--bg-size) !important;
background-repeat: var(--bg-repeat) !important;
background-attachment: var(--bg-attachment) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -1 !important;
display: block !important;
transition: opacity 0.3s ease-in-out !important;
}
#bg-box.loaded {
opacity: calc(var(--bg-opacity) * var(--bg-enable));
body.bg-loaded::before {
opacity: calc(var(--bg-opacity) * var(--bg-enable)) !important;
}
</style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
@@ -262,7 +289,6 @@ 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 />