From 7abba95b71ec29907643ebf4e55997258b43ecb1 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sun, 20 Jul 2025 23:52:53 +0800
Subject: perf: giscus count loading no longer blocks rendering

Former-commit-id: ae5bb89b773c23821a656fec6c627c90874c0c3e
---
 layouts/_partials/posts/action-menu.html | 148 ++++++++++++++-----------------
 1 file changed, 67 insertions(+), 81 deletions(-)

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index 1a7c0c56..c1d4cd55 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -54,128 +54,114 @@
 }
 </style>
 
-<script>
-// 评论展开/收起功能
-document.addEventListener('DOMContentLoaded', function() {
+<script defer>
+// 初始化所有功能
+function initializeFeatures() {
+  const pageId = "{{ .File.UniqueID | urlize }}";
+  if (!pageId) return;
+
+  // 评论展开/收起功能
+  initializeComments();
+  // 点赞功能
+  initializeLikes(pageId);
+  // 评论数量获取
+  initializeCommentCount();
+}
+
+// 评论展开/收起功能初始化
+function initializeComments() {
   const commentsToggle = document.getElementById('comments-toggle');
   const commentsSection = document.getElementById('comments-section');
 
   if (commentsToggle && commentsSection) {
     commentsToggle.addEventListener('click', function() {
-      if (commentsSection.style.display === 'none') {
-        commentsSection.style.display = 'block';
-        this.style.background = 'rgba(0, 0, 0, 0.1)';
-      } else {
-        commentsSection.style.display = 'none';
-        this.style.background = 'transparent';
-      }
+      const isHidden = commentsSection.style.display === 'none';
+      commentsSection.style.display = isHidden ? 'block' : 'none';
+      this.style.background = isHidden ? 'rgba(0, 0, 0, 0.1)' : 'transparent';
     });
   }
-});
+}
 
-// 获取 Giscus 评论数量
-function fetchGiscusCommentCount() {
+// 评论数量功能初始化
+function initializeCommentCount() {
   const commentCountEl = document.getElementById('comment-count');
   if (!commentCountEl) return;
 
-  // 设置初始值
   commentCountEl.textContent = '0';
 
-  // 监听 Giscus 的消息事件
   window.addEventListener('message', function(event) {
     if (event.origin !== 'https://giscus.app') return;
 
     const giscusData = event.data;
-
-    // 检查是否为 IMetadataMessage - 数据结构是 {giscus: {discussion: {...}}}
-    if (giscusData.giscus && giscusData.giscus.discussion) {
+    if (giscusData.giscus?.discussion) {
       const discussion = giscusData.giscus.discussion;
-
-      // 计算总评论数：主评论数 + 回复数
       const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
       commentCountEl.textContent = totalComments.toString();
     }
   });
 }
 
-// 点赞功能
-(function() {
-  const pageId = "{{ .File.UniqueID | urlize }}";
-  if (!pageId) {
-    return;
-  }
-
-  const countEl = document.getElementById("like-count-" + pageId);
-  const btnEl = document.getElementById("like-btn-" + pageId);
-  const containerEl = document.getElementById("like-container-" + pageId);
-
-  if (!countEl || !btnEl || !containerEl) {
-    return;
-  }
+// 点赞功能初始化
+function initializeLikes(pageId) {
+  const elements = {
+    count: document.getElementById("like-count-" + pageId),
+    btn: document.getElementById("like-btn-" + pageId),
+    container: document.getElementById("like-container-" + pageId),
+    icon: document.getElementById("like-icon-" + pageId)
+  };
 
-  const likeIconEl = document.getElementById("like-icon-" + pageId);
+  if (!elements.count || !elements.btn || !elements.container) return;
 
   function updateTooltip() {
-    if (containerEl.classList.contains('liked')) {
-      btnEl.setAttribute('title', btnEl.getAttribute('data-liked-title'));
-    } else {
-      btnEl.setAttribute('title', '为这篇文章献上心脏');
-    }
+    elements.btn.setAttribute('title',
+      elements.container.classList.contains('liked')
+        ? elements.btn.getAttribute('data-liked-title')
+        : '为这篇文章献上心脏'
+    );
   }
 
   function setLikedState() {
-    if (likeIconEl) {
-      likeIconEl.classList.add('liked-heart', 'heartbeat');
-    }
-    if (countEl) {
-      countEl.classList.add('liked-count');
-    }
-    btnEl.disabled = true;
-    containerEl.classList.add('liked');
+    elements.icon?.classList.add('liked-heart', 'heartbeat');
+    elements.count?.classList.add('liked-count');
+    elements.btn.disabled = true;
+    elements.container.classList.add('liked');
     updateTooltip();
   }
 
-  function fetchLikes() {
-    fetch("https://like.guhub.cn/like/" + pageId)
-      .then(resp => resp.json())
-      .then(data => {
-        countEl.innerText = data.likes ?? 0;
-        if (localStorage.getItem("liked_" + pageId)) {
-          setLikedState();
-        }
-      })
-      .catch(() => {
-        countEl.innerText = "❌";
-      });
+  async function fetchLikes() {
+    try {
+      const response = await fetch("https://like.guhub.cn/like/" + pageId);
+      const data = await response.json();
+      elements.count.innerText = data.likes ?? 0;
+      if (localStorage.getItem("liked_" + pageId)) {
+        setLikedState();
+      }
+    } catch {
+      elements.count.innerText = "❌";
+    }
   }
 
-  window.sendLike = function(pageId) {
+  window.sendLike = async function(pageId) {
     if (localStorage.getItem("liked_" + pageId)) return;
 
-    if (window.location.hostname !== 'localhost') {
-      if (typeof umami !== 'undefined') {
-        umami.track('👍 Hit Like Button');
-      }
+    if (window.location.hostname !== 'localhost' && typeof umami !== 'undefined') {
+      umami.track('👍 Hit Like Button');
     }
 
-    fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" })
-      .then(resp => resp.json())
-      .then(data => {
-        localStorage.setItem("liked_" + pageId, "1");
-        countEl.innerText = data.likes ?? 1;
-        setLikedState();
-      })
-      .catch(() => {
-        alert("点赞失败，请稍后再试");
-      });
+    try {
+      const response = await fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" });
+      const data = await response.json();
+      localStorage.setItem("liked_" + pageId, "1");
+      elements.count.innerText = data.likes ?? 1;
+      setLikedState();
+    } catch {
+      alert("点赞失败，请稍后再试");
+    }
   };
 
-  // 初始化
   fetchLikes();
-})();
+}
 
-// 初始化评论数量获取
-document.addEventListener('DOMContentLoaded', function() {
-  fetchGiscusCommentCount();
-});
+// 在 DOM 加载完成后初始化所有功能
+document.addEventListener('DOMContentLoaded', initializeFeatures);
 </script>
-- 
cgit v1.2.3