本文主要是介绍给你的hexo加上一个炫酷的捐赠动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
博文原地址在：我的博客
先看下效果
首先，感谢这位老哥Kaiyuan，把这两个好看的页面开源出来sponsor-page
啊~对了，还有一个的效果
接下来就开始了
首先下载仓库中的内容，目录结构应该是这样的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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;这篇关于给你的hexo加上一个炫酷的捐赠动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
