前言

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

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

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

诶，这不是我吗？

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

---

reward.js

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

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

为何开发？

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

用法

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

下载：下载 reward.js 或 reward.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