–本博客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行开头的那段代码可以不加。 整个逻辑就是: 判断是否需要显示打赏模块,是的话,就显示。 显示的内容有两种,按钮和二维码,首先将二维码隐藏起来,等到用户按动按钮,则将按钮隐藏起来,二维码显示出来。
这样我们的打赏功能就做好了,是不是很简单呢?你也可以试试哦。如果这篇文章对你有用,你不妨也打赏下我呢~ :)