@xingwangzhe/stalux 1.21.6 → 1.21.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.6",
+    "version": "1.21.8",
     "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/layout/navs.astro

@@ -87,7 +87,14 @@ const navs = navsConfig?.items ?? [];
 </nav>
 <Search />
 <script>
+    const navWindow = window as Window & {
+        __STALUX_NAV_INITIALIZED__?: boolean;
+    };
+
     document.addEventListener("astro:page-load", () => {
+        if (navWindow.__STALUX_NAV_INITIALIZED__) return;
+        navWindow.__STALUX_NAV_INITIALIZED__ = true;
+
         const searchBtn = document.querySelector(
             '[data-ref="stalux-search-btn"]',
         );
@@ -141,7 +148,20 @@ const navs = navsConfig?.items ?? [];
         const btnRight = document.querySelector('[data-ref="stalux-nav-scroll-right"]');
         if (!navList || !btnLeft || !btnRight) return;
 
+        let frameId = 0;
+        let lastScale = "1";
+
+        function updateScrollButtons() {
+            const hasOverflow = navList.scrollWidth > navList.clientWidth;
+            const atStart = navList.scrollLeft <= 1;
+            const atEnd = navList.scrollLeft + navList.clientWidth >= navList.scrollWidth - 1;
+
+            btnLeft.toggleAttribute("data-visible", hasOverflow && !atStart);
+            btnRight.toggleAttribute("data-visible", hasOverflow && !atEnd);
+        }
+
         function updateButtons() {
+            frameId = 0;
             const navWidth = navList.clientWidth;
             const itemCount = navList.children.length;
             const baseFontSize = Number.parseFloat(getComputedStyle(navList).fontSize) || 16;
@@ -152,10 +172,17 @@ const navs = navsConfig?.items ?? [];
                 0,
             ) + gap * Math.max(0, itemCount - 1);
             const scale = estimatedWidth > navWidth ? Math.max(minFontSize / baseFontSize, navWidth / estimatedWidth) : 1;
-            navList.style.setProperty("--nav-scale", String(scale));
-            navList.removeAttribute("data-overflow");
-            btnLeft.removeAttribute("data-visible");
-            btnRight.removeAttribute("data-visible");
+            const nextScale = String(scale);
+            if (nextScale !== lastScale) {
+                navList.style.setProperty("--nav-scale", nextScale);
+                lastScale = nextScale;
+            }
+            updateScrollButtons();
+        }
+
+        function scheduleUpdate() {
+            if (frameId) return;
+            frameId = requestAnimationFrame(updateButtons);
         }
 
         btnLeft.addEventListener("click", () => {
@@ -165,18 +192,16 @@ const navs = navsConfig?.items ?? [];
         btnRight.addEventListener("click", () => {
             navList.scrollBy({ left: 300, behavior: "smooth" });
         });
-
-        // 监听滚动事件更新按钮状态
-        navList.addEventListener("scroll", updateButtons);
+        navList.addEventListener("scroll", scheduleUpdate, { passive: true });
 
         // 用 ResizeObserver 监听容器尺寸变化（窗口缩窄/变宽时重新判断）
-        const ro = new ResizeObserver(updateButtons);
+        const ro = new ResizeObserver(scheduleUpdate);
         ro.observe(navList);
         if (navList.parentElement) ro.observe(navList.parentElement);
-        window.addEventListener("resize", updateButtons, { passive: true });
-        window.addEventListener("load", updateButtons, { once: true });
+        window.addEventListener("resize", scheduleUpdate, { passive: true });
+        window.addEventListener("load", scheduleUpdate, { once: true });
 
         // 初始检测
-        updateButtons();
+        scheduleUpdate();
     }
 </script>

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);

package/src/utils/view-transitions.ts

@@ -37,7 +37,7 @@ export type RouteAnimation = {
 const easing = "cubic-bezier(0.25, 0.9, 0.2, 1)";
 const exitAnimation: TransitionAnimation = {
     name: "stalux-page-fade-out",
-    duration: "0.32s",
+    duration: "0.16s",
     easing,
     fillMode: "both",
 };
@@ -48,7 +48,7 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
             old: exitAnimation,
             new: {
                 name: `stalux-page-${name}-in`,
-                duration: "0.42s",
+                duration: "0.2s",
                 easing,
                 fillMode: "both",
             },
@@ -57,7 +57,7 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
             old: exitAnimation,
             new: {
                 name: `stalux-page-${backName}-in`,
-                duration: "0.42s",
+                duration: "0.2s",
                 easing,
                 fillMode: "both",
             },