Add gitalk comment plugin

layout/_partial/head.ejs

@@ -34,6 +34,7 @@ var description = '';
     <% if (config.author){ %><meta name="author" content="<%= config.author %>"> <% } %>
     <% if (theme.rss){ %><link rel="alternative" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml"> <% } %>
     <% if (theme.favicon){ %><link rel="icon" href="<%- url_for(theme.favicon) %>"> <% } %>
+    <%- css(['//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css'])%>
     <%- css(['css/diaspora.css'])%>
 
 </head>

layout/_partial/post/article.ejs

@@ -12,6 +12,7 @@
                 <source type="audio/mpeg" src="<%- page.mp3 || theme.mp3 %>">
             </audio>
         </div>
+        <%- partial('gitalk', {post: page}) %>
     </div>
     <% if (theme.TOC == true){ %>
       <div class='side'>

layout/_partial/post/gitalk.ejs

@@ -0,0 +1,11 @@
+<% if (theme.gitalk.clientID != ''){%>
+    <div id='gitalk-container' class="comment link"
+        data-ae='<%=theme.gitalk.autoExpand%>'
+        data-ci='<%=theme.gitalk.clientID%>'
+        data-cs='<%=theme.gitalk.clientSecret%>'
+        data-r='<%=theme.gitalk.repo%>'
+        data-o='<%=theme.gitalk.owner%>'
+        data-a='<%=theme.gitalk.admin%>'
+        data-d='<%=theme.gitalk.distractionFreeMode%>'
+    >查看评论</div>
+<%}%>

layout/_partial/scripts.ejs

@@ -1,2 +1,3 @@
+<%- js(['//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js'])%>
 <%- js(['//lib.baomitu.com/jquery/1.8.3/jquery.min.js', 'js/plugin.js', 'js/diaspora.js'])%>
 <%- partial('photoswipe') %>

source/css/diaspora.css

@@ -111,8 +111,19 @@ h1.title {font-size:30px;color:#333;line-height:1.3;position:relative;font-weigh
 .stuff .likeThis {pointer-events:none;}
 .stuff .icon-like {display:none;}
 .stuff .count {color:#666;}
-.comment {margin:50px auto 0;}
+.comment {margin:50px auto;}
 .comment.link,.downloadlink {cursor:pointer;letter-spacing:5px;border:1px solid #dadada;width:170px;text-align:center;color:#666;font-size:14px;padding:10px 0;}
+.comment .gt-comments-null{display:none;}
+.comment .gt-header-textarea{border-radius:0;background: white;}
+.comment .gt-popup{margin-top:8px;}
+.comment .gt-counts a{color:black;border-bottom:0;pointer-events:none;}
+.comment .gt-avatar-github{display:none;}
+.comment .gt-header-avatar{display:none;}
+.comment .gt-header-comment{margin-left: 0;!important;}
+.comment .gt-btn-public{border-radius:0;}
+.comment .gt-btn-login{border-radius:0;}
+.comment .gt-ico-tip{display:none;}
+.comment .gt-btn-public .gt-btn-text:after{content:"（Cmd | Ctrl  + Enter）";}
 #preview {position:fixed;top:0;width:100%;height:100%;z-index:5;background:#fff;left:100%;-moz-transition:all 0.3s cubic-bezier(0,0,0.2,1);-webkit-transition:all 0.3s cubic-bezier(0,0,0.2,1);transition:all 0.3s cubic-bezier(0,0,0.2,1);overflow-y:scroll;}
 #preview.show {left:0;}
 #preview + canvas {display:none;}
@@ -216,6 +227,7 @@ pre .keyword,pre .javascript .function {color:#cc99cc;}
   .article{width:100%;}
   .article .main{width:94%;}
   .article .side {display:none}
+  .comment .gt-btn-public .gt-btn-text:after{content:"";}
 }
 @media screen and (max-width:900px) {
   #mark {height:480px;}
@@ -234,6 +246,7 @@ pre .keyword,pre .javascript .function {color:#cc99cc;}
   .article{width:100%;}
   .article .main{width:94%;}
   .article .side {display:none}
+  .comment .gt-btn-public .gt-btn-text:after{content:"";}
 }
 @media screen and (max-width:780px) {
   #header {top:40px;}
@@ -253,6 +266,7 @@ pre .keyword,pre .javascript .function {color:#cc99cc;}
   .article{width:100%;}
   .article .main{width:94%;}
   .article .side {display:none}
+  .comment .gt-btn-public .gt-btn-text:after{content:"";}
 }
 @media screen and (max-width:480px) {
   #post0 p:first-child {display:block;}
@@ -268,4 +282,6 @@ pre .keyword,pre .javascript .function {color:#cc99cc;}
   .article {width:100%;}
   .article .main{width:94%;}
   .article .side {display:none}
+  .comment .gt-btn-public .gt-btn-text:after{content:"";}
 }
+

source/js/diaspora.js

@@ -97,8 +97,12 @@ var Diaspora = {
                     break;
             }
             setTimeout(function() {
-                Diaspora.player()
-                    $('#top').show();
+                Diaspora.player();
+                $('#top').show();
+                comment = $("#gitalk-container");
+                if (comment.data('ae') == true){
+                    comment.click();
+                }
             }, 0)
         })
     },
@@ -410,8 +414,8 @@ $(function() {
                 }, 300)
                 return false;
                 break;
+            // photoswipe
             case (tag.indexOf('pimg') != -1):
-                // photoswipe
                 var pswpElement = $('.pswp').get(0);
                 if (pswpElement) {
                     var items = [];
@@ -450,10 +454,34 @@ $(function() {
                 }
                 return false;
                 break;
+              // comment
+            case - 1 != tag.indexOf("comment"): 
+                Diaspora.loading(),
+                comment = $('#gitalk-container');
+                gitalk = new Gitalk({
+                  clientID: comment.data('ci'),
+                  clientSecret: comment.data('cs'),
+                  repo: comment.data('r'),
+                  owner: comment.data('o'),
+                  admin: comment.data('a'),
+                  id: location.pathname,
+                  distractionFreeMode: comment.data('d')
+                })
+                $(".comment").removeClass("link")
+                gitalk.render('gitalk-container')
+                Diaspora.loaded();
+                return false;
+                break;
             default:
                 return true;
                 break;
         }
     })
+    // 是否自动展开评论
+    comment = $("#gitalk-container");
+    if (comment.data('ae') == true){
+        comment.click();
+    }
     console.log("%c Github %c","background:#24272A; color:#ffffff","","https://github.com/Fechin/hexo-theme-diaspora")
 })
+