New comment area & opt out of font awesome

7 files changed, 73 insertions, 34 deletions

diff --git a/layouts/partials/comment-disqus.html b/layouts/partials/comment-disqus.html
index 75b3f4c..909c0ed 100644
--- a/layouts/partials/comment-disqus.html
+++ b/layouts/partials/comment-disqus.html
@@ -1,18 +1,21 @@
-{{ with .Site.Params.disqusShortname }}
-<div class="post-comment">
-    <div id="disqus_thread"></div>
+<div class="post-comment" data-comment="disqus">
+    <span class="post-comment-notloaded">
+        <ion-icon name="chatbox-ellipses"></ion-icon>&nbsp;查看评论
+    </span>
+    <div id="disqus_thread" style="display: none;"></div>
     <script>
-        var disqus_config = function () {
-            this.page.url = {{ $.Permalink }};
-            this.page.identifier = {{ $.File.ContentBaseName }};
-        };
-        (function () {
-            var d = document,
-                s = d.createElement('script');
-            s.src = 'https://' + {{ . }} + '.disqus.com/embed.js';
+        function loadComment() {
+            var commentArea = document.querySelector('.post-comment');
+            var disqus_config = function () {
+                this.page.url = '{{ .Permalink }}';
+                this.page.identifier = '{{ .File.ContentBaseName }}';
+            };
+            var s = document.createElement('script');
+            s.src = 'https://' + '{{ .Site.Params.disqusShortname }}' + '.disqus.com/embed.js';
             s.setAttribute('data-timestamp', +new Date());
-            (d.head || d.body).appendChild(s);
-        })();
+            document.querySelector('#disqus_thread').removeAttribute('style');
+            (document.body || document.head).appendChild(s);
+            document.querySelector('span.post-comment-notloaded').setAttribute('style', 'display: none;');
+        }
     </script>
-</div>
-{{ end }}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/layouts/partials/comment-disqusjs.html b/layouts/partials/comment-disqusjs.html
new file mode 100644
index 0000000..5414aef
--- /dev/null
+++ b/layouts/partials/comment-disqusjs.html
@@ -0,0 +1,24 @@
+<div class="post-comment" data-comment="disqus">
+    <span class="post-comment-notloaded">
+        <ion-icon name="chatbox-ellipses"></ion-icon>&nbsp;查看评论
+    </span>
+    <div id="disqus_thread" style="display: none;"></div>
+    <script src="https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js"></script>
+    <script>
+        function loadComment() {
+            document.querySelector('#disqus_thread').removeAttribute('style');
+            var dsqjs = new DisqusJS({
+                shortname: '{{ .Site.Params.disqusShortname }}',
+                siteName: '{{ .Site.Title }}',
+                identifier: '{{ .File.ContentBaseName }}',
+                url: '{{ .Permalink }}',
+                title: '{{ .Title }}',
+                api: '{{ .Site.Params.disqusJSApi }}',
+                apikey: '{{ .Site.Params.disqusJSApikey }}',
+                admin: '{{ .Site.Params.disqusJSAdmin }}',
+                adminLabel: '{{ .Site.Params.disqusJSAdminlabel }}'
+            });
+            document.querySelector('span.post-comment-notloaded').setAttribute('style', 'display: none;');
+        }
+    </script>
+</div>
\ No newline at end of file
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
diff --git a/layouts/partials/components.html b/layouts/partials/components.html
index 0fb4f6a..58f9c29 100644
--- a/layouts/partials/components.html
+++ b/layouts/partials/components.html
@@ -1,8 +1,8 @@
 <div class="btn">
     <div class="btn-toggle-mode">
-        <i class="far fa-adjust"></i>
+        <ion-icon name="contrast"></ion-icon>
     </div>
     <div class="btn-scroll-top">
-        <i class="far fa-chevron-up"></i>
+        <ion-icon name="chevron-up"></ion-icon>
     </div>
 </div>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 9ce9479..289c067 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -38,7 +38,6 @@
 {{ else }}
 <link rel="stylesheet" href="{{ "/assets/css/fuji.min.css" | relURL }}" />
 {{ end }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.5/font-awesome/fontawesome.min.css" />
 {{ if .Params.playerURL }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" />
 {{ end }}
diff --git a/layouts/partials/post-meta.html b/layouts/partials/post-meta.html
index 7d686ce..5176053 100644
--- a/layouts/partials/post-meta.html
+++ b/layouts/partials/post-meta.html
@@ -1,5 +1 @@
-<time><i class="far fa-calendar-day"></i>
-{{ .Date.Format "2006-01-02" }}</time>{{ if .Site.Params.showWordCounter }}<span><i class="far fa-archive"></i>
-{{ .WordCount }}{{ i18n "postMetaWordCount" }}</span>{{ end }}{{ if .Site.Params.showReadTime }}<span><i class="far fa-clock"></i>
-{{ .ReadingTime }}{{ i18n "postMetaReadingTime" }}</span>{{ end }}<span><i class="far fa-tag"></i>
-{{ if .Params.tags }}{{ range .Params.tags }}<a href="{{ "/tags/" | relURL }}{{ . | urlize}}">{{ . }}</a> {{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }}</span>
\ No newline at end of file
+<span><ion-icon name="today"></ion-icon></ion-icon>&nbsp;{{ .Date.Format "2006-01-02" }}</span>{{ if .Site.Params.showWordCounter }}<span><ion-icon name="file-tray"></ion-icon>&nbsp;{{ .WordCount }}{{ i18n "postMetaWordCount" }}</span>{{ end }}{{ if .Site.Params.showReadTime }}<span><ion-icon name="stopwatch"></ion-icon>&nbsp;{{ .ReadingTime }}{{ i18n "postMetaReadingTime" }}</span>{{ end }}<span><ion-icon name="pricetags"></ion-icon>&nbsp;{{ if .Params.tags }}{{ range .Params.tags }}<a href="{{ "/tags/" | relURL }}{{ . | urlize}}">{{ . }}</a>&nbsp;{{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }}</span>
\ No newline at end of file
diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html
index d992095..fee6e18 100644
--- a/layouts/partials/scripts-end.html
+++ b/layouts/partials/scripts-end.html
@@ -1,5 +1,7 @@
 <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule="" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.js"></script>
 {{ if .Site.Params.mainAssetsCDN }}
 <script src="https://cdn.jsdelivr.net/gh/amzrk2/hugo-theme-fuji@2.0/dist/fuji.min.js"></script>
 {{ else }}