优雅地给网站添加『要饭』功能

前言

本文部分技术支持和项目来源均来自 Shelwee《# 如何优雅地给网站添加赞赏功能?》

相信我,能想到在网站上添加赞赏功能的人绝对符合以下条件:

没钱、网站名气小、渴望把网站做强做大……

诶,这不是我吗?

回归正题,今天介绍的东西还是比较有用的。


reward.js

这是一个 HTML 和 JS 混合项目,原仓库为 shelwee/reward.js

reward.js 是一个只需一行代码即可实现网站赞赏功能的 JS 。(当然,是基于二维码实现的。)

为何开发?

目前网上有很多种基于二维码赞赏功能的实现方式,但大部分实现都需要改动网站多处地方,侵入性太强。因此就有了这个项目,至少我认为这种实现方式更优雅一些。

用法

很简单,作者介绍只有三步:下载、修改并上传、调用。

下载:下载 reward.jsreward.min.js ,若对速度有要求请选择后者,要便于后续操作请选择前者。后者只不过是前者的压缩版。

修改并上传:修改 js 文件中的收款码图片外链(直链)并上传到自己的服务器。

调用:根据提供的代码在 HTML 源码中按需添加即可。

reward.js Plus

这个有逼格的名字是我起的,其便是站长根据上面的项目制作的增强版。

在原版中,开发者为了省用几个文件和少一些麻烦,对于小型图片(如支付方式 Logo)进行了 Base64 编码后直接使用;对于支付方式个数,其仅给出了两个常见的:支付宝和微信支付。

依病用药,在我做的增强版中,我做了以下处理:

  1. 完全展开完整版中的 HTML 代码。

  2. 添加第三个支付方式(QQ 支付)并调节样式。

  3. 改用缩进方式,统一为 4 个空格为一单位,方便查阅和修改。

  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>

在需要的地方添加上面代码即可。

效果

会在目标处出现一个赞赏按钮(左右圆角),鼠标移至其上即可弹出图片框显示收款信息;移开便消失。

效果预览

这是我运用在一个已废弃的站点上的效果。其实现在在电脑端视图的本站的底部左侧便有该按钮。

还愣啥?快给点饭呐!


资源获取

网盘:夸克网盘分享

仓库:Github | Gitee

版权声明:
作者:灰尘疾客
链接:https://www.gkcoll.xyz/462.html
来源:极客藏源
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>