给博客添加简易的打赏功能

ghost博客原生是不支持打赏功能的,很眼馋大佬们的捐赠,就准备找一个简单的试一下。目前只发现这一个可以成功,还比较好看的项目

附上参考原文https://www.jianshu.com/p/16a8f15c543d

不过基本上只需要关注最后一部分,“使用iframe嵌入打赏”

博主示例如下:

<iframe src="https://rawcdn.githack.com/TinyJay/donate-page/51aaf216f048b8e6d5ce01443a32be930b91869d/simple/index.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no" allowtransparency="true"></iframe>

经过测试,这个可以直接插入在ghost页面内,非常方便。
1

下面介绍具体操作

首先我们fork博主的GitHub项目

https://github.com/TinyJay/donate-page

然后clone下来

git clone https://github.com/TinyJay/donate-page.git

至少需要修改以下内容

simple/images/AliPayQR.png
//替换为自己的支付宝收款码
simple/images/WeChanQR.png
//替换为自己的微信收款码
simple/index.html
//替换GitHub链接和PayPal链接,我这里是更换为了qq的加群链接
//如果有需求还可以根据喜好替换images文件夹内的svg文件,我这里是更换了支付宝和PayPal还有GitHub等,只保留了微信的。

index.html(demo)

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Donate-Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" /><!--禁止缩放-->
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
	<!-- clipboard.js 是 JS 复制文本的库 -->
	<script src="script.js"></script>
</head>
<body style="background:transparent;">
	<a id="github" href="https://github.com/xiafeng2333/donate-page" target="_blank" class="pos-f tr3" title="Github"></a>
	<div id="DonateText" class="tr3">Donate</div>
	<ul id="donateBox" class="list pos-f tr3">
		<li id="PayPal"><a href="https://jq.qq.com/?_wv=1027&k=5LyhfBF" target="_blank" title="MISC交流群">Tencent</a></li>
		<li id="AliPay" data-footnote="点击查看支付宝收款码"><a  title="支付宝收款码">AliPay</a></li>
		<li id="WeChat" data-footnote="点击查看微信收款码"><a  title="微信收款码">WeChat</a></li>
	</ul>
	<div id="QRBox" class="pos-f left-100">
		<div id="MainBox"></div>
	</div>
</body>
</html>

替换的svg文件可以到阿里的图标库来找,都是免费的而且种类很全

https://www.iconfont.cn

注意:修改图片显示顺序、文件名等可能分别需要去js和css内修改。怕麻烦就直接把替换的文件换成和原文件一样的名字。不需要修改js和css

替换好之后

git add .
git status
git commit -m "update"//任意描述
git push -u origin master

2

push成功即可

然后我们需要使用raw.githack.com进行GitHub项目的简易部署,把你的index.html地址复制到这个网址来

http://raw.githack.com

3

推荐使用时添加左边这个链接,右边测试的时候更新有延迟,可以等稳定后再使用。

在需要的博客页面插入打赏html如下

<iframe src="https://rawcdn.githack.com/xiafeng2333/donate-page/94f404b9935e621d3d35fcc7c0f8455343da5a46/simple/index.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;transform: scale(2);"  frameborder="0" scrolling="no" allowtransparency="true"></iframe>

效果如下所示