By

总阅读次

文章目录
  1. 1. 什么叫嵌入到博客中？为什么这么干？
  2. 2. 要做什么？
  3. 3. 怎么做？

–本博客5月18日优化，增加博客打赏功能

使用Hexo这款博客框架已经很久了，期间也一直在摸索，一次次地修改代码，看效果，修改，看效果…，现在已经大致熟悉了整个框架的结构，能够自主完成对主题的修改了。

接下来可以考虑写一篇解析Hexo框架的文章，一来加深自己对框架的理解，方便后续研究，而来也为其他刚开始接触Hexo的童鞋提供一些方法，让他们能够更快地适应，熟悉这个框架。

今天偶然看到一个打赏功能，于是想在自己的博客上实现一下，虽然自觉自己的文章还有待加强，但是客官您随意啦。听说，打赏我的人最后都找到了真爱~

灵感起源于这篇文章，初始采用的是这篇文章的最终版代码，后来自己进行了大量的修改，并且嵌入到了框架中。接下来，就来讲讲具体怎么做吧。

什么叫嵌入到博客中？为什么这么干？

嵌入到博客中，简单说来，就是嵌入到博客模板中，不是单纯地贴HTML代码来改变显示内容，而是将自己要显示的信息写在主题的配置文件_config.yml中，然后通过HTML模板在网页中显示，这样，每次想修改显示内容的时候，就不用去艰难地寻找具体的ejs文件，然后找到具体的HTML代码，然后找到具体的标签位置再去修改了，而是打开_config.yml，直接编辑，搞定。这样也有利于标准化，这才是一个轮子应有的功能。之前我做很多主题优化的时候，很多都是直接粘HTML代码，代码短的话无伤大雅，但是代码长的话，随着时间的推移，整个代码就没法看了，不利于维护。

要做什么？

我们要实现的目标就是只需在themes\jacman\_config.yml文件中添加如下语句：

1
2
3
4
5
6
donate:
  enable: true
  text: 打赏我的人，运气都不会太差~
  wechat: http://7xsl28.com1.z0.glb.clouddn.com/wechatpay.png
  alipay: http://7xsl28.com1.z0.glb.clouddn.com/alipay.jpg
  web: true

即可实现如本文最下方的样式：

首先有一个按钮，如果读者不想打赏，自然不会去点它：
Donate 1

但是如果点击按钮的话，就转而显示如下效果：
Donate 2

读者用微信或者支付宝扫描二维码即可实现打赏功能。

这里也可以添加一个网页版的支付宝付款链接，这里采用的是云打赏，因为云打赏支持支付宝支付和微信支付，而微信支付还是要扫码，支付宝的话倒是可以选择网页支付和扫码支付，反正感觉稍微有点繁琐，跟外卖付款的程序一样，但是我估计读者肯定没有外卖付款那么积极的，不过既然做了，还是贴出来。将上面的web值改为false可以不显示web端付款链接，及中间那个“赏”字。

怎么做？

因为我们想要将打赏功能嵌入到每一篇博客当中，所以我们需要改动文章显示的HTML模板。
找到themes\jacman\layout\_partial\post\article.ejs
这就是文章的HTML模板文件，在<div class="article-content">...</div>的下面，<%- partial('footer') %>的上面插入如下HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<% if (theme.donate) { %>
	<!-- css -->
	<style type="text/css">
	    .center {
	        text-align: center;
	    }
	    .hidden {
	        display: none;
	    }
		.donate_bar a.btn_donate{
			display: inline-block;
			width: 82px;
			height: 82px;
			background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;
			_background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;

			<!-- http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif
			     因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，
				 为了在让打赏按钮显示效果正常 而 添加了以下几行 css，
				 嵌入其它博客时不一定要它们。 -->
			-webkit-transition: background 0s;
			-moz-transition: background 0s;
			-o-transition: background 0s;
			-ms-transition: background 0s;
			transition: background 0s;
			<!-- /让打赏按钮的效果显示正常 而 添加的几行 css 到此结束 -->
		}

		.donate_bar a.btn_donate:hover{ background-position: 0px -82px;}
		.donate_bar .donate_txt {
			display: block;
			color: #9d9d9d;
			font: 14px/2 "Microsoft Yahei";
		}
		.bold{ font-weight: bold; }
	</style>
	<!-- /css -->

    <!-- Donate Module -->
    <div id="donate_module">

	<!-- btn_donate & tips -->
	<div id="donate_board" class="donate_bar center">
	    <br>
	    ------------------------------------------------------------------------------------------------------------------------------
	    <br>
		<a id="btn_donate" class="btn_donate" target="_self" href="javascript:;" title="Donate 打赏"></a>
		<span class="donate_txt">
			<%= theme.donate.text %>
		</span>
			
		
	</div>
	<!-- /btn_donate & tips -->

	<!-- donate guide -->
    
	<div id="donate_guide" class="donate_bar center hidden">
        <br>
	    ------------------------------------------------------------------------------------------------------------------------------
	    <br>
	    <% if(theme.donate.web) { %>
	    <div width="100%" align="center"><div name="dashmain" id="dash-main-id-87895f" class="dash-main-3 87895f-0.99"></div></div>
		<script type="text/javascript" charset="utf-8" src="http://www.dashangcloud.com/static/ds.js"></script>
		<% } %>

		<a href="<%= theme.donate.wechat %>" title="用微信扫一扫哦~" class="fancybox" rel="article0">
			<img src="<%= theme.donate.wechat %>" title="微信打赏 Donate" height="190px" width="auto"/>
		</a>
        
        &nbsp;&nbsp;

		<a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0">
			<img src="<%= theme.donate.alipay %>" title="支付宝打赏 Donate" height="190px" width="auto"/>
		</a>

		<span class="donate_txt">
			<%= theme.donate.text %>
		</span>

	</div>
	<!-- /donate guide -->

	<!-- donate script -->
	<script type="text/javascript">
		document.getElementById('btn_donate').onclick = function() {
			$('#donate_board').addClass('hidden');
	    $('#donate_guide').removeClass('hidden');
		}

		function donate_on_web(){
			$('#donate').submit();
        }

		var original_window_onload = window.onload;
        window.onload = function () {
            if (original_window_onload) {
                original_window_onload();
            }
            document.getElementById('donate_board_wdg').className = 'hidden';
		}
	</script>
	<!-- /donate script -->
</div>
<!-- /Donate Module -->
   <% } %>

第95行开头的那段代码可以不加。
整个逻辑就是：
判断是否需要显示打赏模块，是的话，就显示。
显示的内容有两种，按钮和二维码，首先将二维码隐藏起来，等到用户按动按钮，则将按钮隐藏起来，二维码显示出来。

这样我们的打赏功能就做好了，是不是很简单呢？你也可以试试哦。
如果这篇文章对你有用，你不妨也打赏下我呢~ :)

错误解决与优化 | Err&Opt
hexo