给博客添加捐赠小部件—sponsor-page

kelecn

美化

发布于：2021年1月20日

字数：958字

时长：4分钟

次浏览

简介：sponsor-page是一个开源的捐赠按钮样式，可以用于美化我们的博客。

说在前面，捐赠是不可能捐赠的

只有白嫖才能维持得了生活，捐赠按钮主要还是起一个美化的效果。

参考项目：

sponsor-page

https://github.com/Kaiyuan/sponsor-page

该项目主要主要有四种捐赠渠道：

PayPal
比特币
支付宝
微信支付

我考虑到，比特币在国内使用有限，就把比特币换成了QQ支付，有需要的朋友也可以直接用我的。

sponsor-page
https://github.com/kelecn/sponsor-page

一、捐赠按钮的修改

首先，直接把对应项目fork到自己的Github，需要比特币按钮可以选择原版的sponsor-page，需要QQ支付按钮可以选择我修改后的sponsor-page，如果有其他支付方式需求，自己按需修改即可。
第二步，二维码美化，相信大家的路子肯定很多，欢迎在评论区推荐一下，我这边就给大家推荐一个常用的：
草料二维码
https://cli.im/

还有PayPal链接、支付宝链接，各位去对应平台获取即可。
第三步，当然就是修改自己对应的支付二维码图片（sponsor-page\simple\images）、PayPal（sponsor-page\simple\index.html和sponsor-page\drinks\index.html）链接和支付宝（sponsor-page\drinks\script.js）链接啦，你可以直接在Github上传和修改相应文件即可，也可以克隆到本地，修改后再一起推送到Github。

二、捐赠按钮的使用（部署到Github）

直接开启对应项目的GitHub Pages即可，访问。（博客要是Github+Coding双线部署可能会出现套娃现象，国内线路访问捐赠页面，不会去访问Github Pages，会访问国内的404页面）
下面会介绍对应的解决方法——将捐赠按钮页面部署到博客本地（无论是国内还是国外访问都会正常）

三、捐赠按钮的使用（部署到博客）

首先，定位Volantis主题的捐赠布局。（themes\volantis\layout\_partial\article.ejs）

修改article.ejs文件。

</blockquote>
</div>
//上面用于定位，下面为新添加的，对应修改src即可，要是已经部署到Github Pages，直接使用对应链接即可，要是想放在博客项目中，可往下看
<div class='donate'>
<iframe src="https://kelecn.top/donate/drinks" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>
</div>

部署到博客项目中（本地）
- 直接将刚才修改好的Github项目克隆到本地，放到博客项目的source中，文件夹命名随意（一般为donate，不要改成sponsor-page以防与前面的开启Github Pages后发生冲突）
- 在_config.yml中修改
  1
  2
  3
  # Directory
  ...
  skip_render: "donate/**" #hexo会跳过donate文件夹编译，直接把donate文件夹搬移到public
- 则对应的捐赠按钮访问链接为
  1
  2
  3
  4
  //1、域名/donate/drinks
  https://kelecn.top/donate/drinks
  //2、域名/donate/simple
  https://kelecn.top/donate/simple
捐赠按钮展示（可以用任意Html页面展示）

simple页面

//simple对应引用代码
   </div>
   <iframe src="https://kelecn.top/donate/simple/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>
   </div>

drinks页面

//drinks对应引用代码
   </div>
   <iframe src="https://kelecn.top/donate/drinks/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>
   </div>