fix(布局): 添加noscript样式确保背景在禁用JS时可见

修复Giscus评论区的Swup页面切换事件处理，确保在文章页面切换时正确加载评论
2026-01-31 09:03:18 +08:00 · 2026-01-19 23:50:24 +08:00
parent 6b800f3914
commit 370d8fadd7
2 changed files with 18 additions and 2 deletions
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -232,6 +232,13 @@ const bannerOffset =
 	<body class=" min-h-screen transition " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
 		  data-overlayscrollbars-initialize
 	>
+		<noscript>
+			<style>
+				#bg-box {
+					opacity: 1 !important;
+				}
+			</style>
+		</noscript>
 		<div id="bg-box"></div>
 		<ConfigCarrier></ConfigCarrier>
 		<slot />
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -166,8 +166,8 @@ const jsonLd = {

            
            <!-- Giscus 评论区 -->
-            <div id="giscus-container"></div>
-            <script is:inline>
+            <div id="giscus-container" data-swup-ignore-script></div>
+            <script is:inline data-swup-ignore-script>
                function loadGiscus() {
                    const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
                    
@@ -224,6 +224,15 @@ const jsonLd = {

                // 支持 Swup 页面切换
                document.addEventListener('swup:contentReplaced', loadGiscus);
+                document.addEventListener('swup:pageView', loadGiscus); 
+                document.addEventListener('swup:visit:end', (event) => {
+                     // 只有当访问的是文章页面时才加载 Giscus
+                     // 这里的逻辑可以根据实际情况调整，例如检查页面是否包含 giscus-container
+                     const container = document.getElementById('giscus-container');
+                     if (container) {
+                        loadGiscus();
+                     }
+                });
            </script>
    <br>