优雅地给网站添加『要饭』功能
前言
本文部分技术支持和项目来源均来自 Shelwee 的《# 如何优雅地给网站添加赞赏功能?》。
相信我,能想到在网站上添加赞赏功能的人绝对符合以下条件:
没钱、网站名气小、渴望把网站做强做大……
诶,这不是我吗?
回归正题,今天介绍的东西还是比较有用的。
reward.js
这是一个 HTML 和 JS 混合项目,原仓库为 shelwee/reward.js。
reward.js 是一个只需一行代码即可实现网站赞赏功能的 JS 。(当然,是基于二维码实现的。)
为何开发?
目前网上有很多种基于二维码赞赏功能的实现方式,但大部分实现都需要改动网站多处地方,侵入性太强。因此就有了这个项目,至少我认为这种实现方式更优雅一些。
用法
很简单,作者介绍只有三步:下载、修改并上传、调用。
下载:下载
reward.js
或
reward.min.js
,若对速度有要求请选择后者,要便于后续操作请选择前者。后者只不过是前者的压缩版。
修改并上传:修改 js 文件中的收款码图片外链(直链)并上传到自己的服务器。
调用:根据提供的代码在 HTML 源码中按需添加即可。
reward.js Plus
这个有逼格的名字是我起的,其便是站长根据上面的项目制作的增强版。
在原版中,开发者为了省用几个文件和少一些麻烦,对于小型图片(如支付方式 Logo)进行了 Base64 编码后直接使用;对于支付方式个数,其仅给出了两个常见的:支付宝和微信支付。
依病用药,在我做的增强版中,我做了以下处理:
-
完全展开完整版中的 HTML 代码。
-
添加第三个支付方式(QQ 支付)并调节样式。
-
改用缩进方式,统一为 4 个空格为一单位,方便查阅和修改。
-
对于项目 Github 仓库,我将其翻译成了英文版。
用法
和上面的普通版一致。
调用代码(html):
<script type="text/javascript" charset="UTF-8">document.write(unescape("%3Cdiv id='reward' %3E%3C/div%3E%3Cscript src='你的 js 文件路径' type='text/javascript'%3E%3C/script%3E"));</script>
在需要的地方添加上面代码即可。
效果
会在目标处出现一个赞赏按钮(左右圆角),鼠标移至其上即可弹出图片框显示收款信息;移开便消失。
这是我运用在一个已废弃的站点上的效果。其实现在在电脑端视图的本站的底部左侧便有该按钮。
还愣啥?快给点饭呐!
资源获取
网盘:夸克网盘分享
共有 0 条评论