关于如何使用Hexo+Hexo主题搭建博客系统，可以参考我之前的博客的介绍：，本文主要介绍如何集成文章的打赏功能，打赏的效果如图。

其实上实现也比较简单，我的博客是使用的 ，当然，如果你的前端知识了得，你也可以自己修改样式和风格。在Snippet主题集成打赏功能只需要修改两个地方。

1，新增css文件

首先，打开系统的themes-->snippet文件-->source-->css添加相应的样式。

*,*: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}

这个样式是专门处理打赏部分的。

2，然后在post.ejs添加打赏的逻辑

打开系统的themes-->snippet文件-->layout下的post.ejs文件，在post-footer标签之上，也就是文末，添加如下js打赏逻辑。

            
    
       
     
      赏 
               支付宝打赏           微信打赏         
     
      
     
如果文章对你有帮助，欢迎点击上方按钮打赏作者
      
    
      
    

说明：我这里的图片是第三方存管的。其他模式的主题大体相同，大家可以自行百度修改相应的文件。

附件：