From ea845e50495d79f48315c281186a51aa486ae263 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sat, 2 Aug 2025 09:27:40 +0800
Subject: perf: refactor render-blocking action-menu logic

- put initialization script at the end of the page
- delay initialization furthermore
- delay comment count fetch after giscus iframe is loaded
---
 layouts/_partials/scripts/action-menu-js.html | 125 ++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 layouts/_partials/scripts/action-menu-js.html

(limited to 'layouts/_partials/scripts')

diff --git a/layouts/_partials/scripts/action-menu-js.html b/layouts/_partials/scripts/action-menu-js.html
new file mode 100644
index 00000000..66673b71
--- /dev/null
+++ b/layouts/_partials/scripts/action-menu-js.html
@@ -0,0 +1,125 @@
+{{ $pageId := . }}
+<script defer>
+// 初始化所有功能
+function initializeFeatures() {
+  const pageId = "{{ $pageId }}";
+  console.log(pageId)
+  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() {
+      const isHidden = commentsSection.style.display === 'none';
+      commentsSection.style.display = isHidden ? 'block' : 'none';
+      this.style.background = isHidden ? 'rgba(0, 0, 0, 0.1)' : 'transparent';
+    });
+  }
+}
+
+// 评论数量功能初始化
+function initializeCommentCount() {
+  const commentCountEl = document.getElementById('comment-count');
+  const giscusIframe = document.querySelector('iframe.giscus-frame');
+  if (!commentCountEl || !giscusIframe) return;
+
+  commentCountEl.textContent = '0';
+
+  giscusIframe.addEventListener('load', () => {
+    window.addEventListener('message', function(event) {
+      if (event.origin !== 'https://giscus.app') return;
+
+      const giscusData = event.data;
+      if (giscusData.giscus?.discussion) {
+        const discussion = giscusData.giscus.discussion;
+        const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
+        commentCountEl.textContent = totalComments.toString();
+      }
+    });
+  });
+}
+
+// 点赞功能初始化
+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)
+  };
+
+  if (!elements.count || !elements.btn || !elements.container) return;
+
+  function updateTooltip() {
+    elements.btn.setAttribute('title',
+      elements.container.classList.contains('liked')
+        ? elements.btn.getAttribute('data-liked-title')
+        : '为这篇文章献上心脏'
+    );
+  }
+
+  function setLikedState() {
+    elements.icon?.classList.add('liked-heart');
+    elements.icon?.classList.add('animate-heart-beat');
+    elements.count?.classList.add('liked-count');
+    elements.btn.disabled = true;
+    elements.container.classList.add('liked');
+    updateTooltip();
+  }
+
+  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(e) {
+      console.log(e);
+      elements.count.innerText = "❌";
+    }
+  }
+
+  window.sendLike = async function(pageId) {
+    if (localStorage.getItem("liked_" + pageId)) return;
+
+    if (window.location.hostname !== 'localhost' && typeof umami !== 'undefined') {
+      umami.track('👍 Hit Like Button');
+    }
+
+    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(e) {
+      console.log(e);
+      alert("点赞失败，请稍后再试");
+    }
+  };
+
+  fetchLikes();
+}
+
+// 在 DOM 加载完成后初始化所有功能
+document.addEventListener('DOMContentLoaded', () => {
+  if ('requestIdleCallback' in window) {
+    requestIdleCallback(initializeFeatures);
+  } else {
+    setTimeout(initializeFeatures, 300);
+  }
+});
+</script>
-- 
cgit v1.2.3