Add TermsFeed cookie consent and gate non-essential scripts behind consent

Co-authored-by: MCKero6423 <222912022+MCKero6423@users.noreply.github.com>

src/components/Footer.astro

@@ -10,7 +10,8 @@ const currentYear = new Date().getFullYear();
     <div class="transition text-50 text-sm text-center">
         &copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://blog.mckero.com/about/">隐私政策和免责声明</a> /
         <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
-        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a> /
+        <a class="transition link text-[var(--primary)] font-medium" href="javascript:void(0)" id="open_preferences_center">Update cookies preferences</a>
 
         <!-- 在 Sitemap 后面添加第一个换行符 -->
         <br>

src/components/comment/Twikoo.astro

@@ -15,9 +15,27 @@ const config = {
 <div id="tcomment"></div>
 <script define:vars={{ config }}>
 function loadTwikoo() {
+  // Check functional consent via TermsFeed localStorage
+  var level = '';
+  try { level = localStorage.getItem('cookie_consent_level') || ''; } catch (e) { /* localStorage unavailable – default to no consent */ }
+  if (!level.includes('functional')) {
+    // Record that a load was requested so we can retry when consent is granted
+    window._twikooLoadPending = true;
+    return;
+  }
+
+  window._twikooLoadPending = false;
 
   // 动态加载 Twikoo 脚本，并在加载完成后执行 twikoo.init
+  if (window.twikooScriptLoaded) {
+    // Script already in DOM – just re-initialise for the current page
+    if (window.twikoo) {
+      window.twikoo.init(config);
+    }
+    return;
+  }
 
+  window.twikooScriptLoaded = true;
   const script = document.createElement('script');
   script.src = 'https://blog.mckero.com/twikoo.min.js';
   script.defer = true;
@@ -31,5 +49,13 @@ function loadTwikoo() {
   // };
   document.body.appendChild(script);
 }
-  document.addEventListener("loadComment", loadTwikoo, { once: true }); // 监听加载评论事件，但是我们只能监听一次，从而避免多次触发。
+// 监听加载评论事件，但是我们只能监听一次，从而避免多次触发。
+document.addEventListener("loadComment", loadTwikoo, { once: true });
+
+// Retry loading when the user accepts functional cookies on the current page
+document.addEventListener('cookieConsentUpdated', function () {
+  if (window._twikooLoadPending && document.getElementById('tcomment')) {
+    loadTwikoo();
+  }
+});
 </script>

src/layouts/Layout.astro

@@ -142,12 +142,38 @@ const bannerOffset =
 			'page-width': `${PAGE_WIDTH}rem`,
 		}}></style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
 
-		<!-- Umami Analytics -->
+		<!-- TermsFeed Cookie Consent -->
-		<script defer src="https://umami.mckero.com/script.js" data-website-id="a4ba198a-25a0-4631-84e1-e3b62e418c87"></script>
+		<script src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
+		<script is:inline>
+		document.addEventListener('DOMContentLoaded', function () {
+			if (typeof cookieconsent === 'undefined') return;
+			cookieconsent.run({
+				"notice_banner_type": "simple",
+				"consent_type": "express",
+				"palette": "dark",
+				"language": "en",
+				"page_load_consent_levels": ["strictly-necessary"],
+				"notice_banner_reject_button_hide": false,
+				"preferences_center_close_button_hide": false,
+				"page_refresh_confirmation_buttons": false,
+				"website_name": "MCKero blog",
+				"website_privacy_policy_url": "https://blog.mckero.com/about/"
+			});
+			// Relay TermsFeed consent events as a single custom event so components can react
+			['cookieconsent_accept_all', 'cookieconsent_reject_all', 'cookieconsent_save'].forEach(function (evtName) {
+				window.addEventListener(evtName, function () {
+					document.dispatchEvent(new CustomEvent('cookieConsentUpdated'));
+				});
+			});
+		});
+		</script>
 
-		<!-- Google tag (gtag.js) -->
+		<!-- Umami Analytics (blocked until analytics consent is granted) -->
-		<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9W2J9J4HV"></script>
+		<script type="text/plain" cookie-consent="analytics" defer src="https://umami.mckero.com/script.js" data-website-id="a4ba198a-25a0-4631-84e1-e3b62e418c87"></script>
-		<script>
+
+		<!-- Google tag (gtag.js) (blocked until analytics consent is granted) -->
+		<script type="text/plain" cookie-consent="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-G9W2J9J4HV"></script>
+		<script type="text/plain" cookie-consent="analytics" is:inline>
 			window.dataLayer = window.dataLayer || [];
 			function gtag(){dataLayer.push(arguments);}
 			gtag('js', new Date());

src/pages/posts/[...slug].astro

@@ -164,26 +164,43 @@ const jsonLd = {
                         console.log('✓ TianliGPT 初始化成功');
                     }
                 }, 500);
-            } else {
+            } else if (window.tianliGPT_scriptLoaded) {
-                // 脚本还没加载,继续等待
+                // 脚本已请求加载但尚未就绪，继续等待
                 setTimeout(tryInitTianliGPT, 200);
             }
+            // else: 脚本未加载（无功能性同意），停止轮询
         }
 
         // 开始尝试
         tryInitTianliGPT();
     </script>
     
-    <!-- 主脚本 - 只加载一次 -->
+    <!-- 主脚本 - 只在获得功能性同意后加载，且只加载一次 -->
     <script is:inline>
-        // 使用全局标志避免重复加载脚本
+        (function () {
-        if (!window.tianliGPT_scriptLoaded) {
+            if (window.tianliGPT_scriptLoaded) return;
-            window.tianliGPT_scriptLoaded = true;
+
-            const script = document.createElement('script');
+            function doLoadTianliGPT() {
-            script.src = 'https://ai.zhheo.com/static/public/tianli_gpt.min.js';
+                if (window.tianliGPT_scriptLoaded) return;
-            script.async = true;
+                // Check functional consent via TermsFeed localStorage
-            document.body.appendChild(script);
+                var level = '';
-        }
+                try { level = localStorage.getItem('cookie_consent_level') || ''; } catch (e) { /* localStorage unavailable – default to no consent */ }
+                if (!level.includes('functional')) return;
+
+                window.tianliGPT_scriptLoaded = true;
+                var script = document.createElement('script');
+                script.src = 'https://ai.zhheo.com/static/public/tianli_gpt.min.js';
+                script.async = true;
+                script.onload = function () {
+                    if (typeof tryInitTianliGPT === 'function') tryInitTianliGPT();
+                };
+                document.body.appendChild(script);
+            }
+
+            doLoadTianliGPT();
+            // Retry when user grants consent on the current page
+            document.addEventListener('cookieConsentUpdated', doLoadTianliGPT);
+        }());
     </script>
 </div>