Hexo类型博客集成打赏功能

xiangzhihong

发布于 2022-11-30 10:55:03

4270

发布于 2022-11-30 10:55:03

文章被收录于专栏：向治洪向治洪

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

该效果就是在每篇文章的后面添加一个打赏功能，当点击“赏”按钮后会弹出一个打赏的窗口，想要体验的可以点击下面的地址来完成体验： http://www.xiangzhihong.com/

其实上实现也比较简单，我的博客是使用的Snippet主题，当然，如果你的前端知识了得，你也可以自己修改样式和风格。在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打赏逻辑。

<!--打赏-->
        <div class="reward">
       <div class="reward-button">赏 <span class="reward-code">
        <span class="alipay-code"> <img class="alipay-img wdp-appear" src="http://ohe65w0xx.bkt.clouddn.com/alipay.png"><b>支付宝打赏</b> </span> 
        <span class="wechat-code"> <img class="wechat-img wdp-appear" src="http://ohe65w0xx.bkt.clouddn.com/weipay.png"><b>微信打赏</b> </span> 
       </div>
      <p class="reward-notice">如果文章对你有帮助，欢迎点击上方按钮打赏作者</p>
      </div>
      <!--打赏-->

说明：我这里的图片是第三方存管的。其他模式的主题大体相同，大家可以自行百度修改相应的文件。如果需要集成浏览量，可以使用不蒜子统计系统，两行代码搞定：

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

附件：打赏功能源码

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-03-27，如有侵权请联系 cloudcommunity@tencent.com 删除

hexo