Add Disqus, Share.js

Author: kaeyleo

README.md

@@ -1,4 +1,4 @@
-# H2O
+## H2O
 
 [在线预览 →](http://liaokeyu.com/)
 
@@ -55,7 +55,8 @@ If you like this theme or using it, please give a ⭐️ for motivation ;)
 - 高级部分
 	- [自定义](#自定义)
 - 集成服务 
-	- [Disqus](#Disqus) [Todo]
+	- [Disqus](#Disqus)
+	- [Share.js](#Share.js)
 
 You can easily get started by modifying _config.yml
 
@@ -95,6 +96,7 @@ tags: jekyll 前端开发 设计
 ```
 
 #### 导航
+
 博客顶部的导航栏信息需要以下面的格式进行配置：
 
 ```
@@ -315,7 +317,24 @@ postPatterns: 'circuitBoard'
 
 #### Disqus
 
-待完成...
+[Disqus](https://disqus.com/)是一个第三方社交评论插件，体验相当不错。
+
+模板默认开启Disqus评论插件，如需关闭请在 `_config.yml` 中配置参数 `true` (开启) 或者 `false` (关闭) :
+
+```
+# Comments
+disqus: true
+```
+
+#### Share.js
+
+为了让文章更方便地分享，使用了第三方分享插件[Share.js](http://overtrue.me/share.js/)，支持一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。
+
+```
+# Share
+social-share: true # 开启或者关闭分享功能
+social-share-items: ['wechat', 'weibo', 'douban','twitter']
+```
 
 ### 贡献
 

_config.yml

@@ -19,6 +19,10 @@ avatar: 'assets/img/profile.png'
 # Comments
 disqus: true
 
+# Share
+social-share: true
+social-share-items: ['wechat', 'weibo', 'douban','twitter']
+
 # theme color 主题皮肤
 theme-color: 'default'  # pink or default
 

_includes/head.html

@@ -15,5 +15,6 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_eo2tpip1om0lik9.css">
     <link rel="stylesheet" href="{{ "assets/css/github-markdown.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "assets/css/prism.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "assets/css/share.min.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "assets/css/app.min.css" | prepend: site.baseurl }}">
 </head>

_layouts/post.html

@@ -35,10 +35,15 @@ <h2 class="post-subtitle">{{ page.subtitle }}</h2>
     <article class="markdown-body">
         {{ page.content }}
     </article>
+    {% if site.social-share %}
+    <div class="social-share-wrapper">
+        <div class="social-share"></div>
+    </div>
+    {% endif %}
 </div>
 
 <section class="author-detail">
-    <section class="author-card">
+    <section class="post-footer-item author-card">
         <div class="avatar">
             <img src="{{ site.baseurl }}{{ site.avatar }}" alt="">
         </div>
@@ -58,7 +63,7 @@ <h2 class="post-subtitle">{{ page.subtitle }}</h2>
         </ul>
         {% endif %}
     </section>
-    <section class="read-next">
+    <section class="post-footer-item read-next">
         {% if page.next.url %}
         <div class="read-next-item">
             <a href="{{ page.next.url }}" class="read-next-link"></a>
@@ -87,11 +92,15 @@ <h2 class="post-subtitle">{{ page.subtitle }}</h2>
         {% endif %}
     </section>
     {% if site.disqus %}
-    <section class="comment">
+    <section class="post-footer-item comment">
         <div id="disqus_thread"></div>
     </section>
     {% endif %}
 </div>
+<script src="{{ site.baseurl }}assets/js/social-share.min.js"></script>
+<script>
+    socialShare('.social-share', {sites: [{% for i in site.social-share-items %}'{{ i }}',{% endfor %}]});
+</script>
 <script>
 /**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

_posts/2017-04-18-new-theme-h2o.md

@@ -90,6 +90,10 @@ tags: jekyll 前端开发 设计
 - Go
 - Python
 
+### 评论功能
+
+由于多说关闭，又对国内其他第三方评论插件无感，所以将[Disqus](https://disqus.com/)列为首选（目前模板也只提供了这个），请自备梯子。
+
 ### 移动端优化
 
 响应式设计，对手机和平板等设备做了优化。
@@ -102,12 +106,6 @@ tags: jekyll 前端开发 设计
 
 H2O在这方面还有很多需要完善的地方，比如：<strike>代码高亮</strike>、夜间模式、查看大图...
 
-### 关于评论功能
-
-我的博客主要分享技术类和生活类的内容，目前我的技术水平有限，文章质量也不算高，所以评论功能也没什么交流的意义，我会不定期在[掘金](https://juejin.im/user/57a6f434165abd006159b4cc)分享一些自认为不错的文章，可以去那里给我留言。
-
-如果你打算使用H2O主题，自己搞不定Jekyll扩展评论功能的话，可以私信[我微博](http://weibo.com/1374146504/profile?topnav=1&wvr=6)，或者上[Github提issue](https://github.com/kaeyleo/jekyll-theme-H2O/issues/new)。
-
 ### 其他特性：
 
 - 增加了网页标题SEO优化