feat: comment toggle animation

1 files changed, 59 insertions, 58 deletions

diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index af0def7e..6e178e5e 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -1,66 +1,67 @@
-<div class="post-comments">
-    {{ with .Params.comments }}
-    <!-- Static Comments -->
-    <div class="my-8">
-        <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
-        {{ range . }}
-            <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1">
-                <div class="mb-4 flex justify-between">
-                    <span class="font-bold">{{ .name }}</span>
-                    <span class="text-secondary">{{ .date }}</span>
-                </div>
-                <div>
-                    {{ .content | safeHTML }}
-                </div>
-                <div class="text-4 text-right text-secondary">
-                    {{ with .source }}
-                    <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
-                    {{ end }}
-                </div>
+{{ with .Params.comments }}
+<!-- Static Comments -->
+<div class="my-8">
+    <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
+    {{ range . }}
+        <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1">
+            <div class="mb-4 flex justify-between">
+                <span class="font-bold">{{ .name }}</span>
+                <span class="text-secondary">{{ .date }}</span>
             </div>
-        {{ end }}
-    </div>
+            <div>
+                {{ .content | safeHTML }}
+            </div>
+            <div class="text-4 text-right text-secondary">
+                {{ with .source }}
+                <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
+                {{ end }}
+            </div>
+        </div>
     {{ end }}
+</div>
+{{ end }}
+
+<!-- email info -->
+<p class="text-size-sm text-secondary">
+    *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a>
+</p>
 
-    <p class="mt-4 text-size-sm text-secondary">
-        *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a>
+<!-- giscus container -->
+<div class="giscus">
+    <p style="text-align:center">
+        {{ T "postPage.commentNotLoaded" }}
     </p>
-    <div class="giscus mb-4">
-        <p style="text-align:center">
-            {{ T "postPage.commentNotLoaded" }}
-        </p>
-    </div>
+</div>
 
-    <!-- giscus script -->
-    <script>
-    function loadGiscus() {
-      if (document.querySelector('iframe.giscus-frame')) return; // 防止重复加载
+<!-- giscus script -->
+<script>
+function loadGiscus() {
+    if (document.querySelector('iframe.giscus-frame')) return; // 防止重复加载
 
-      const script = document.createElement("script");
-      script.src = "https://giscus.app/client.js";
-      script.setAttribute("data-repo", "{{ .Site.Params.giscus.repo }}");
-      script.setAttribute("data-repo-id", "{{ .Site.Params.giscus.repoId }}");
-      script.setAttribute("data-category", "{{ .Site.Params.giscus.category }}");
-      script.setAttribute("data-category-id", "{{ .Site.Params.giscus.categoryId }}");
-      script.setAttribute("data-mapping", "{{ .Site.Params.giscus.mapping }}");
-      script.setAttribute("data-strict", "{{ .Site.Params.giscus.strict }}");
-      script.setAttribute("data-reactions-enabled", "{{ .Site.Params.giscus.reactionsEnabled }}");
-      script.setAttribute("data-emit-metadata", "1");
-      script.setAttribute("data-input-position", "{{ .Site.Params.giscus.inputPosition }}");
-      script.setAttribute("data-theme", "{{ .Site.Params.giscus.theme }}");
-      script.setAttribute("data-lang", "{{ T "lang" }}");
-      script.setAttribute("crossorigin", "anonymous");
-      script.async = true;
-      document.body.appendChild(script);
-    }
+    const script = document.createElement("script");
+    script.src = "https://giscus.app/client.js";
+    script.setAttribute("data-repo", "{{ .Site.Params.giscus.repo }}");
+    script.setAttribute("data-repo-id", "{{ .Site.Params.giscus.repoId }}");
+    script.setAttribute("data-category", "{{ .Site.Params.giscus.category }}");
+    script.setAttribute("data-category-id", "{{ .Site.Params.giscus.categoryId }}");
+    script.setAttribute("data-mapping", "{{ .Site.Params.giscus.mapping }}");
+    script.setAttribute("data-strict", "{{ .Site.Params.giscus.strict }}");
+    script.setAttribute("data-reactions-enabled", "{{ .Site.Params.giscus.reactionsEnabled }}");
+    script.setAttribute("data-emit-metadata", "1");
+    script.setAttribute("data-input-position", "{{ .Site.Params.giscus.inputPosition }}");
+    script.setAttribute("data-theme", "{{ .Site.Params.giscus.theme }}");
+    script.setAttribute("data-lang", "{{ T "lang" }}");
+    script.setAttribute("crossorigin", "anonymous");
+    script.async = true;
+    document.body.appendChild(script);
+}
 
-    const observer = new IntersectionObserver((entries, obs) => {
-      if (entries[0].isIntersecting) {
-        loadGiscus();
-        obs.disconnect();
-      }
-    });
+const observer = new IntersectionObserver((entries, obs) => {
+    if (entries[0].isIntersecting) {
+    loadGiscus();
+    obs.disconnect();
+    }
+});
 
-    observer.observe(document.getElementById("action-menu"));
-    </script>
-</div>
+observer.observe(document.getElementById("action-menu"));
+</script>