@xingwangzhe/stalux 1.20.1 → 1.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.20.1",
+    "version": "1.20.2",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/layouts/Stalux.astro

@@ -128,8 +128,8 @@ const llmPromote = llmPromoteRaw
     data-stalux-bg-index="0"
   >
     {llmPromote && <div style="display:none">{llmPromote}</div>}
-    <div class="bg-layer bg-a" style="opacity: 1;" aria-hidden="true"></div>
-    <div class="bg-layer bg-b" aria-hidden="true"></div>
+    <div class="bg-layer bg-a" style="opacity: 1;" transition:persist aria-hidden="true"></div>
+    <div class="bg-layer bg-b" transition:persist aria-hidden="true"></div>
     <main class="stalux-main">
       <slot />
     </main>

package/src/scripts/background.ts

@@ -38,27 +38,49 @@ function setLayerOpacity(layer: "a" | "b", opacity: number): void {
     if (el) el.style.opacity = String(opacity);
 }
 
-function applyBackground(): void {
-    // 客户端运行时随机选图，构建产物保持确定性
-    const index = Math.floor(Math.random() * backgroundImages.length);
-    const layer: "a" | "b" = "a";
-    if (backgroundImages.length > 0 && backgroundImages[index]) {
-        const el = getLayerEl(layer);
-        if (el) el.style.backgroundImage = `url('${backgroundImages[index]}')`;
+function getActiveLayer(): "a" | "b" {
+    const aOpacity = Number(getLayerEl("a")?.style.opacity ?? 0);
+    const bOpacity = Number(getLayerEl("b")?.style.opacity ?? 0);
+    return bOpacity > aOpacity ? "b" : "a";
+}
+
+function pickBackgroundIndex(previous: number): number {
+    if (backgroundImages.length < 2) return 0;
+    let index = Math.floor(Math.random() * backgroundImages.length);
+    while (index === previous) {
+        index = Math.floor(Math.random() * backgroundImages.length);
     }
-    setLayerOpacity(layer, 1);
-    setLayerOpacity("b", 0);
+    return index;
+}
+
+function crossfadeBackground(): void {
+    if (backgroundImages.length === 0) return;
+
+    const activeLayer = getActiveLayer();
+    const nextLayer: "a" | "b" = activeLayer === "a" ? "b" : "a";
+    const previousIndex = Number(document.body.dataset.staluxBgIndex ?? -1);
+    const index = pickBackgroundIndex(previousIndex);
+    const next = getLayerEl(nextLayer);
+    if (!next || !backgroundImages[index]) return;
+
+    next.style.backgroundImage = `url('${backgroundImages[index]}')`;
+    setLayerOpacity(nextLayer, 1);
+    setLayerOpacity(activeLayer, 0);
     document.body.dataset.staluxBgIndex = String(index);
-    document.body.dataset.staluxBgLayer = layer;
+    document.body.dataset.staluxBgLayer = nextLayer;
+}
+
+function initializeBackground(): void {
+    const active = getLayerEl(getActiveLayer());
+    if (active?.style.backgroundImage) return;
+    crossfadeBackground();
 }
 
-// 首次加载与 VT 软导航都触发 astro:page-load：
-// - 首次加载：window load 后触发（router.js addEventListener("load", onPageLoad)）。
-// - VT 软导航：swap 完成后、过渡动画期间触发（router.js onPageLoad()），
-//   此时设置随机背景，过渡中旧图淡出、新图淡入，无跳变闪变。
-// 注意：软导航不会重新执行打包的 module 脚本（监听器仍是首访注册的），
-// 所以这里不能做“只执行一次”的去重，每次 page-load 都必须随机；
-// 若软导航后新脚本被重新执行，重复监听导致随机两次也无妨（仍是随机图）。
-// body 的 data-stalux-bg-* 是 SSR 固定占位（a/0，为了构建确定性），
-// 不能再用它判断“服务端已渲染正确背景”，否则随机逻辑永不执行。
-document.addEventListener("astro:page-load", applyBackground);
+// before-swap 在 View Transition 的快照之后、DOM 替换之前触发；背景层使用
+// transition:persist 保留，因此可以在页面内容交换期间完成双层 crossfade。
+// 非 VT 浏览器也会触发该生命周期，fallback 同样保持平滑。
+if (!(window as Window & { __STALUX_BG_LISTENER__?: boolean }).__STALUX_BG_LISTENER__) {
+    (window as Window & { __STALUX_BG_LISTENER__?: boolean }).__STALUX_BG_LISTENER__ = true;
+    document.addEventListener("astro:before-swap", crossfadeBackground);
+    document.addEventListener("astro:page-load", initializeBackground);
+}

package/src/styles/base/init.css

@@ -263,7 +263,7 @@ ul {
     background: #2a2a2a;
 }
 
-/* 背景层 - 双层随机背景（不在 View Transition 中 crossfade，避免 SVG 双倍光栅化卡顿） */
+/* 背景层 - 双层随机背景，在路由切换时交叉淡入淡出 */
 .bg-layer {
     position: fixed;
     inset: 0;
@@ -275,12 +275,19 @@ ul {
     filter: var(--stalux-bg-filter, none);
     pointer-events: none;
     opacity: 0;
+    transition: opacity 650ms ease-in-out;
     /* 禁止浏览器强制色彩模式（高对比度/暗黑模式）调整背景图颜色 */
     forced-color-adjust: none;
     /* 关键：防止 Safari/WebKit 在暗色模式下自动调整 SVG 背景图颜色 */
     color-scheme: only light;
 }
 
+@media (prefers-reduced-motion: reduce) {
+    .bg-layer {
+        transition-duration: 0ms;
+    }
+}
+
 /* footer 基础样式，保证页脚始终可见且不覆盖内容 */
 footer {
     padding: var(--space-lg) var(--space-md);