From a73e0b8439763fca242322d228ead3c800504ced Mon Sep 17 00:00:00 2001
From: BigCoke233 <hi@guhub.cn>
Date: Sat, 31 Jan 2026 00:57:07 +0800
Subject: feat: new comment area

---
 layouts/_partials/components/toggle-button.html    |  69 ------------
 layouts/_partials/posts/action-menu.html           |  34 ++++--
 .../posts/action-menu/comment-button.html          |   7 --
 .../posts/action-menu/comment-section.html         |   6 -
 .../_partials/posts/action-menu/info-links.html    |  11 --
 .../posts/action-menu/webmention-button.html       |  13 ---
 .../posts/action-menu/webmention-section.html      | 122 ---------------------
 layouts/_partials/posts/comment.html               |  43 ++++----
 layouts/_partials/posts/webmention-likes.html      |  20 ++++
 layouts/_partials/posts/webmention-mentions.html   |  14 +++
 layouts/_partials/posts/webmention-replies.html    |  23 ++++
 11 files changed, 98 insertions(+), 264 deletions(-)
 delete mode 100644 layouts/_partials/components/toggle-button.html
 delete mode 100644 layouts/_partials/posts/action-menu/comment-button.html
 delete mode 100644 layouts/_partials/posts/action-menu/comment-section.html
 delete mode 100644 layouts/_partials/posts/action-menu/info-links.html
 delete mode 100644 layouts/_partials/posts/action-menu/webmention-button.html
 delete mode 100644 layouts/_partials/posts/action-menu/webmention-section.html
 create mode 100644 layouts/_partials/posts/webmention-likes.html
 create mode 100644 layouts/_partials/posts/webmention-mentions.html
 create mode 100644 layouts/_partials/posts/webmention-replies.html

diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html
deleted file mode 100644
index edc0e930..00000000
--- a/layouts/_partials/components/toggle-button.html
+++ /dev/null
@@ -1,69 +0,0 @@
-{{ $id := .id }}
-{{ $buttonId := default (printf "%s-toggle" $id) .buttonId }}
-{{ $sectionId := default (printf "%s-section" $id) .sectionId }}
-{{ $countId := default (printf "%s-count" $id) .countId }}
-{{ $count := default "0" .count }}
-{{ $group := .group }}
-
-<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
-    id="{{ $buttonId }}" title="{{ .title }}" data-tooltip>
-  <img src="{{ .icon }}" width="20" height="20"
-      alt="{{ .title }}"
-      class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
-  <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70"
-        id="{{ $countId }}">{{ $count }}</span>
-</button>
-
-<script>
-  (function() {
-    document.addEventListener('DOMContentLoaded', () => {
-      const button = document.getElementById("{{ $buttonId }}");
-      const section = document.getElementById("{{ $sectionId }}");
-      const group = "{{ $group }}";
-
-      if (!button || !section) return;
-
-      const entranceAnimation = 'animate-slide-in-down';
-      const exitAnimation = 'animate-slide-out-up';
-
-      const closeSection = () => {
-        if (section.classList.contains('hidden')) return;
-
-        section.classList.remove(entranceAnimation);
-        section.classList.add(exitAnimation);
-        setTimeout(() => {
-          section.classList.add('hidden');
-        }, 200);
-      };
-
-      const openSection = () => {
-        section.classList.remove('hidden', exitAnimation);
-        section.classList.add(entranceAnimation);
-      };
-
-      if (group) {
-        document.addEventListener('toggle-group-open', (e) => {
-          if (e.detail.group === group && e.detail.sourceId !== "{{ $buttonId }}") {
-            closeSection();
-          }
-        });
-      }
-
-      button.addEventListener('click', () => {
-        const isHidden = section.classList.contains('hidden');
-
-        if (isHidden) {
-          if (group) {
-             const event = new CustomEvent('toggle-group-open', {
-                detail: { group: group, sourceId: "{{ $buttonId }}" }
-             });
-             document.dispatchEvent(event);
-          }
-          openSection();
-        } else {
-          closeSection();
-        }
-      });
-    });
-  })();
-</script>
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index ab4c87d5..afab7663 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -1,14 +1,24 @@
+{{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
+{{ $likes := slice }}
+{{ $replies := slice }}
+{{ $mentions := slice }}
+{{ with $webmentions }}
+{{ range . }}
+  {{ if eq .type "like-of" }}
+    {{ $likes = $likes | append . }}
+  {{ else if eq .type "in-reply-to" }}
+    {{ $replies = $replies | append . }}
+  {{ else if eq .type "mention-of" }}
+    {{ $mentions = $mentions | append . }}
+  {{ end }}
+{{ end }}
+{{ end }}
+
 <div id="action-menu" class="my-4 mb-5">
-  <!-- Action Buttons -->
-  <div class="flex justify-between items-center">
-    <div class="flex gap-2">
-        {{ partial "posts/action-menu/comment-button" . }}
-        {{ partial "posts/action-menu/webmention-button" . }}
-    </div>
-    {{ partial "posts/action-menu/info-links" . }}
-  </div>
-  <div>
-      {{ partial "posts/action-menu/comment-section" . }}
-      {{ partial "posts/action-menu/webmention-section" . }}
-  </div>
+    {{ partial "posts/webmention-likes" $likes }}
+    {{ partial "posts/webmention-replies" $replies }}
+    {{ partial "posts/webmention-mentions" $mentions }}
+
+    <!-- kept for legacy pages -->
+    {{ partial "posts/comment" . }}
 </div>
diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html
deleted file mode 100644
index 8ad02ae0..00000000
--- a/layouts/_partials/posts/action-menu/comment-button.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{{ partial "components/toggle-button.html" (dict
-  "id" "comments"
-  "title" (T "actionMenu.comment")
-  "icon" "/img/comments.svg"
-  "countId" "comment-count"
-  "group" "action-menu-section"
-) }}
diff --git a/layouts/_partials/posts/action-menu/comment-section.html b/layouts/_partials/posts/action-menu/comment-section.html
deleted file mode 100644
index d5909597..00000000
--- a/layouts/_partials/posts/action-menu/comment-section.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- Comment Section -->
-<div class="overflow-hidden">
-    <div class="mt-4 hidden animate-duration-200" id="comments-section">
-      {{ partial "posts/comment.html" . }}
-    </div>
-</div>
diff --git a/layouts/_partials/posts/action-menu/info-links.html b/layouts/_partials/posts/action-menu/info-links.html
deleted file mode 100644
index 46042344..00000000
--- a/layouts/_partials/posts/action-menu/info-links.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{{ if eq .Site.Language.Lang "zh" }}
-<div class="flex gap-1">
-  <a href="/sponsor" data-tooltip
-      class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group"
-      title="{{ T "actionMenu.sponsor" }}">
-    <img src="/img/coffee.svg" width="16" height="16"
-        alt="{{ T "actionMenu.sponsor" }}"
-        class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
-  </a>
-</div>
-{{ end }}
diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html
deleted file mode 100644
index aba5891f..00000000
--- a/layouts/_partials/posts/action-menu/webmention-button.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
-{{ $count := 0 }}
-{{ with $webmentions }}
-  {{ $count = len $webmentions }}
-{{ end }}
-{{ partial "components/toggle-button.html" (dict
-  "id" "webmention"
-  "title" (T "actionMenu.webmention")
-  "icon" "/img/mention.svg"
-  "countId" "mention-count"
-  "count" $count
-  "group" "action-menu-section"
-) }}
diff --git a/layouts/_partials/posts/action-menu/webmention-section.html b/layouts/_partials/posts/action-menu/webmention-section.html
deleted file mode 100644
index fa952e9c..00000000
--- a/layouts/_partials/posts/action-menu/webmention-section.html
+++ /dev/null
@@ -1,122 +0,0 @@
-<!-- Comment Section -->
-<div class="overflow-hidden">
-    <div class="mt-4 hidden animate-duration-200" id="webmention-section">
-        <div>
-          {{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
-          {{ $webmentionLikes := slice }}
-          {{ $webmentionReplies := slice }}
-          {{ $webmentionMentions := slice }}
-          {{ with $webmentions }}
-            {{ range . }}
-              {{ if eq .type "like-of" }}
-                {{ $webmentionLikes = $webmentionLikes | append . }}
-              {{ else if eq .type "in-reply-to" }}
-                {{ $webmentionReplies = $webmentionReplies | append . }}
-              {{ else if eq .type "mention-of" }}
-                {{ $webmentionMentions = $webmentionMentions | append . }}
-              {{ end }}
-            {{ end }}
-          {{ end }}
-
-          <!-- likes -->
-          {{ with $webmentionLikes }}
-          <section class="mb-6 flex gap-2 items-center">
-            <div class="flex gap-1 group">
-            {{ range . }}
-            <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}">
-                {{ $value := math.Floor (mul math.Rand 80) }}
-                {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }}
-                <img src="{{ .author.photo }}" alt="Profile Picture"
-                    loading="lazy"
-                    class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" />
-              </a>
-            {{ end }}
-           </div>
-           <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len $webmentionLikes) }}</p>
-          </section>
-          {{ end }}
-
-          <!-- replies -->
-          {{ with $webmentionReplies }}
-          <section>
-          {{ range . }}
-            <div>
-              <div class="flex items-center gap-3">
-                <img src="{{ .author.photo }}" alt="Profile Picture"
-                   class="h-8 w-8 rd-full" loading="lazy" />
-                <div class="text-secondary">
-                  <h4 class="m-0">
-                    <a href="{{ or .url .author.url }}">
-                      {{ .author.name }}
-                    </a>
-                  </h4>
-                  {{ $t := time.AsTime .received }}
-                  <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p>
-                </div>
-              </div>
-              <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div>
-            </div>
-          {{ end }}
-          </section>
-          <hr />
-          {{ end }}
-
-          <!-- Fediverse interaction link -->
-          <section class="text-secondary text-sm">
-            {{ with $.Params.toot }}
-            <a href="{{ . }}" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline">
-              {{ T "webmention.interactOnFediverse" }} →
-            </a>
-            {{ else }}
-            <a href="https://akk.eltr.ac/eltrac" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline">
-              {{ T "webmention.interactOnFediverse" }} →
-            </a>
-            {{ end }}
-          </section>
-
-          <!-- mentions -->
-          {{ with $webmentionMentions }}
-          <section class="markdown-body">
-            <h3>{{ T "webmention.mentionsHeading" . }}</h3>
-          {{ range . }}
-            <ul class="">
-              {{ with .content }}
-                <li class="markdown-body leading-relaxed">{{ .html | safeHTML }}</li>
-              {{ else }}
-                <li><a href="{{ .url }}" target="_blank">{{ .url }}</a></li>
-              {{ end }}
-            </ul>
-          {{ end }}
-          </section>
-          {{ end }}
-
-        </div>
-
-        <div class="bg-blockBg mt-3 py-3 px-5 rd markdown-body">
-            <form
-              id="webmention-form"
-              action="https://webmention.io/www.geedea.pro/webmention"
-              method="POST"
-            >
-              <label for="webmention-form">{{ T "webmention.formDesc" }}</label>
-
-              <input
-                id="webmention-source"
-                type="url"
-                autocomplete="url"
-                required=""
-                pattern="^https?:\/\/(.*)"
-                name="source"
-                placeholder="{{ T "webmention.formPlaceholder" }}"
-                class="error"
-                aria-invalid="true"
-              />
-
-              <input id="webmention-submit" type="submit" name="submit" value="{{ T "webmention.submit" }}" />
-
-              <input id="webmention-format" type="hidden" name="format" value="html" />
-              <input id="webmention-target" type="hidden" name="target" value="{{ .Permalink }}" />
-            </form>
-        </div>
-    </div>
-</div>
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index e4ec9b3e..bcd0b17b 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -1,8 +1,3 @@
-<!-- email info -->
-<p class="text-size-sm text-secondary">
-    *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a>
-</p>
-
 <!--
     Giscus has been abandoned since 2026-01-30,
     old data from GitHub Discussion and some other comment systems
@@ -11,32 +6,32 @@
 -->
 {{ $cutoffDate := time.AsTime "2026-01-30" }}
 {{ if .Params.Date.Before $cutoffDate }}
-
-    <p class="text-size-sm text-secondary">博客的评论区已经被禁用，旧的数据已经导出，如果存在，就会显示在下方。如果你想要讨论此文，可以邮件联系，或者在<a href="{{ with .Params.toot }}{{ . }}{{ else }}https://akk.eltr.ac/eltrac{{ end }}">联邦宇宙上互动</a>。</p>
-
-    <hr />
-
     {{ $giscusData := .Site.Data.giscus }}
     {{ $pageTitle := .Title }}
     {{ range $giscusData }}
         {{ if eq .title $pageTitle }}
+            {{ $url := .url }}
             {{ with .comments.nodes }}
-            <div class="my-8">
-                {{ range . }}
-                    <div class="text-md py-4 px-1">
-                        <div class="mb-4 flex justify-between">
-                            <span class="font-bold">{{ .author.login }}</span>
-                            <span class="text-secondary">{{ .createdAt | time.Format "2006/01/02" }}</span>
+            <details>
+                <summary class="text-size-sm text-secondary cursor-pointer">博客的评论区已经被禁用，旧的数据已经导出，可以点击这行字查看。</summary>
+                <div class="my-4">
+                    {{ range . }}
+                        <div class="text-md py-4 px-1">
+                            <div class="mb-4 flex justify-between">
+                                <span class="font-bold">{{ .author.login }}</span>
+                                <span class="text-secondary">{{ .createdAt | time.Format "2006/01/02" }}</span>
+                            </div>
+                            <div>
+                                {{ .body | markdownify }}
+                            </div>
                         </div>
-                        <div>
-                            {{ .body | markdownify }}
-                        </div>
-                    </div>
+                    {{ end }}
+                </div>
+                {{ with $url }}
+                    <p><a href="{{ . }}" class="small-button" target="_blank">Full GitHub Discussion →</a></p>
                 {{ end }}
-            </div>
-            {{ end }}
-            {{ with .url }}
-                <p><a href="{{ . }}" class="small-button" target="_blank">Full GitHub Discussion →</a></p>
+                <hr />
+            </details>
             {{ end }}
         {{ end }}
     {{ end }}
diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
new file mode 100644
index 00000000..7169a655
--- /dev/null
+++ b/layouts/_partials/posts/webmention-likes.html
@@ -0,0 +1,20 @@
+{{ with . }}
+<section class="mb-6 flex gap-2 items-center">
+  <div class="flex gap-1 group">
+      <a data-tooltip title="互动" class="hover:no-underline cursor-pointer">
+          <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
+      </a>
+    {{ range . }}
+      <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}">
+          {{ $value := math.Floor (mul math.Rand 80) }}
+          {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }}
+          <img src="{{ .author.photo }}" alt="Profile Picture"
+              loading="lazy"
+              class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" />
+        </a>
+    {{ end }}
+ </div>
+ <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len . ) }}</p>
+</section>
+{{ end }}
+
diff --git a/layouts/_partials/posts/webmention-mentions.html b/layouts/_partials/posts/webmention-mentions.html
new file mode 100644
index 00000000..2a133d0b
--- /dev/null
+++ b/layouts/_partials/posts/webmention-mentions.html
@@ -0,0 +1,14 @@
+{{ with . }}
+<section class="markdown-body">
+<h3>{{ T "webmention.mentionsHeading" . }}</h3>
+{{ range . }}
+<ul class="">
+  {{ with .content }}
+    <li class="markdown-body leading-relaxed">{{ .html | safeHTML }}</li>
+  {{ else }}
+    <li><a href="{{ .url }}" target="_blank">{{ .url }}</a></li>
+  {{ end }}
+</ul>
+{{ end }}
+</section>
+{{ end }}
diff --git a/layouts/_partials/posts/webmention-replies.html b/layouts/_partials/posts/webmention-replies.html
new file mode 100644
index 00000000..570a0e4d
--- /dev/null
+++ b/layouts/_partials/posts/webmention-replies.html
@@ -0,0 +1,23 @@
+{{ with . }}
+<section>
+{{ range . }}
+<div>
+  <div class="flex items-center gap-3">
+    <img src="{{ .author.photo }}" alt="Profile Picture"
+       class="h-8 w-8 rd-full" loading="lazy" />
+    <div class="text-secondary">
+      <h4 class="m-0">
+        <a href="{{ or .url .author.url }}">
+          {{ .author.name }}
+        </a>
+      </h4>
+      {{ $t := time.AsTime .received }}
+      <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p>
+    </div>
+  </div>
+  <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div>
+</div>
+{{ end }}
+</section>
+<hr />
+{{ end }}
-- 
cgit v1.2.3