docs(pages): 将 Giscus 评论插件添加到博客

2. fix(config): 修复特殊日期判断失败的问题 3. feat(giscus): 加入 Giscus 评论系统
2026-05-31 02:20:05 -04:00 · 2025-08-17 12:09:39 +08:00
parent 359d428204
commit 4690ce39b2
17 changed files with 395 additions and 73 deletions
@@ -71,9 +71,6 @@ const bannerOffsetByPosition = {
 const bannerOffset =
 	bannerOffsetByPosition[siteConfig.banner.position || "center"];

-
-// 周日判断
-const isSunday = new Date().getDay() === 0;
 ---

 <!DOCTYPE html>
@@ -102,14 +99,10 @@ const isSunday = new Date().getDay() === 0;
 		<meta property="twitter:url" content={Astro.url}>
 		<meta name="twitter:title" content={pageTitle}>
 		<meta name="twitter:description" content={description || pageTitle}>
+		
+		
+		<meta id="theme-color-meta" name="theme-color" content="#48823b" />

-		{ isSunday &&
-			<meta name="theme-color" content="#9e8eef" />
-		}
-
-		{ !isSunday &&
-			<meta name="theme-color" content="#48823b" />
-		}
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		{favicons.map(favicon => (
@@ -145,6 +138,13 @@ const isSunday = new Date().getDay() === 0;
 			//const hue = localStorage.getItem('hue') || configHue;
 			document.documentElement.style.setProperty('--hue', hue);

+			// 设置主题色（新增这部分）
+			const themeColor = currentDay === 0 ? '#9e8eef' : '#48823b';
+			const metaThemeColor = document.getElementById('theme-color-meta');
+			if (metaThemeColor) {
+				metaThemeColor.setAttribute('content', themeColor);
+			}
+			
 			// calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text
 			let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
 			offset = offset - offset % 4;
@@ -622,4 +622,4 @@ if (window.swup) {
 } else {
 	document.addEventListener("swup:enable", setup)
 }
-</script>
+</script>
@@ -40,12 +40,6 @@ const mainPanelTop = siteConfig.banner.enable
 	? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)`
 	: "5.5rem";

-// 周日判断
-const isSunday = new Date().getDay() === 0;
-
-// 周六判断
-const isSaturday = new Date().getDay() === 6;
-
 ---

 <Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
@@ -58,26 +52,22 @@ const isSaturday = new Date().getDay() === 6;
    </div>
 </div>

-<!-- 控制 Banner -->
-<!-- Banner -->
-
-<!-- 周日版本 -->
-{isSunday && siteConfig.banner.enable && <div id="banner-wrapper" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
-    <ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
-                  src={"/assets/132398672_p0_master1200_edited.jpg"} position={siteConfig.banner.position}
-    >
+<!-- Banner - 渲染两套，客户端控制显示 -->
+<!-- 默认banner -->
+{siteConfig.banner.enable && <div id="banner-wrapper-default" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
+    <ImageWrapper id="banner-default" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0"]}
+                  src={siteConfig.banner.src} position={siteConfig.banner.position}>
    </ImageWrapper>
 </div>}

-<!-- 其他版本 -->
-<!-- 使用 ! 取反号取反 false 为 true -->
-{!isSunday && siteConfig.banner.enable && <div id="banner-wrapper" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
-    <ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
-                  src={siteConfig.banner.src} position={siteConfig.banner.position}
-    >
+<!-- 周日banner -->
+{siteConfig.banner.enable && <div id="banner-wrapper-sunday" class={`absolute z-10 w-full transition duration-700 overflow-hidden hidden`} style={`top: -${BANNER_HEIGHT_EXTEND}vh`}>
+    <ImageWrapper id="banner-sunday" alt="Sunday banner image" class:list={["object-cover h-full transition duration-700 opacity-0"]}
+                  src={"/assets/132398672_p0_master1200_edited.jpg"} position={siteConfig.banner.position}>
    </ImageWrapper>
 </div>}

+
 <!-- Main content -->
 <div class="absolute w-full z-30 pointer-events-none" style={`top: ${mainPanelTop}`}>
    <!-- The pointer-events-none here prevent blocking the click event of the TOC -->
@@ -85,40 +75,28 @@ const isSaturday = new Date().getDay() === 6;
        <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
    mx-auto gap-4 px-0 md:px-4"
        >
-            <!-- Banner image credit -->
-            <!-- 周日版本 -->
-            {isSunday && hasBannerCredit && <a href={"https://www.pixiv.net/artworks/132398672"} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
-                                   class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
-                                   "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
-            >
-                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
-                <div class="text-white/75 text-xs">{"Pixiv @KiraraShss"}</div>
+            <!-- Banner credits - 渲染两套 -->
+            <!-- 默认banner credit -->
+            {hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit-default" target="_blank" rel="noopener" aria-label="Visit image source"
+                               class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
+                               "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}>
+                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded"></Icon>
+                <div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
                <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
-                    {"group-hover:opacity-100": hasBannerLink}]}
-                      name="fa6-solid:arrow-up-right-from-square">
+                    {"group-hover:opacity-100": hasBannerLink}]} name="fa6-solid:arrow-up-right-from-square">
                </Icon>
            </a>}

-            <!-- 其他版本 -->
-            {!isSunday && hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
-                                   class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
-                                   "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
-            >
-                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
-                <div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
+            <!-- 周日banner credit -->
+            {hasBannerCredit && <a href="https://www.pixiv.net/artworks/132398672" id="banner-credit-sunday" target="_blank" rel="noopener" aria-label="Visit image source"
+                               class:list={["hidden group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
+                               "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}>
+                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded"></Icon>
+                <div class="text-white/75 text-xs">Pixiv @KiraraShss</div>
                <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
-                    {"group-hover:opacity-100": hasBannerLink}]}
-                      name="fa6-solid:arrow-up-right-from-square">
+                    {"group-hover:opacity-100": hasBannerLink}]} name="fa6-solid:arrow-up-right-from-square">
                </Icon>
            </a>}
-            {isSaturday && (
-            <script>
-                if (!localStorage.getItem("hasSeenPopup")) {
-                alert("网站可能会在每个周日变个样...\n点击确认后将不再显示此弹窗");
-                localStorage.setItem("hasSeenPopup", "true"); // 记录已弹出
-                }
-            </script>
-            )}
            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>

            <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
@@ -161,4 +139,55 @@ const isSaturday = new Date().getDay() === 6;
        {!siteConfig.toc.enable && <div id="toc"></div>}
    </div>
 </div>
+
+<script is:inline>
+document.addEventListener('DOMContentLoaded', function() {
+    const currentDay = new Date().getDay();
+    const isSunday = currentDay === 0;
+    const isSaturday = currentDay === 6;
+    
+    // 控制banner显示
+    const defaultBanner = document.getElementById('banner-wrapper-default');
+    const sundayBanner = document.getElementById('banner-wrapper-sunday');
+    const defaultCredit = document.getElementById('banner-credit-default');
+    const sundayCredit = document.getElementById('banner-credit-sunday');
+    
+    if (isSunday) {
+        // 显示周日版本
+        if (defaultBanner) defaultBanner.style.display = 'none';
+        if (sundayBanner) {
+            sundayBanner.style.display = 'block';
+            sundayBanner.id = 'banner-wrapper'; // 添加这行，设置正确的ID
+            // 移除图片透明度，让图片显示出来
+        }
+        const sundayImg = sundayBanner.querySelector('#banner-sunday');
+        if (sundayImg) {
+            sundayImg.id = 'banner'; // 添加这行，设置正确的ID
+            sundayImg.classList.remove('opacity-0');
+            sundayImg.classList.add('opacity-100');
+        }
+        if (defaultCredit) defaultCredit.classList.add('hidden');
+        if (sundayCredit) sundayCredit.classList.remove('hidden');
+    } else {
+        // 显示默认版本
+        if (defaultBanner) {
+            defaultBanner.style.display = 'block';
+            defaultBanner.id = 'banner-wrapper';
+            // 修改这里，直接使用原始ID查询
+            const defaultBannerInner = document.getElementById('banner-default');
+            if (defaultBannerInner) {
+                defaultBannerInner.id = 'banner';
+                defaultBannerInner.classList.remove('opacity-0');
+                defaultBannerInner.classList.add('opacity-100');
+            }
+        }
+    }
+    
+    // 周六弹窗逻辑（只在真正的周六显示）
+    if (isSaturday && !localStorage.getItem("hasSeenPopup")) {
+        alert("网站可能会在每个周日变个样...\n点击确认后将不再显示此弹窗");
+        localStorage.setItem("hasSeenPopup", "true");
+    }
+});
+</script>
 </Layout>