fix: prevent memory leak

Author: D-Sketon

README.en.md

@@ -56,7 +56,7 @@ A combination of [landscape](https://github.com/hexojs/hexo-theme-landscape)、[
   - Gitalk
   - Giscus
   - Disqus
-  - utterances
+  - Utterances
 
 ### Statistics & Analytics
 - 📊 Article reading statistics (Valine / Waline)

README.md

@@ -57,7 +57,7 @@
   - Gitalk
   - Giscus
   - Disqus
-  - utterances
+  - Utterances
 
 ### 统计与分析
 

_config.yml

@@ -393,13 +393,14 @@ giscus:
   # commentTheme: light # deprecated, because the theme is set by the theme itself
   # lang: zh-CN # deprecated, use html.lang instead
 
-# https://disqus.com
+# https://utteranc.es
 utterances:
   enable: false
   repo: owner/repo # Change this to "Your GitHub Username/The Repository Name" used for storing blog comments
   issue_term: title
   theme: auto # auto means to automatically adapt to dark and light themes, you can also use specific themes like github-light, github-dark, preferred-color-scheme, etc.
 
+# https://disqus.com
 disqus:
   enable: false
   shortname: # your disqus shortname

layout/_partial/post/comment.ejs

@@ -183,43 +183,51 @@
     },
     <%_ } _%>
     <%_ if (commentSystems.utterances) { _%>
-  utterances: {
-    enable: <%= commentSystems.utterances %>,
-    load: () => {
-      const container = document.querySelector('.utterances-comment'); 
-      if (!container) return;
-      container.style.display = 'block';
-
-      let theme = '<%= theme.utterances.theme || "github-light" %>';
-      const parsedTheme = theme === 'auto' ? (document.documentElement.getAttribute('data-theme') === 'dark' ? 'github-dark' : 'github-light') : theme;
-
-      // 创建 utterances 脚本
-      const script = document.createElement('script');
-      script.src = 'https://utteranc.es/client.js';
-      script.setAttribute('repo', '<%= theme.utterances.repo %>');
-      script.setAttribute('issue-term', '<%= theme.utterances.issue_term || "pathname" %>');
-      script.setAttribute('theme', parsedTheme);
-      script.setAttribute('crossorigin', 'anonymous');
-      script.async = true;
-
-      // 清空容器（防止重复加载）并插入脚本
-      container.innerHTML = '';
-      container.appendChild(script);
-      if (theme === 'auto') {
-        document.body.addEventListener('light-theme-set', () => {
-          const iframe = container.querySelector('iframe.utterances-frame');
-          if (!iframe) return;
-          iframe.contentWindow.postMessage({ type: 'set-theme', theme: 'github-light' }, 'https://utteranc.es');
-        });
-        document.body.addEventListener('dark-theme-set', () => {
-          const iframe = container.querySelector('iframe.utterances-frame');
-          if (!iframe) return;
-          iframe.contentWindow.postMessage({ type: 'set-theme', theme: 'github-dark' }, 'https://utteranc.es');
-        });
+    utterances: {
+      enable: <%= commentSystems.utterances %>,
+      load: () => {
+        const container = document.querySelector('.utterances-comment'); 
+        if (!container) return;
+        container.style.display = 'block';
+
+        let theme = '<%= theme.utterances.theme || "github-light" %>';
+        const parsedTheme = theme === 'auto' ? (document.documentElement.getAttribute('data-theme') === 'dark' ? 'github-dark' : 'github-light') : theme;
+
+        // 创建 utterances 脚本
+        const script = document.createElement('script');
+        script.src = 'https://utteranc.es/client.js';
+        script.setAttribute('repo', '<%= theme.utterances.repo %>');
+        script.setAttribute('issue-term', '<%= theme.utterances.issue_term || "pathname" %>');
+        script.setAttribute('theme', parsedTheme);
+        script.setAttribute('crossorigin', 'anonymous');
+        script.async = true;
+
+        // 清空容器（防止重复加载）并插入脚本
+        container.innerHTML = '';
+        container.appendChild(script);
+        if (theme === 'auto') {
+          const lightThemeHandler = () => {
+            const iframe = container.querySelector('iframe.utterances-frame');
+            if (!iframe || !iframe.contentWindow) {
+              document.body.removeEventListener('light-theme-set', lightThemeHandler);
+              return;
+            }
+            iframe.contentWindow.postMessage({ type: 'set-theme', theme: 'github-light' }, 'https://utteranc.es');
+          }
+          const darkThemeHandler = () => {
+            const iframe = container.querySelector('iframe.utterances-frame');
+            if (!iframe || !iframe.contentWindow) {
+              document.body.removeEventListener('dark-theme-set', darkThemeHandler);
+              return;
+            }
+            iframe.contentWindow.postMessage({ type: 'set-theme', theme: 'github-dark' }, 'https://utteranc.es');
+          }
+          document.body.addEventListener('light-theme-set', lightThemeHandler);
+          document.body.addEventListener('dark-theme-set', darkThemeHandler);
+        }
       }
-    }
-  },
-  <%_ } _%>
+    },
+    <%_ } _%>
     <%_ if (commentSystems.giscus) { _%>
     giscus: {
       enable: <%= commentSystems.giscus %>,
@@ -259,16 +267,24 @@
         giscusScript.setAttribute('crossorigin', 'anonymous');
         giscusScript.async = true;
         container.appendChild(giscusScript);
-        document.body.addEventListener('light-theme-set', () => {
+        const lightThemeHandler = () => {
           const iframe = document.querySelector('iframe.giscus-frame');
-          if (!iframe) return;
+          if (!iframe || !iframe.contentWindow) {
+            document.body.removeEventListener('light-theme-set', lightThemeHandler);
+            return;
+          }
           iframe.contentWindow.postMessage({ giscus: { setConfig: { theme: 'light' } } }, 'https://giscus.app');
-        });
-        document.body.addEventListener('dark-theme-set', () => {
+        };
+        const darkThemeHandler = () => {
           const iframe = document.querySelector('iframe.giscus-frame');
-          if (!iframe) return;
+          if (!iframe || !iframe.contentWindow) {
+            document.body.removeEventListener('dark-theme-set', darkThemeHandler);
+            return;
+          }
           iframe.contentWindow.postMessage({ giscus: { setConfig: { theme: 'dark' } } }, 'https://giscus.app');
-        });
+        };
+        document.body.addEventListener('light-theme-set', lightThemeHandler);
+        document.body.addEventListener('dark-theme-set', darkThemeHandler);
       }
     },
     <%_ } _%>