diff --git a/_config.template.yml b/_config.template.yml
index 7a43bb66a..41a604077 100644
--- a/_config.template.yml
+++ b/_config.template.yml
@@ -155,7 +155,7 @@ topPost: false
 
 # Comment Systems
 # Available value of "use":
-#     duoshuo | disqus
+#     duoshuo | disqus | disqus_click
 comment:
     use:
     shortname:
diff --git a/languages/ar.yml b/languages/ar.yml
index a0394a76f..745b4b143 100644
--- a/languages/ar.yml
+++ b/languages/ar.yml
@@ -10,6 +10,7 @@ post:
     newer: "أحدث"
     private: "منشور خاص, مخفي مؤقتا"
     qrcode: "اقرأ هذا المقال على جهاز آخر"
+    comments_load_button: "قراءة تعليقات 「تأكد !disq.us & disquscdn.com & disqus.com يمكن تحميل」"
 share:
     article_rss: "مقالات RSS"
     comment_rss: "تعليقات RSS"
diff --git a/languages/de.yml b/languages/de.yml
index 57dc879db..fcc6b7f31 100644
--- a/languages/de.yml
+++ b/languages/de.yml
@@ -10,6 +10,7 @@ post:
     newer: "Neuren"
     private: "Private Beiträge sind temporär verborgen"
     qrcode: "Lesen Sie diesen Artikel auf anderem Gerät"
+    comments_load_button: "Lesen Sie Kommentare 「Stellen Sie sicher, dass 'disq.us & disquscdn.com & disqus.com' geladen werden kann 」"    
 share:
     article_rss: "Artikel als RSS"
     comment_rss: "Kommentare als RSS"
diff --git a/languages/en.yml b/languages/en.yml
index 21b99bccc..5661d9ebb 100755
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -10,6 +10,7 @@ post:
     newer: "Newer"
     private: "Private post, temporarily hidden"
     qrcode: "Read this article on other device"
+    comments_load_button: "Read Comments 「Be sure 'disq.us & disquscdn.com & disqus.com' can be loaded 」"    
 share:
     article_rss: "Article RSS"
     comment_rss: "Comment RSS"
diff --git a/languages/es.yml b/languages/es.yml
index 521ae19ab..40c4bdb68 100755
--- a/languages/es.yml
+++ b/languages/es.yml
@@ -10,6 +10,7 @@ post:
     newer: "Más nuevo"
     private: "Mensajes privados, ocultar temporalmente"
     qrcode: "Lea este artículo en otro dispositivo"
+    comments_load_button: "Leer comentarios 「Asegúrese de que 'disq.us & disquscdn.com & disqus.com' se puede cargar」"    
 share:
     article_rss: "Artículo RSS"
     comment_rss: "Comentario RSS"
diff --git a/languages/fr.yml b/languages/fr.yml
index 80081abbb..82b2ce5a9 100755
--- a/languages/fr.yml
+++ b/languages/fr.yml
@@ -10,6 +10,7 @@ post:
     newer: "Récent"
     private: "Article privé, caché temporairement"
     qrcode: "Lire cet article depuis un autre appareil"
+    comments_load_button: "Lire les commentaires 「Assurez-vous que 'disq.us & disquscdn.com & disqus.com' peut être chargé 」"    
 share:
     article_rss: "Flux RSS des articles"
     comment_rss: "Flux RSS des commentaires"
diff --git a/languages/ja.yml b/languages/ja.yml
index 1ce4fed0a..d694f8fb4 100755
--- a/languages/ja.yml
+++ b/languages/ja.yml
@@ -10,6 +10,7 @@ post:
     newer: "新しい"
     private: "プライベート記事、一時的に非表示にします"
     qrcode: "他のデバイスでこの記事を読む"
+    comments_load_button: "論評を読む「 あなたは disqus & disquscdn.com & disqus.com をロードできることを確認します」"    
 share:
     article_rss: "記事 RSS"
     comment_rss: "論評 RSS"
diff --git a/languages/ms.yml b/languages/ms.yml
index a2c0594bc..cdfef3365 100644
--- a/languages/ms.yml
+++ b/languages/ms.yml
@@ -10,6 +10,7 @@ post:
     newer: "Baru"
     private: "Siaran peribadi, disembunyikan buat sementara"
     qrcode: "Baca artikel ini pada peranti lain"
+    comments_load_button: "Read  comments 「Pastikan 'disq.us & disquscdn.com & disqus.com' boleh dimuatkan」"    
 share:
     article_rss: "RSS Artikel"
     comment_rss: "RSS Ulasan"
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 4956eb3f3..dff751d2a 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -10,6 +10,7 @@ post:
     newer: "新篇"
     private: "私有文章，暂不公开"
     qrcode: "在其它设备中阅读本文章"
+    comments_load_button: "阅读评论 「请确保 disq.us & disquscdn.com & disqus.com 可以正常加载」"    
 share:
     article_rss: "文章 RSS"
     comment_rss: "评论 RSS"
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index c855a08c0..1368dcd26 100755
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -10,6 +10,7 @@ post:
     newer: "新篇"
     private: "私有文章，暫不公開"
     qrcode: "在其他設備中閱讀本文章"
+    comments_load_button: "閱讀評論 「請確認 disq.us & disquscdn.com & disqus.com 可正常載入」"    
 share:
     article_rss: "文章 RSS"
     comment_rss: "評論 RSS"
diff --git a/layout/_partial/comment.ejs b/layout/_partial/comment.ejs
index c38a12cf3..4f9cc597c 100755
--- a/layout/_partial/comment.ejs
+++ b/layout/_partial/comment.ejs
@@ -15,3 +15,16 @@
         }
     </style>
 <% } %>
+
+<% if(theme.comment.use === 'disqus_click') { %>
+    <!-- 使用 DISQUS_CLICK -->
+    <div id="disqus-comment">	
+        <%- partial('_widget/disqus_click') %>
+    </div>
+    <style>
+        #disqus-comment{
+            background-color: #eee;
+            padding: 2pc;
+        }
+    </style>
+<% } %>
\ No newline at end of file
diff --git a/layout/_widget/disqus_click.ejs b/layout/_widget/disqus_click.ejs
new file mode 100644
index 000000000..c02e350c8
--- /dev/null
+++ b/layout/_widget/disqus_click.ejs
@@ -0,0 +1,66 @@
+<div id="disqus_thread"></div>
+<!-- include js -->
+<script src="/js/ripple.js"></script>
+
+<!-- add animation -->
+<style>
+        .ripple-container {
+        }
+        .ripple-container .ripple{
+            background-color: rgba(255,255,255,0.4);
+            animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
+        }
+        @keyframes ripple {
+            0% {
+                transform: scale(0);
+                opacity: 1;
+            }
+            80% {
+                transform: scale(1);
+            }
+            100% {
+                opacity: 0;
+            }
+        }
+		button {
+            background-color: dodgerblue;
+            color: white;
+            padding: 10px 20px;
+            border:0;
+            font-size: 14px;
+            cursor: pointer
+        }
+</style>
+	
+<!-- add data-ripple attribute -->
+<div class="btn1"> 
+    <button data-ripple><%= __('post.comments_load_button') %></button>
+</div>
+	
+<script>
+    // add effect to elements
+    Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
+        // find all elements and attach effect
+        new RippleEffect(element); // element is instance of javascript element node
+    });
+</script>
+
+<script>
+    $('html').ready(function() {
+        $(".btn1").click(function() {  //click to load comments
+            var disqus_config = function () {
+                this.page.url = '<%- config.url + url_for(path) %>';  // Replace PAGE_URL with your page's canonical URL variable
+                this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+            };
+
+            (function() { // DON'T EDIT BELOW THIS LINE
+                var d = document;
+                var s = d.createElement('script');
+                s.src = '//<%= theme.comment.shortname %>.disqus.com/embed.js';
+                s.setAttribute('data-timestamp', + new Date());
+                (d.head || d.body).appendChild(s);
+            })();
+       });
+    });
+</script>
+  	
diff --git a/source/js/ripple.js b/source/js/ripple.js
new file mode 100644
index 000000000..061ce05ca
--- /dev/null
+++ b/source/js/ripple.js
@@ -0,0 +1,44 @@
+/**
+ *
+ *
+ */
+function RippleEffect(element){
+    this.element = element;
+    this.element.addEventListener('click', this.run.bind(this), false);
+}
+RippleEffect.prototype = {
+    run: function(event){
+        var ripplerContainer = this.element.querySelector('.ripple-container');
+        var offsetInfo = this.element.getBoundingClientRect();
+        if(ripplerContainer) {
+            ripplerContainer.remove();
+        }
+        var rippleContainer = document.createElement('div');
+        rippleContainer.style.position = 'fixed';
+        rippleContainer.style.zIndex = 99;
+        rippleContainer.style.width = offsetInfo.width + 'px';
+        rippleContainer.style.left = offsetInfo.left + 'px';
+        rippleContainer.style.top = offsetInfo.top + 'px';
+        rippleContainer.style.height = offsetInfo.height + 'px';
+        rippleContainer.className = 'ripple-container';
+        rippleContainer.style.overflow = 'hidden';
+        this.element.appendChild(rippleContainer);
+        
+         // fixed the bug
+        var maxLength = offsetInfo.width > offsetInfo.height ? offsetInfo.width : offsetInfo.height;
+        var circleD = maxLength * 2;
+
+        var ripple = document.createElement('div');
+        ripple.style.position = 'absolute';
+        ripple.style.width = circleD + 'px';
+        ripple.style.height = circleD + 'px';
+        ripple.style.borderRadius = '500px';
+        ripple.style.left = ((event.pageX - offsetInfo.left) - circleD/2) + 'px';
+        ripple.style.top = ((event.pageY - offsetInfo.top) - circleD/2) + 'px';
+        ripple.className = 'ripple';
+        rippleContainer.appendChild(ripple);
+        ripple.addEventListener('animationend', function(){
+            rippleContainer.remove();
+        }.bind(this), false);
+    }
+};