优化 AMP 自动广告插入逻辑，确保在 DOM 加载完成后再插入广告代码

b9348 · b9348 · commit b020f58beb18 · 2025-10-21T03:33:42.000+08:00
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -17,16 +17,21 @@ const config = {
     experimental_faster: true, // 启用所有性能优化，包括 Rspack
   },
   scripts: [
-    { src: 'https://hm.baidu.com/hm.js?de86b38bbc3dec5ed31c4da285286374', async: true }
+    { src: 'https://hm.baidu.com/hm.js?de86b38bbc3dec5ed31c4da285286374', async: true },
+    // Google AdSense 自动广告脚本
+    {
+      src: 'https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js',
+      async: true,
+      'custom-element': 'amp-auto-ads'
+    }
   ],
   headTags: [
-    // Google AdSense AMP 自动广告脚本
+    // Google AdSense 元标签（可选）
     {
-      tagName: 'script',
+      tagName: 'meta',
       attributes: {
-        'custom-element': 'amp-auto-ads',
-        src: 'https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js',
-        async: 'async',
+        name: 'google-adsense-account',
+        content: 'ca-pub-9617969692940509',
       },
     },
   ],
diff --git a/src/theme/Root.js b/src/theme/Root.js
@@ -2,23 +2,41 @@ import React, { useEffect } from 'react';
 
 export default function Root({ children }) {
   useEffect(() => {
-    // 创建 AMP 自动广告元素
-    const ampAutoAds = document.createElement('amp-auto-ads');
-    ampAutoAds.setAttribute('type', 'adsense');
-    ampAutoAds.setAttribute('data-ad-client', 'ca-pub-9617969692940509');
-    
-    // 将广告代码插入到 body 的开头
-    if (document.body && document.body.firstChild) {
-      document.body.insertBefore(ampAutoAds, document.body.firstChild);
-    } else if (document.body) {
-      document.body.appendChild(ampAutoAds);
+    // 等待 DOM 完全加载后再插入广告代码
+    const insertAdsenseCode = () => {
+      // 检查是否已经插入过广告代码
+      if (document.querySelector('amp-auto-ads')) {
+        return;
+      }
+
+      // 创建 AMP 自动广告元素
+      const ampAutoAds = document.createElement('amp-auto-ads');
+      ampAutoAds.setAttribute('type', 'adsense');
+      ampAutoAds.setAttribute('data-ad-client', 'ca-pub-9617969692940509');
+
+      // 将广告代码插入到 body 的开头（紧跟在 <body> 标签后）
+      if (document.body && document.body.firstChild) {
+        document.body.insertBefore(ampAutoAds, document.body.firstChild);
+      } else if (document.body) {
+        document.body.appendChild(ampAutoAds);
+      }
+    };
+
+    // 如果 DOM 已经加载完成，直接插入
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+      insertAdsenseCode();
+    } else {
+      // 否则等待 DOM 加载完成
+      window.addEventListener('DOMContentLoaded', insertAdsenseCode);
     }
 
     // 清理函数
     return () => {
+      const ampAutoAds = document.querySelector('amp-auto-ads');
       if (ampAutoAds && ampAutoAds.parentNode) {
         ampAutoAds.parentNode.removeChild(ampAutoAds);
       }
+      window.removeEventListener('DOMContentLoaded', insertAdsenseCode);
     };
   }, []);
 
