前言
當你的博客搭建好之后，你或許想要添加一些更有趣的功能，比如說打賞，雖然說現(xiàn)在是共享經(jīng)濟，但也有付費閱讀的需求。況且讀者是否打賞全憑個人心情決定，倘若你的文章勾勒出一點他/她的共鳴和感慨，那恭喜你，你已經(jīng)有擁戴者了。
這里附上博主的博客：http://guoyanjun.top
在博客中搜索文章：Hexo博客添加打賞功能
打賞功能效果圖
以 yilia/Yelee主題為例：
打賞的基本思路是將微信和支付寶的收款二維碼放到每篇文章的最后，打賞的時候掃下二維碼就可以了。
step 1： 編寫打賞模塊的代碼
layout\_partial下新建donate.ejs輸入如下內(nèi)容：
<! -- 添加捐贈圖標 -->
<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" >
<!-- 方式一：
-->
<!-- 方式二；
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輸入如下內(nèi)容：
.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>標簽內(nèi)添加如下內(nèi)容：
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
- 如果你只想在所有post的文章頁面添加打賞功能，可以參照以下：
<!-- 添加打賞功能 只在文章詳情中顯示-->
<% if (page.prev || page.next){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>
- 如果你想在指定頁面添加打賞功能，需在你的主題文件夾下的
layout\_partial\article.ejs路徑中，更改article.ejs中的內(nèi)容。例如：只有頁面的屬性中添加了donate: true屬性后，才顯示打賞，則需在你的文章的頭部添加上donate: true字段，article.ejs中需改為如下所示：
<!-- 添加打賞功能 -->
<% if (page.donate){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>
step 4： 編寫配置文件
我們可以在主題的_config.yml文件中關閉和打開打賞功能，還可以自定義設置打賞文案。例如：
#是否開啟打賞功能
donate: true
#打賞文案
donate_message: 欣賞此文？求鼓勵，求支持！
大功告成，這樣一個簡單的打賞功能就實現(xiàn)了！
當然，你如果覺得麻煩，但是又想實現(xiàn)打賞功能，那么可以嘗試下云打賞，據(jù)說一行代碼集成打賞功能。
使用iframe嵌入打賞
如果想要更加方便快捷的添加打賞功能，可以使用ifram的方式直接嵌入到你的文章中。
示例如下：
<iframe src="https://gitcdn.link/cdn/TinyJay/donate-page/faa9d69210d334af644f254296e1a8b3e24da3be/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效果動態(tài)圖
