feat: support directly load the comments after pages loaded (#325)

This commit also made some code position adjustments for last commit.

5 files changed, 73 insertions, 58 deletions

diff --git a/assets/js/comments.js b/assets/js/comments.js
index 32e010e..fa44f9e 100644
--- a/assets/js/comments.js
+++ b/assets/js/comments.js
@@ -1,10 +1,14 @@
 window.addEventListener("DOMContentLoaded", event => {
-    const commentsToggle = document.getElementById('load-comments');
+    {{ if .Site.Params.autoLoadComments }}
+        loadComments()
+    {{ else }}
+        const commentsToggle = document.getElementById('load-comments');
 
-    if (commentsToggle !== null) {
-        commentsToggle.addEventListener('click', function () {
-            loadComments();
-            this.style = "display: none";
-        });
-    }
+        if (commentsToggle !== null) {
+            commentsToggle.addEventListener('click', function () {
+                loadComments();
+                this.style = "display: none";
+            });
+        }
+    {{  end }}
 }, {once: true});
diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
index 60a9f21..baf7212 100644
--- a/config-examples/en/config.toml
+++ b/config-examples/en/config.toml
@@ -640,22 +640,8 @@ uglyURLs = false
     #       `comments` in post’s Front Matter
     #       has a higher priority than here
 
-    ## Gitalk
-    enableGitalk = false
-    gitalkClientID = "your_client_id"
-    gitalkClientSecret = "your_client_secret"
-    gitalkRepo = "your_repository"
-    gitalkOwner = "your_gitalk_owner"
-    gitalkAdmin = ["your_gitalk_admin"]
-    gitalkLable = ["Gitalk"]
-    gitalkDistractionFreeMode = false
-    gitalkPerPage = 10
-    gitalkLanguage = "en"
-    gitalkPagerDirection = "last"
-    gitalkCreateIssueManually = false
-    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
-    gitalkEnableHotKey = true
-    # Note: https://github.com/gitalk/gitalk
+    # directly load the comments after pages loaded
+    autoLoadComments = false
 
     ## Disqus
     enableDisqus = false
@@ -691,6 +677,23 @@ uglyURLs = false
     utterancesLabel = ""
     # Note: https://utteranc.es/
 
+    ## Gitalk
+    enableGitalk = false
+    gitalkClientID = "your_client_id"
+    gitalkClientSecret = "your_client_secret"
+    gitalkRepo = "your_repository"
+    gitalkOwner = "your_gitalk_owner"
+    gitalkAdmin = ["your_gitalk_admin"]
+    gitalkLable = ["Gitalk"]
+    gitalkDistractionFreeMode = false
+    gitalkPerPage = 10
+    gitalkLanguage = "en"
+    gitalkPagerDirection = "last"
+    gitalkCreateIssueManually = false
+    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
+    gitalkEnableHotKey = true
+    # Note: https://github.com/gitalk/gitalk
+
 
     ######################################
     # Google Analytics
diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
index ebc5251..e7c7082 100644
--- a/config-examples/zh-cn/config.toml
+++ b/config-examples/zh-cn/config.toml
@@ -588,22 +588,8 @@ uglyURLs = false
     # 说明：文章的 Front Matter 中的 `comments`
     #      的优先级高于此处
 
-    ## Gitalk
-    enableGitalk = false
-    gitalkClientID = "your_client_id"
-    gitalkClientSecret = "your_client_secret"
-    gitalkRepo = "your_repository"
-    gitalkOwner = "your_gitalk_owner"
-    gitalkAdmin = ["your_gitalk_admin"]
-    gitalkLable = ["Gitalk"]
-    gitalkDistractionFreeMode = false
-    gitalkPerPage = 10
-    gitalkLanguage = "en"
-    gitalkPagerDirection = "last"
-    gitalkCreateIssueManually = false
-    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
-    gitalkEnableHotKey = true
-    # 说明：https://github.com/gitalk/gitalk
+    # 直接加载评论，不需要手动点击按钮加载
+    autoLoadComments = false
 
     ## Disqus
     enableDisqus = false
@@ -639,6 +625,23 @@ uglyURLs = false
     utterancesLabel = ""
     # 说明：https://utteranc.es/
 
+    ## Gitalk
+    enableGitalk = false
+    gitalkClientID = "your_client_id"
+    gitalkClientSecret = "your_client_secret"
+    gitalkRepo = "your_repository"
+    gitalkOwner = "your_gitalk_owner"
+    gitalkAdmin = ["your_gitalk_admin"]
+    gitalkLable = ["Gitalk"]
+    gitalkDistractionFreeMode = false
+    gitalkPerPage = 10
+    gitalkLanguage = "en"
+    gitalkPagerDirection = "last"
+    gitalkCreateIssueManually = false
+    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
+    gitalkEnableHotKey = true
+    # 说明：https://github.com/gitalk/gitalk
+
 
     ######################################
     # Google Analytics
diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml
index f5ce2fe..3651d89 100644
--- a/config-examples/zh-tw/config.toml
+++ b/config-examples/zh-tw/config.toml
@@ -588,22 +588,8 @@ uglyURLs = false
     # 說明：文章的 Front Matter 中的 `comments`
     #      的優先順序高於此處
 
-    ## Gitalk
-    enableGitalk = false
-    gitalkClientID = "your_client_id"
-    gitalkClientSecret = "your_client_secret"
-    gitalkRepo = "your_repository"
-    gitalkOwner = "your_gitalk_owner"
-    gitalkAdmin = ["your_gitalk_admin"]
-    gitalkLable = ["Gitalk"]
-    gitalkDistractionFreeMode = false
-    gitalkPerPage = 10
-    gitalkLanguage = "en"
-    gitalkPagerDirection = "last"
-    gitalkCreateIssueManually = false
-    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
-    gitalkEnableHotKey = true
-    # 說明：https://github.com/gitalk/gitalk
+    # 直接加載評論，不需要手動點擊按鈕加載
+    autoLoadComments = false
 
     ## Disqus
     enableDisqus = false
@@ -639,6 +625,23 @@ uglyURLs = false
     utterancesLabel = ""
     # 說明：https://utteranc.es/
 
+    ## Gitalk
+    enableGitalk = false
+    gitalkClientID = "your_client_id"
+    gitalkClientSecret = "your_client_secret"
+    gitalkRepo = "your_repository"
+    gitalkOwner = "your_gitalk_owner"
+    gitalkAdmin = ["your_gitalk_admin"]
+    gitalkLable = ["Gitalk"]
+    gitalkDistractionFreeMode = false
+    gitalkPerPage = 10
+    gitalkLanguage = "en"
+    gitalkPagerDirection = "last"
+    gitalkCreateIssueManually = false
+    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
+    gitalkEnableHotKey = true
+    # 說明：https://github.com/gitalk/gitalk
+
 
     ######################################
     # Google Analytics
diff --git a/layouts/partials/components/comments.html b/layouts/partials/components/comments.html
index c074df2..08e9a69 100644
--- a/layouts/partials/components/comments.html
+++ b/layouts/partials/components/comments.html
@@ -1,9 +1,11 @@
 {{ if and (.Params.comments | default .Site.Params.enableComments) (eq hugo.Environment "production") }}
     {{ if or (in .Site.Params.mainSections .Section) .Params.comments }}
 
-        <div class="load-comments">
-            <div id="load-comments">{{ i18n "loadComments" }}</div>
-        </div>
+        {{ if not .Site.Params.autoLoadComments }}
+            <div class="load-comments">
+                <div id="load-comments">{{ i18n "loadComments" }}</div>
+            </div>
+        {{  end }}
 
         {{ if .Site.Params.enableDisqus }}
             <div id="disqus_thread"></div>