添加评论功能和打赏功能

themes/material-flow/_config.yml

@@ -58,4 +58,17 @@ social:
 
 avatar: https://dzdy-1252491474.cos.ap-chengdu.myqcloud.com/icon.png
 favicon:
-  medium: https://dzdy-1252491474.cos.ap-chengdu.myqcloud.com/icon.png
+  medium: https://dzdy-1252491474.cos.ap-chengdu.myqcloud.com/icon.png
+# 评论
+
+valine:
+  enable: true # 如果你想用Valine评论系统，请设置enable为true
+  appId: WlTGkssQP0sUsCks6PyeoDJP-gzGzoHsz
+  appKey: 6HaG04mii0jqEJJuPKVG81T1
+  guest_info: nick,mail #valine comment header info
+  placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
+  avatar: mp # gravatar style https://valine.js.org/avatar
+  pageSize: 10 # comment list page size
+  verify: false # valine verify code (true/false)
+  notify: false # valine mail notify (true/false)
+  lang: zh-cn

themes/material-flow/layout/_partial/article.ejs

@@ -1,56 +1,99 @@
 <article id="<%= post.layout %>-<%= post.slug %>"
-  class="post white-box article-type-<%= post.layout %>"
-  itemscope itemprop="blogPost">
-	<section class='meta'>
-	<h2 class="title">
-  	<a href="<%- url_for(post.path) %>">
-    	<%= post.title %>
-    </a>
-  </h2>
-	<time>
-	  <%= date(post.date, 'MMM D, YYYY') %>
-	</time>
-	<%- partial('categories',{post:post}) %>
-	</section>
-	<% if(post.toc!==false){ %>
-		<section class="toc-wrapper"><%- toc(post.content) %></section>
-	<% } %>
-	<section class="article typo">
-  	<div class="article-entry" itemprop="articleBody">
-    	<%- post.content %>
-  	</div>
-	  <% if (post.tags && post.tags.length) { %>
-	  <div class="article-tags tags">
-      <% post.tags.each(function(item){ %>
-        <a href="<%- url_for(item.path) %>"><%=item.name %></a>
-      <%})%>
-	  </div>
+         class="post white-box article-type-<%= post.layout %>"
+         itemscope itemprop="blogPost">
+    <section class='meta'>
+        <h2 class="title">
+            <a href="<%- url_for(post.path) %>">
+                <%= post.title %>
+            </a>
+        </h2>
+        <time>
+            <%= date(post.date, 'MMM D, YYYY') %>
+        </time>
+        <%- partial('categories', {post: post}) %>
+    </section>
+    <% if(post.toc !== false){ %>
+        <section class="toc-wrapper"><%- toc(post.content) %></section>
     <% } %>
-		
-	<% if(post.prev || post.next){ %>
-		<div class="art-item-footer">
-				<% if(post.prev){ %>
-					<span class="art-item-left"><i class="icon icon-chevron-thin-left"></i>prev：<a href="<%=url_for(post.prev.path)%>" rel="prev"  title="<%=post.prev.title%>">
+    <section class="article typo">
+        <div class="article-entry" itemprop="articleBody">
+            <%- post.content %>
+        </div>
+        <% if (post.tags && post.tags.length) { %>
+            <div class="article-tags tags">
+                <% post.tags.each(function(item){ %>
+                    <a href="<%- url_for(item.path) %>"><%= item.name %></a>
+                <% }) %>
+            </div>
+        <% } %>
+
+        <% if(post.prev || post.next){ %>
+            <div class="art-item-footer">
+                <% if(post.prev){ %>
+                <span class="art-item-left"><i class="icon icon-chevron-thin-left"></i>prev：<a
+                            href="<%= url_for(post.prev.path) %>" rel="prev" title="<%= post.prev.title %>">
 						<%= post.prev.title %> 
 					</a></span>
-				<% } %>
-				<% if(post.next){ %>
-					<span class="art-item-right">next：<a href="<%=url_for(post.next.path) %>" rel="next"  title="<%=post.next.title %>">
-						<%=post.next.title  %>
+                <% } %>
+                <% if(post.next){ %>
+                <span class="art-item-right">next：<a href="<%= url_for(post.next.path) %>" rel="next"
+                                                     title="<%= post.next.title %>">
+						<%= post.next.title %>
 					</a><i class="icon icon-chevron-thin-right"></i></span>
-				<%} %>
-		</div>
-	<%} %>
-	</section>
-	<% if (post.comments && config.disqus_shortname){ %>
-		<section id="comments">
-			<div id="disqus_thread"></div>
-		</section>
-	<% } %>
+                <% } %>
+            </div>
+        <% } %>
+    </section>
+
+    <!--打赏-->
+    <div class="reward">
+        <div class="reward-button">赏 <span class="reward-code">
+        <span class="alipay-code"> <img class="alipay-img wdp-appear" src="https://dzdy-1252491474.cos.ap-chengdu.myqcloud.com/alipay.jpg"><b>支付宝打赏</b> </span>
+        <span class="wechat-code"> <img class="wechat-img wdp-appear" src="https://dzdy-1252491474.cos.ap-chengdu.myqcloud.com/wechat.jpg"><b>微信打赏</b> </span>
+        </span>
+        </div>
+        <p class="reward-notice">如果文章对你有帮助，欢迎点击上方按钮打赏作者</p>
+    </div>
+    <!--打赏-->
+
+    <% if (post.comments && config.disqus_shortname){ %>
+        <section id="comments">
+            <div id="disqus_thread"></div>
+        </section>
+    <% } %>
+
+    <% if (theme.valine.enable && theme.valine.appId && theme.valine.appKey){ %>
+        <section id="comments">
+            <div id="valine_container" class="valine_thread"></div>
+            <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
+            <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
+            <script>
+                var GUEST_INFO = ['nick', 'mail', 'link'];
+                var guest_info = '<%= theme.valine.guest_info %>'.split(',').filter(function (item) {
+                    return GUEST_INFO.indexOf(item) > -1
+                });
+                var notify = '<%= theme.valine.notify %>' == true;
+                var verify = '<%= theme.valine.verify %>' == true;
+                var valine = new Valine();
+                valine.init({
+                    el: '#valine_container',
+                    notify: notify,
+                    verify: verify,
+                    guest_info: guest_info,
+                    appId: "<%= theme.valine.appId %>",
+                    appKey: "<%= theme.valine.appKey %>",
+                    placeholder: "<%= theme.valine.placeholder %>",
+                    pageSize: '<%= theme.valine.pageSize %>',
+                    avatar: '<%= theme.valine.avatar %>',
+                    lang: '<%= theme.valine.lang %>'
+                })
+            </script>
+        </section>
+    <% } %>
 </article>
 <script>
-	window.subData = {
-		title: '<%= post.title %>',
-		tools: true
-	}
+    window.subData = {
+        title: '<%= post.title %>',
+        tools: true
+    }
 </script>

themes/material-flow/source/less/_money.less

@@ -0,0 +1,118 @@
+*,*:before,*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.reward {
+  padding: 5px 0
+}
+
+.reward .reward-notice {
+  font-size: 14px;
+  line-height: 14px;
+  margin: 15px auto;
+  text-align: center
+}
+
+.reward .reward-button {
+  font-size: 28px;
+  line-height: 58px;
+  position: relative;
+  display: block;
+  width: 60px;
+  height: 60px;
+  margin: 0 auto;
+  padding: 0;
+  -webkit-user-select: none;
+  text-align: center;
+  vertical-align: middle;
+  color: #fff;
+  border: 1px solid #f1b60e;
+  border-radius: 50%;
+  background: #fccd60;
+  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
+  background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
+  background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
+}
+
+.reward .reward-code {
+  position: absolute;
+  top: -220px;
+  left: 50%;
+  display: none;
+  width: 350px;
+  height: 200px;
+  margin-left: -175px;
+  padding: 15px;
+  border: 1px solid #e6e6e6;
+  background: #fff;
+  box-shadow: 0 1px 1px 1px #efefef
+}
+
+.reward .reward-button:hover .reward-code {
+  display: block
+}
+
+.reward .reward-code span {
+  display: inline-block;
+  width: 150px;
+  height: 150px
+}
+
+.reward .reward-code span.alipay-code {
+  float: left
+}
+
+.reward .reward-code span.alipay-code a {
+  padding: 0
+}
+
+.reward .reward-code span.wechat-code {
+  float: right
+}
+
+.reward .reward-code img {
+  display: inline-block;
+  float: left;
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+  border: 0
+}
+
+.reward .reward-code b {
+  font-size: 14px;
+  line-height: 26px;
+  display: block;
+  margin: 0;
+  text-align: center;
+  color: #666
+}
+
+.reward .reward-code b.notice {
+  line-height: 2rem;
+  margin-top: -1rem;
+  color: #999
+}
+
+.reward .reward-code:after,.reward .reward-code:before {
+  position: absolute;
+  content: '';
+  border: 10px solid transparent
+}
+
+.reward .reward-code:after {
+  bottom: -19px;
+  left: 50%;
+  margin-left: -10px;
+  border-top-color: #fff
+}
+
+.reward .reward-code:before {
+  bottom: -20px;
+  left: 50%;
+  margin-left: -10px;
+  border-top-color: #e6e6e6
+}

themes/material-flow/source/style.less

@@ -13,3 +13,4 @@
 @import "less/_pagination.less";
 @import "less/_search.less";
 @import "less/_footer.less";
+@import "less/_money.less";