Hexo博客添加打赏功能

前言

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

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

打赏功能效果图

以 yilia/Yelee主题为例：

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

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

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

    

        
        
           ↑

           <%=theme.donate_message%>
        
        

      
  
    

        
        
        
        
        
        
    
    

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

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

.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;
    
    -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中的

标签内添加如下内容：

<% 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文件中关闭和打开打赏功能，还可以自定义设置打赏文案。例如：

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

大功告成，这样一个简单的打赏功能就实现了！
当然，你如果觉得麻烦，但是又想实现打赏功能，那么可以尝试下云打赏，据说一行代码集成打赏功能。

使用iframe嵌入打赏

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

查看效果：

GIF效果动态图