@xingwangzhe/stalux 1.21.7 → 1.21.9

package/package.json

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

package/src/components/stalux/analytics/clarity.astro

@@ -8,13 +8,10 @@ const id = headConfig?.bingClarityId;
 
 <script is:inline data-astro-rerun define:vars={{ id }}>
     // 防止重复初始化
-    if (id && !document.getElementById("stalux-clarity-script") && !window.clarity) {
+    const load = () => {
+        if (!id || document.getElementById("stalux-clarity-script") || window.clarity) return;
         (function (c, l, a, r, i, t, y) {
-            c[a] =
-                c[a] ||
-                function () {
-                    (c[a].q = c[a].q || []).push(arguments);
-                };
+            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments); };
             t = l.createElement(r);
             t.id = "stalux-clarity-script";
             t.async = 1;
@@ -22,5 +19,7 @@ const id = headConfig?.bingClarityId;
             y = l.getElementsByTagName(r)[0];
             y.parentNode.insertBefore(t, y);
         })(window, document, "clarity", "script", id);
-    }
+    };
+    if ("requestIdleCallback" in window) requestIdleCallback(load, { timeout: 4000 });
+    else window.addEventListener("load", () => setTimeout(load, 0), { once: true });
 </script>

package/src/components/stalux/analytics/google.astro

@@ -6,26 +6,29 @@ const headConfig = getHeadData(configEntries);
 const gaID = headConfig?.googleAnalyticsId;
 ---
 
-<script
-    is:inline
-    async
-    src={`https://www.googletagmanager.com/gtag/js?id=${gaID}`}
-    type="text/javascript"></script>
 <script is:inline define:vars={{ gaID }}>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() {
-        dataLayer.push(arguments);
-    }
-    gtag("js", new Date());
-    gtag("config", gaID);
-
-    // 视图过渡后重新跟踪页面浏览（仅添加一次）
-    if (!window.__gtagListenerAdded) {
-        document.addEventListener("astro:page-load", () => {
-            gtag("event", "page_view", {
-                page_path: window.location.pathname,
-            });
-        });
-        window.__gtagListenerAdded = true;
-    }
+    (() => {
+        const load = () => {
+            if (window.__staluxAnalyticsLoaded) return;
+            window.__staluxAnalyticsLoaded = true;
+            const script = document.createElement("script");
+            script.async = true;
+            script.src = `https://www.googletagmanager.com/gtag/js?id=${gaID}`;
+            document.head.appendChild(script);
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = window.gtag || function () {
+                window.dataLayer.push(arguments);
+            };
+            window.gtag("js", new Date());
+            window.gtag("config", gaID);
+            if (!window.__gtagListenerAdded) {
+                document.addEventListener("astro:page-load", () => {
+                    window.gtag("event", "page_view", { page_path: window.location.pathname });
+                });
+                window.__gtagListenerAdded = true;
+            }
+        };
+        if ("requestIdleCallback" in window) requestIdleCallback(load, { timeout: 3000 });
+        else window.addEventListener("load", () => setTimeout(load, 0), { once: true });
+    })();
 </script>

package/src/components/stalux/common/verCount.astro

@@ -2,9 +2,15 @@
 
 ---
 
-<script
-    is:inline
-    defer
-    data-astro-rerun
-    type="text/javascript"
-    src="https://events.vercount.one/js"></script>
+<script is:inline data-astro-rerun>
+    (() => {
+        const load = () => {
+            const script = document.createElement("script");
+            script.defer = true;
+            script.src = "https://events.vercount.one/js";
+            document.head.appendChild(script);
+        };
+        if ("requestIdleCallback" in window) requestIdleCallback(load, { timeout: 5000 });
+        else window.addEventListener("load", () => setTimeout(load, 0), { once: true });
+    })();
+</script>

package/src/components/stalux/posts/postContent.astro

@@ -107,9 +107,6 @@ const mdSourceUrl = exportMd
 {
     props.hasImage && (
         <script>
-            import PhotoSwipeLightbox from "photoswipe/lightbox";
-            import PhotoSwipe from "photoswipe";
-
             // 选择器必须与 @xingwangzhe/satteri-photoswipe HAST 插件生成的 class 一致
             const GALLERY_SELECTOR = "a.pswp-gallery-item";
 
@@ -146,6 +143,12 @@ const mdSourceUrl = exportMd
             let lightbox = null;
 
             async function initLightbox() {
+                const [{ default: PhotoSwipeLightbox }, { default: PhotoSwipe }] = await Promise.all([
+                    import("photoswipe/lightbox"),
+                    import("photoswipe"),
+                    import("photoswipe/dist/photoswipe.css"),
+                ]);
+
                 // 销毁旧实例（View Transition 导航后，旧 DOM 已移除，需安全销毁）
                 if (lightbox) {
                     try {
@@ -168,15 +171,24 @@ const mdSourceUrl = exportMd
                 lightbox.init();
             }
 
-            // 1) View Transition 导航后触发
-            document.addEventListener("astro:page-load", initLightbox);
+            let initPromise = null;
+            const ensureLightbox = () => {
+                if (!initPromise) initPromise = initLightbox();
+                return initPromise;
+            };
+
+            // 仅在用户第一次点击图片时加载 PhotoSwipe、其 CSS 和图片尺寸数据，
+            // 文章首屏不再为未使用的灯箱支付 JS/CSS 成本。
+            document.addEventListener("click", (event) => {
+                const target = event.target;
+                if (target instanceof Element && target.closest(GALLERY_SELECTOR)) {
+                    void ensureLightbox();
+                }
+            }, { capture: true });
 
-            // 2) 首屏兜底：避免 astro:page-load 在监听器注册前已触发
-            if (document.readyState !== "loading") {
-                setTimeout(initLightbox, 0);
-            } else {
-                document.addEventListener("DOMContentLoaded", () => setTimeout(initLightbox, 0));
-            }
+            document.addEventListener("astro:page-load", () => {
+                initPromise = null;
+            });
         </script>
     )
 }

package/src/layouts/PostLayout.astro

@@ -6,7 +6,6 @@ import PostNavigation from "@components/stalux/posts/postNavigation.astro";
 import PostCC from "@components/stalux/posts/postCC.astro";
 import WalineComment from "@components/stalux/posts/WalineComment.astro";
 import { buildWalineProps } from "@utils/waline";
-import PhotoSwipeStyle from "@components/stalux/posts/PhotoSwipeStyle.astro";
 import { getCollection } from "astro:content";
 import "@styles/base/math.css";
 import layoutStyle from "@styles/components/posts/postLayout.module.css";
@@ -48,8 +47,6 @@ const walineConfig = walineSection && walineSection.serverURL ? {
 } : undefined;
 ---
 
-{props.hasImage && <PhotoSwipeStyle />}
-
 <div class={layoutStyle.postLayout}>
     <div class={layoutStyle.container}>
         <!-- Left Sidebar -->

package/src/styles/base/init.css

@@ -142,10 +142,10 @@ ul {
     --white-95p: rgba(255, 255, 255, 0.95);
     --white-90p: rgba(255, 255, 255, 0.9);
     --white-85p: rgba(255, 255, 255, 0.85);
-    --white-80p: rgba(255, 255, 255, 0.8);
+    --white-80p: rgba(255, 255, 255, 0.9);
     --white-78p: rgba(255, 255, 255, 0.78);
     --white-75p: rgba(255, 255, 255, 0.75);
-    --white-70p: rgba(255, 255, 255, 0.7);
+    --white-70p: rgba(255, 255, 255, 0.86);
     --white-60p: rgba(255, 255, 255, 0.6);
     --white-50p: rgba(255, 255, 255, 0.5);
     --white-30p: rgba(255, 255, 255, 0.3);