feat(comments): improve comments and add valine config meta

exampleSite/config.toml

@@ -306,10 +306,12 @@ dateFormatToUse = "2006-01-02"
     enable = false
     appId = ""
     appKey = ""
+    placeholder = "Your comment ..."
     notify = false
     verify = true
     avatar = "mp"
-    placeholder = "Your comment ..."
+    #meta= ""
+    pageSize = 10
     visitor = true
     recordIP = true
 

exampleSite/zh/config.toml

@@ -306,10 +306,12 @@ dateFormatToUse = "2006-01-02"
     enable = false
     appId = ""
     appKey = ""
+    placeholder = "你的评论 ..."
     notify = false
     verify = true
     avatar = "mp"
-    placeholder = "你的评论 ..."
+    #meta= ""
+    pageSize = 10
     visitor = true
     recordIP = true
 

layouts/partials/comments.html

@@ -1,25 +1,14 @@
 {{- if eq (getenv "HUGO_ENV") "production" | and .IsPage | and (ne .Params.comment false) -}}
     {{- /* Disqus Comment System */ -}}
-    {{- if .Site.Params.disqus.shortname -}}
+    {{- with .Site.Params.disqus.shortname -}}
         <div id="disqus_thread"></div>
-        <script type="text/javascript">
-            (function() {
-                // Don't ever inject Disqus on localhost--it creates unwanted
-                // discussions from "localhost" on your Disqus account...
-                if (window.location.hostname == "localhost")
-                    return;
-                var dsq = document.createElement("script"); dsq.type = "text/javascript"; dsq.async = true;
-                var disqus_shortname = "{{ .Site.Params.disqus.shortname }}";
-                dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
-                (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(dsq);
-            })();
-        </script>
+        <script src="https://{{ . }}.disqus.com/embed.js"></script>
         <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
     {{- end -}}
 
     {{- /* Gitalk Comment System */ -}}
     {{- if .Site.Params.gitalk.owner -}}
-        <div id="gitalk-container"></div>
+        <div id="gitalk_container"></div>
         {{- if .Site.Params.cdn.gitalk_css -}}
             {{- .Site.Params.cdn.gitalk_css | safeHTML -}}
         {{- else -}}
@@ -32,57 +21,62 @@
             {{- $res := resources.Get "js/lib/gitalk/gitalk.min.js" | resources.Minify -}}
             <script src="{{ $res.RelPermalink }}"></script>
         {{- end -}}
-        <script type="text/javascript">
-            (function () {
-                // Don't ever inject Gitalk on localhost--it creates unwanted
-                // discussions from "localhost" on your Gitalk account...
-                if (window.location.hostname == "localhost")
-                    return;
-                var gitalk = new Gitalk({
-                    id: "{{ .Date }}",
-                    title: "{{ .Title }}",
-                    clientID: "{{ .Site.Params.gitalk.clientId }}",
-                    clientSecret: "{{ .Site.Params.gitalk.clientSecret }}",
-                    repo: "{{ .Site.Params.gitalk.repo }}",
-                    owner: "{{ .Site.Params.gitalk.owner }}",
-                    admin: ["{{ .Site.Params.gitalk.owner }}"],
-                    body: decodeURI(location.href)
-                });
-                gitalk.render("gitalk-container");
-            })();
+        <script>
+            var gitalk = new Gitalk({
+                id: "{{ .Date }}",
+                title: "{{ .Title }}",
+                clientID: "{{ .Site.Params.gitalk.clientId }}",
+                clientSecret: "{{ .Site.Params.gitalk.clientSecret }}",
+                repo: "{{ .Site.Params.gitalk.repo }}",
+                owner: "{{ .Site.Params.gitalk.owner }}",
+                admin: ["{{ .Site.Params.gitalk.owner }}"],
+                body: decodeURI(location.href)
+            });
+            gitalk.render("gitalk_container");
         </script>
         <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by Gitalk.</a></noscript>
     {{- end -}}
 
     {{- /* Valine Comment System */ -}}
     {{- if .Site.Params.valine.enable -}}
-        <div id="vcomments"></div>
+        <div id="valine_container"></div>
         {{- if .Site.Params.cdn.valine_js -}}
             {{- .Site.Params.cdn.valine_js | safeHTML -}}
         {{- else -}}
             {{- $res := resources.Get "js/lib/valine/Valine.min.js" | resources.Minify -}}
             <script src="{{ $res.RelPermalink }}"></script>
         {{- end -}}
-        <script type="text/javascript">
-            (function () {
-                // Don't ever inject Valine on localhost--it creates unwanted
-                // discussions from "localhost" on your Valine account...
-                if (window.location.hostname == "localhost")
-                    return;
-                new Valine({
-                    el: "#vcomments",
-                    appId: "{{ .Site.Params.valine.appId }}",
-                    appKey: "{{ .Site.Params.valine.appKey }}",
-                    meta: ["nick", "mail"],
-                    notify: "{{ .Site.Params.valine.notify }}",
-                    verify: "{{ .Site.Params.valine.verify }}",
-                    avatar: "{{ .Site.Params.valine.avatar }}",
-                    placeholder: "{{ .Site.Params.valine.placeholder }}",
-                    visitor: "{{ .Site.Params.valine.visitor }}",
-                    recordIP: "{{ .Site.Params.valine.recordIP }}",
-                    lang: "{{ T `valineLang` }}",
-                });
-            })();
+        <script>
+            new Valine({
+                el: "#valine_container",
+                appId: "{{ .Site.Params.valine.appId }}",
+                appKey: "{{ .Site.Params.valine.appKey }}",
+                {{- with .Site.Params.valine.placeholder -}}
+                    placeholder: "{{ . }}",
+                {{- end -}}
+                {{- if .Site.Params.valine.notify -}}
+                    notify: true,
+                {{- end -}}
+                {{- if .Site.Params.valine.verify -}}
+                    verify: true,
+                {{- end -}}
+                {{- with .Site.Params.valine.avatar -}}
+                    avatar: "{{ . }}",
+                {{- end -}}
+                {{- with .Site.Params.valine.meta -}}
+                    meta: {{ . | safeJS }},
+                {{- end -}}
+                {{- with .Site.Params.valine.pageSize -}}
+                    pageSize: {{ . | safeJS }},
+                {{- end -}}
+                lang: {{ T "valineLang" }},
+                {{- if .Site.Params.valine.visitor -}}
+                    visitor: true,
+                {{- end -}}
+                {{- if .Site.Params.valine.recordIP -}}
+                    recordIP: true,
+                {{- end -}}
+            });
         </script>
         <noscript>Please enable JavaScript to view the <a href="https://valine.js.org/">comments powered by Valine.</a></noscript>
     {{- end -}}
@@ -90,18 +84,18 @@
     {{- /* Facebook Comment System */ -}}
     {{- if .Site.Params.facebook.enable -}}
         <div id="fb-root"></div>
-        <script
-            async
-            defer
-            crossorigin="anonymous"
-            src="https://connect.facebook.net/{{ .Site.Params.facebook.languageCode }}/sdk.js#xfbml=1&version=v5.0&appId={{ .Site.Params.facebook.appId }}&autoLogAppEvents=1"
-        ></script>
         <div
             class="fb-comments"
             data-href="{{ .Site.Params.baseURL }}{{ .Permalink | absURL }}"
             data-width="{{ .Site.Params.facebook.width }}"
             data-numposts="{{ .Site.Params.facebook.numPosts }}"
         ></div>
+        <script
+            async
+            defer
+            crossorigin="anonymous"
+            src="https://connect.facebook.net/{{ .Site.Params.facebook.languageCode }}/sdk.js#xfbml=1&version=v5.0&appId={{ .Site.Params.facebook.appId }}&autoLogAppEvents=1"
+        ></script>
         <noscript>Please enable JavaScript to view the <a href="https://developers.facebook.com/docs/plugins/comments/">comments powered by Facebook.</a></noscript>
     {{- end -}}
 {{- end -}}