更新评论模块

themes/blog/article.html

@@ -47,9 +47,5 @@
     document.getElementById('article').innerHTML = marked({{  .Data.Body }});
 </script>
 <script src="/public/js/prism.js"></script>
-{{if ne .Config.UtterancesRepo ""}}
-<script src="https://utteranc.es/client.js" repo="{{ .Config.UtterancesRepo }}" issue-term="[{{ .Data.Title }}]"
-    theme="github-light" crossorigin="anonymous" async>
-    </script>
-{{end}}
+{{template "reviews" .}}
 {{template "footer" .}}

themes/blog/layouts/reviews.html

@@ -0,0 +1,26 @@
+{{define "reviews"}}
+{{if ne .Config.UtterancesRepo ""}}
+<script src="https://utteranc.es/client.js" repo="{{ .Config.UtterancesRepo }}" issue-term="[{{ .Data.Title }}]"
+        theme="github-light" crossorigin="anonymous" async>
+</script>
+{{end}}
+
+{{if ne .Config.Gitalk_Repo ""}}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
+<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
+<div id="gitalk-container"></div>
+<script>
+    var gitalk = new Gitalk({
+        title: "{{ .Data.Title }}",
+        clientID: "{{ .Config.Gitalk_ClientID }}",
+        clientSecret: "{{ .Config.Gitalk_ClientSecret }}",
+        repo: "{{ .Config.Gitalk_Repo }}",
+        owner: "{{ .Config.Gitalk_Owner }}",
+        admin: "[{{ .Config.Gitalk_Owner }}]",
+        id: "{{ .Data.ShortUrl }}",      // Ensure uniqueness and length less than 50
+        distractionFreeMode: false  // Facebook-like distraction free mode
+    })
+    gitalk.render('gitalk-container')
+</script>
+{{end}}
+{{ end }}

themes/blog/public/css/app.css

@@ -369,19 +369,20 @@ hr:after{
     align-items: center;
 }
 .search-box{
-    height: 40px;
+    height: 36px;
     display: flex;
-    border-radius: 2px;
+    border-radius: 16px;
     align-items: center;
     justify-content: space-between;
     border: 1px solid #673ab7;
-    border: 1px solid var(--primary,#673ab7);
+    border: 2px solid var(--primary,#673ab7);
     width: 320px;
 }
 .search-input{
     text-align: center;
     flex: 1;
     border: none;
+    border-radius: 16px;border-radius: 16px;
     height: 30px;
     padding: 0 10px;
 }