New comment area & opt out of font awesome

1 files changed, 26 insertions, 11 deletions

diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html
index ac1e723..f6766d5 100644
--- a/layouts/partials/comment-utterances.html
+++ b/layouts/partials/comment-utterances.html
@@ -1,11 +1,26 @@
-{{ with .Site.Params.utterancesRepo }}
-<div class="post-loading">
-    <i class="far fa-circle-notch fa-spin"></i>
-    <p>{{ i18n "postCommentLoading" }}</p>
-</div>
-<div class="post-comment">
-    <script src="https://utteranc.es/client.js" repo="{{ . }}" issue-term="{{ $.Site.Params.utterancesIssueTerm }}"
-            theme="{{ if eq $.Site.Params.toggleMode "dark" }}photon-dark{{ else }}github-light{{ end }}"
-            crossorigin="anonymous" async></script>
-</div>
-{{ end }}
\ No newline at end of file
+<div class="post-comment" data-comment="utterances">
+    <span class="post-comment-notloaded">
+        <ion-icon name="chatbox-ellipses"></ion-icon>&nbsp;查看评论
+    </span>
+    <script>
+        function loadComment() {
+            var commentArea = document.querySelector('.post-comment');
+            var utterancesTheme = document.body.getAttribute('data-theme');
+            if (utterancesTheme === 'auto') {
+                utterancesTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'photon-dark' :
+                    'github-light';
+            } else {
+                utterancesTheme = utterancesTheme === 'dark' ? 'photon-dark' : 'github-light';
+            }
+            var s = document.createElement('script');
+            s.src = 'https://utteranc.es/client.js';
+            s.setAttribute('repo', '{{ .Site.Params.utterancesRepo }}');
+            s.setAttribute('issue-term', '{{ .Site.Params.utterancesIssueTerm }}');
+            s.setAttribute('theme', utterancesTheme);
+            s.setAttribute('crossorigin', 'anonymous');
+            s.setAttribute('async', '');
+            document.querySelector('.post-comment').appendChild(s);
+            document.querySelector('span.post-comment-notloaded').setAttribute('style', 'display: none;');
+        }
+    </script>
+</div>
\ No newline at end of file