Add Disqus

Author: kaeyleo

_config.yml

@@ -16,7 +16,10 @@ nickname: '悟空'
 bio: '前端开发者，热爱技术&设计，简单乐观爱创造'
 avatar: 'assets/img/profile.png'
 
-# theme color
+# Comments
+disqus: true
+
+# theme color 主题皮肤
 theme-color: 'default'  # pink or default
 
 # Post header background patterns (when the post no cover): circuitBoard, overlappingCircles, food, glamorous, ticTacToe, seaOfClouds
@@ -29,7 +32,7 @@ sns:
   instagram: '//www.instagram.com/steveliaocn'
   github: '//github.com/kaeyleo'
 
-# Tags
+# Tags 设置标签
 recommend-tags: true # whether or not display recommend-tags on the sidebar
 recommend-condition-size: 12 # a tag will be recommended if the size of it is more than this value
 

_layouts/post.html

@@ -86,6 +86,28 @@ <h2 class="post-subtitle">{{ page.subtitle }}</h2>
         </div>
         {% endif %}
     </section>
+    {% if site.disqus %}
+    <section class="comment">
+        <div id="disqus_thread"></div>
+    </section>
+    {% endif %}
 </div>
-
+<script>
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+/*
+var disqus_config = function () {
+this.page.url = PAGE_URL;  // 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, s = d.createElement('script');
+s.src = 'https://liaokeyu.disqus.com/embed.js';
+s.setAttribute('data-timestamp', +new Date());
+(d.head || d.body).appendChild(s);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
 {% include footer.html %}

assets/css/app.min.css

@@ -293,12 +293,13 @@
 .markdown-body h2 {
   font-size: 24px;
   font-weight: 600;
-  margin-top: 40px;
+  margin-top: 32px;
 }
 
 .markdown-body h3 {
   font-size: 20px;
   font-weight: 600;
+  margin: 26px 0 12px;
 }
 
 .markdown-body h4 {
@@ -319,7 +320,7 @@
 .markdown-body p {
   margin-bottom: 16px;
   font-size: 16px;
-  line-height: 1.8;
+  line-height: 1.75;
   text-align: justify;
 }
 
@@ -470,18 +471,6 @@
   box-shadow: inset 0 -1px 0 #959da5;
 }
 
-/*.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4,
-.markdown-body h5,
-.markdown-body h6 {
-  margin-top: 24px;
-  margin-bottom: 16px;
-  font-weight: 600;
-  line-height: 1.25;
-}*/
-
 .markdown-body h1 .octicon-link,
 .markdown-body h2 .octicon-link,
 .markdown-body h3 .octicon-link,
@@ -652,4 +641,4 @@
 
 .markdown-body hr {
   border-bottom-color: #eee;
-}
+}

assets/css/github-markdown.css

@@ -539,9 +539,11 @@ a {
 .author-detail {
   position: relative;
   top: -35px; }
-  .author-detail .author-card {
+  .author-detail .author-card, .author-detail .comment {
     width: 720px;
     margin: 0 auto; }
+  .author-detail .comment {
+    margin-bottom: 60px; }
 
 .read-next {
   display: flex;

dev/sass/app.css

@@ -452,10 +452,13 @@
 .author-detail {
     position: relative;
     top: -35px;
-    .author-card {
+    .author-card, .comment {
         width: $post-content-w;
         margin: 0 auto;
     }
+    .comment {
+        margin-bottom: 60px;
+    }
 }
 
 .read-next {