Hexo博客添加打赏功能

前言

当你的博客搭建好以后，你或许想要添加一些更有趣的功能，好比说打赏，虽说如今是共享经济，但也有付费阅读的需求。何况读者是否打赏全凭我的心情决定，假若你的文章勾勒出一点他/她的共鸣和感慨，那恭喜你，你已经有拥戴者了。javascript

这里附上博主的博客：http://guoyanjun.top
在博客中搜索文章：Hexo博客添加打赏功能
css

打赏功能效果图

以 yilia/Yelee主题为例：html

打赏的基本思路是将微信和支付宝的收款二维码放到每篇文章的最后，打赏的时候扫下二维码就能够了。java

step 1： 编写打赏模块的代码

layout\_partial下新建donate.ejs输入以下内容：git

<! -- 添加捐赠图标 -->
<div class ="post-donate">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏"></a>
        <span class="donate_txt">
           ↑<br>
           <%=theme.donate_message%>
        </span>
        <br>
      </div>  
    <div id="donate_guide" class="donate_bar center hidden" >
        <!-- 方式一： 
            ![](/img/Alipay.jpg)
            ![](/img/WeChatpay.jpg)
        -->
        <!-- 方式二；
            step1：在_config.yml中添加配置
                Alipay: /img/Alipay.jpg
                WeChatpay: /img/WeChatpay.jpg
            step2：此处两张图片的路径分别设置为以下
                <img src="<%- theme.root_url %><%=theme.Alipay%>"
                <img src="<%- theme.root_url %><%=theme.WeChatpay%>"
        -->
        <!-- 支付宝打赏图案 -->
        <img src="<%- theme.root_url %>/img/Alipay.jpg" alt="支付宝打赏">
        <!-- 微信打赏图案 -->
        <img src="<%- theme.root_url %>/img/WeChatpay.jpg" alt="微信打赏">
    </div>
    <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function(){
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }
    </script>
</div>
<! -- 添加捐赠图标 -->

step 2： 设置打赏模块的样式

source\css\_partial下新建donate.styl输入以下内容：web

.donate_bar {
    text-align: center;
    margin-top: 5%
}

.donate_bar a.btn_donate {
    display: inline-block;
    width: 82px;
    height: 82px;
    margin-left: auto;
    margin-right: auto;
    background: url(http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif)no-repeat;
    <!-- 由于本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，为了在让打赏按钮显示效果正常 而 添加了如下几行 css，嵌入其它博客时不必定要它们。本段注释请在添加时删除-->
    -webkit-transition: background 0s;
    -moz-transition: background 0s;
    -o-transition: background 0s;
    -ms-transition: background 0s;
    transition: background 0s
}

.donate_bar a.btn_donate:hover {
    background-position: 0 -82px
}

.donate_bar .donate_txt {
    display: block;
    color: #9d9d9d;
    font: 14px/2 "Microsoft Yahei"
}
.donate_bar.hidden{
    display: none
}

.post-donate{
    margin-top: 80px;
}

#donate_guide{
    height: 210px;
    width: 420px;
    margin: 0 auto;
}

#donate_guide img{
    height: 200px;
    height: 200px;
}

最后，记得在source\css\style.styl中添加@import '_partial/donate'微信

step 3： 讲打赏模块整合到文章中

在layout\_partial\article.ejs中的<article> </article>标签内添加以下内容：hexo

<% if (!index && theme.donate){ %>
    <%- partial('donate') %>
<% } %>

• 若是你只想在全部post的文章页面添加打赏功能，能够参照如下：

<!-- 添加打赏功能 只在文章详情中显示-->
<% if (page.prev || page.next){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>

• 若是你想在指定页面添加打赏功能，需在你的主题文件夹下的layout\_partial\article.ejs路径中，更改article.ejs中的内容。例如：只有页面的属性中添加了donate: true属性后，才显示打赏，则需在你的文章的头部添加上donate: true字段，article.ejs中需改成以下所示：

<!-- 添加打赏功能 -->
<% if (page.donate){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>

step 4： 编写配置文件

咱们能够在主题的_config.yml文件中关闭和打开打赏功能，还能够自定义设置打赏文案。例如：app

#是否开启打赏功能
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！

大功告成，这样一个简单的打赏功能就实现了！
固然，你若是以为麻烦，可是又想实现打赏功能，那么能够尝试下云打赏，听说一行代码集成打赏功能。ide

使用iframe嵌入打赏

若是想要更加方便快捷的添加打赏功能，可使用ifram的方式直接嵌入到你的文章中。
示例以下：

<iframe src="https://rawcdn.githack.com/TinyJay/donate-page/51aaf216f048b8e6d5ce01443a32be930b91869d/simple/index.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no" allowtransparency="true"></iframe>

查看效果：

GIF效果动态图