–本博客5月19日优化
使用Hexo这款博客框架已经很久了，期间也一直在摸索，一次次地修改代码，看效果，修改，看效果…，现在已经大致熟悉了整个框架的结构，能够自主完成对主题的修改了。
接下来可以考虑写一篇解析Hexo框架的文章，一来加深自己对框架的理解，方便后续研究，而来也为其他刚开始接触Hexo的童鞋提供一些方法，让他们能够更快地适应，熟悉这个框架。
今天偶然看到一个打赏功能，于是想在自己的博客上实现一下，虽然自觉自己的文章还有待加强，但是客官您随意啦。听说，打赏我的人最后都找到了真爱~
灵感起源于 这篇文章 ，初始采用的是这篇文章的最终版代码，后来自己进行了大量的修改，并且嵌入到了框架中。接下来，就来讲讲具体怎么做吧。
嵌入到博客中，简单说来，就是嵌入到博客模板中，不是单纯地贴HTML代码来改变显示内容，而是将自己要显示的信息写在主题的配置文件 _config.yml 中，然后通过HTML模板在网页中显示，这样，每次想修改显示内容的时候，就不用去艰难地寻找具体的ejs文件，然后找到具体的HTML代码，然后找到具体的标签位置再去修改了，而是打开 _config.yml ，直接编辑，搞定。这样也有利于标准化，这才是一个轮子应有的功能。之前我做很多主题优化的时候，很多都是直接粘HTML代码，代码短的话无伤大雅，但是代码长的话，随着时间的推移，整个代码就没法看了，不利于维护。
我们要实现的目标就是只需在 themes\jacman\_config.yml 文件中添加如下语句：
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
即可实现如本文最下方的样式：
首先有一个按钮，如果读者不想打赏，自然不会去点它：
但是如果点击按钮的话，就转而显示如下效果：
读者用微信或者支付宝扫描二维码即可实现打赏功能。
这里也可以添加一个网页版的支付宝付款链接，这里采用的是云打赏，因为云打赏支持支付宝支付和微信支付，而微信支付还是要扫码，支付宝的话倒是可以选择网页支付和扫码支付，反正感觉稍微有点繁琐，跟外卖付款的程序一样，但是我估计读者肯定没有外卖付款那么积极的，不过既然做了，还是贴出来。将上面的web值改为false可以不显示web端付款链接，及中间那个“赏”字。
因为我们想要将打赏功能嵌入到每一篇博客当中，所以我们需要改动文章显示的HTML模板。 找到 themes\jacman\layout\_partial\post\article.ejs 这就是文章的HTML模板文件，在
<% 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 % alt="Hexo博客Jacman主题的优化增加博客打赏功能_html/css_WEB-ITnose" >" title="微信打赏 Donate" height="190px" width="auto"/> </a> <a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0"> <img src="<%= theme.donate.alipay % alt="Hexo博客Jacman主题的优化增加博客打赏功能_html/css_WEB-ITnose" >" 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行开头的那段代码可以不加。 整个逻辑就是： 判断是否需要显示打赏模块，是的话，就显示。 显示的内容有两种，按钮和二维码，首先将二维码隐藏起来，等到用户按动按钮，则将按钮隐藏起来，二维码显示出来。
这样我们的打赏功能就做好了，是不是很简单呢？你也可以试试哦。如果这篇文章对你有用，你不妨也打赏下我呢~ :)
The meaning of today's headline display volume
Win10 does not support the disk layout solution of Uefi firmware
How to make charts and data analysis charts in PPT
How to create a bitmap index in mysql
How to solve 0xc000035
Solution to the problem that win10 download software cannot be installed
Features of ruby language
js method to delete node
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
