给你的hexo加上一个炫酷的捐赠动画

本文主要是介绍给你的hexo加上一个炫酷的捐赠动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

博文原地址在：我的博客

先看下效果

在这里插入图片描述

首先，感谢这位老哥Kaiyuan，把这两个好看的页面开源出来sponsor-page

啊~对了，还有一个的效果

donate

接下来就开始了

首先下载仓库中的内容，目录结构应该是这样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovvc6Dat-1585625994897)(https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/pic/illustration/donate2.jpg)]

有两种捐赠页面simple和drinks

我们讲一下drinks修改，simple的也差不多

第一种使用方法：

按照开发者说的使用

1、直接 Fork 之后需要修改以下内容为你的账户

/script.js:14 #Github 项目链接

/script.js:15 #PayPal.me 链接

/script.js 18 - 20 #对应二维码

2、使用 iframe 嵌入页面的代码，高度至少 240px，宽度至少 310px！

<iframe src="https://用户名.github.io/sponsor-page/drinks/index.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>

接着到GitHub找到这个仓库，开启GitHub pages服务(source选择master-branch)

这种方法非常方便，想在哪使用直接加入这串代码就行

可是万一这个仓库删掉了捐赠页面也就不见了

我们想要的是让hexo集成这个页面

第二种方法：

1、将下载的代码放入到博客中

先将style.css放到主题source目录下的css目录下，修改名字为donate.css

在<head>标签中导入

<link rel="stylesheet" href="/css/donate.css">

在主题layout目录下的_partial目录中新建donate.ejs，将index.html中<body>中的代码复制进来，注释掉<li id="btc_donate" class="donate-button">Bitcoin</li>这一行，当然，要是你需要的话留着也行

接着将script.js中代码复制到donate.ejs中，使用<script>标签框住

2、修改图片和链接

主要是修改以下代码：

链接

var GithubLink  =   "https://github.com/wallleap/sponsor-page/";
var PayPalLink  =   "https://www.paypal.me/wallleap";

二维码

var qrcodes = {
//     'btc_donate'	:	'images/BTCQR.png',	// 二维码路径'alipay_donate'	:	'images/AliPayQR.png',	// 支付宝二维码
//     'alipay_donate_link'   :   'https://qr.alipay.com/3272611934645308',   // 支付宝二维码上的链接，必须换成自己的连接！！！手机点击会自动跳转到支付宝。'wechat_donate'	:	'images/WeChanSQ.png'
};

3、修改css

去掉如下代码

body {margin: 0;padding: 0;/* background: #5CC9F5; */line-height: 1.6rem;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
img {border-width: 0px;}
a{color: #000;text-decoration: none;outline:none;border:none;
}
.list, .list li, .list-left li {list-style: none;list-style-type: none;margin: 0px;padding: 0px;
}
.pos-f {position: fixed;
}

现在页面中已经能看到这个捐赠的了

但是它是固定

我们还需要改下

#drinks-box {width: 320px;height: 240px;margin: 0 auto;text-align: center;/* left: calc(50% - 160px);top: calc(50% - 120px);position: fixed; */position: relative;