feat: add optional third-party analytics config (Clarity)

matsuzaka-yuki · matsuzaka-yuki · commit 6e8ad66dda08 · 2026-03-25T01:29:17.000+08:00
diff --git a/src/config.ts b/src/config.ts
@@ -15,6 +15,7 @@
 	ShareConfig,
 	SidebarLayoutConfig,
 	SiteConfig,
+	ThirdPartyAnalyticsConfig,
 } from "./types/config";
 import { LinkPreset } from "./types/config";
 
@@ -240,6 +241,11 @@ export const siteConfig: SiteConfig = {
 		height: 3, // 进度条高度 3px
 		duration: 6000, // 动画时长 6s
 	},
+
+	thirdPartyAnalytics: {
+		enable: false, // 是否启用第三方统计（Microsoft Clarity），默认关闭，启用可能影响 Lighthouse 评分
+		clarityId: "", // Clarity 项目 ID
+	},
 };
 export const fullscreenWallpaperConfig: FullscreenWallpaperConfig = {
 	src: {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -161,7 +161,7 @@ if (siteConfig.font) {
 >
 	<head>
 		<!-- 第三方分析脚本 -->
-		<AnalyticsScripts />
+		<AnalyticsScripts thirdPartyAnalytics={siteConfig.thirdPartyAnalytics} />
 
 		<!-- SEO Meta Tags, Open Graph, Twitter Card, Favicons, Theme Init -->
 		<HeadTags
diff --git a/src/layouts/partials/AnalyticsScripts.astro b/src/layouts/partials/AnalyticsScripts.astro
@@ -5,21 +5,32 @@
  *
  * 包含:
  * - Google Tag Manager (GTM)
- * - Microsoft Clarity
+ * - Microsoft Clarity (可选，通过 thirdPartyAnalytics 配置控制)
  *
  * 使用 requestIdleCallback 延迟加载以优化性能
  */
 
 interface Props {
 	gtmId?: string;
-	clarityId?: string;
+	thirdPartyAnalytics?: {
+		enable: boolean;
+		clarityId?: string;
+	};
 }
 
-const { gtmId = "GTM-KRX3XGVH", clarityId = "tjr3vkhj8i" } = Astro.props;
+const {
+	gtmId = "GTM-KRX3XGVH",
+	thirdPartyAnalytics = { enable: false, clarityId: "" },
+} = Astro.props;
+
+const clarityEnable = thirdPartyAnalytics.enable && thirdPartyAnalytics.clarityId;
 ---
 
 <!-- 第三方分析脚本 - 延迟加载优化 -->
-<script is:inline define:vars={{ gtmId, clarityId }}>
+<script
+	is:inline
+	define:vars={{ gtmId, clarityEnable, clarityId: thirdPartyAnalytics.clarityId || "" }}
+>
 	// 使用 requestIdleCallback 延迟加载第三方脚本
 	// 标记脚本是否已加载，防止 swup 导航时重复加载
 	window.analyticsLoaded = window.analyticsLoaded || false;
@@ -45,19 +56,21 @@ const { gtmId = "GTM-KRX3XGVH", clarityId = "tjr3vkhj8i" } = Astro.props;
 			f.parentNode.insertBefore(j, f);
 		})(window, document, "script", "dataLayer", gtmId);
 
-		// Clarity
-		(function (c, l, a, r, i, t, y) {
-			c[a] =
-				c[a] ||
-				function () {
-					(c[a].q = c[a].q || []).push(arguments);
-				};
-			t = l.createElement(r);
-			t.async = 1;
-			t.src = "https://www.clarity.ms/tag/" + i;
-			y = l.getElementsByTagName(r)[0];
-			y.parentNode.insertBefore(t, y);
-		})(window, document, "clarity", "script", clarityId);
+		// Clarity (仅在启用时加载)
+		if (clarityEnable && clarityId) {
+			(function (c, l, a, r, i, t, y) {
+				c[a] =
+					c[a] ||
+					function () {
+						(c[a].q = c[a].q || []).push(arguments);
+					};
+				t = l.createElement(r);
+				t.async = 1;
+				t.src = "https://www.clarity.ms/tag/" + i;
+				y = l.getElementsByTagName(r)[0];
+				y.parentNode.insertBefore(t, y);
+			})(window, document, "clarity", "script", clarityId);
+		}
 	}
 
 	// 在浏览器空闲时加载，或者在 3 秒后加载
diff --git a/src/types/config.ts b/src/types/config.ts
@@ -193,6 +193,7 @@ export interface SiteConfig {
 	favicon: Favicon[];
 	showLastModified: boolean; // 控制"上次编辑"卡片显示的开关
 	pageProgressBar?: PageProgressBarConfig; // 页面顶部进度条配置
+	thirdPartyAnalytics?: ThirdPartyAnalyticsConfig; // 第三方统计配置
 }
 
 export interface Favicon {
@@ -513,3 +514,11 @@ export interface PageProgressBarConfig {
 	height?: number; // 进度条高度，默认 3px
 	duration?: number; // 动画时长，默认 8000ms
 }
+
+/**
+ * 第三方统计配置（可能影响 Lighthouse 评分）
+ */
+export interface ThirdPartyAnalyticsConfig {
+	enable: boolean; // 是否启用第三方统计（Microsoft Clarity），默认关闭
+	clarityId?: string; // Clarity 项目 ID
+}

Original file line number	Diff line number	Diff line change
`@@ -161,7 +161,7 @@ if (siteConfig.font) {`
`161`	`161`	`>`
`162`	`162`	`<head>`
`163`	`163`	`<!-- 第三方分析脚本 -->`
`164`		`- <AnalyticsScripts />`
	`164`	`+ <AnalyticsScripts thirdPartyAnalytics={siteConfig.thirdPartyAnalytics} />`
`165`	`165`
`166`	`166`	`<!-- SEO Meta Tags, Open Graph, Twitter Card, Favicons, Theme Init -->`
`167`	`167`	`<HeadTags`