发布于 

请作者喝咖啡--sponsor-page

赞赏是不可能赞赏的,只有白嫖才能勉强维持得了生活这样子。但是多一个好看的赞赏键拿来做装饰不好么?

sponsor-page 是 Kaiyuan Xie 大佬的开源项目:

作者提供了两种样式的捐赠部件,美中不足的是其提供了比特币但没有提供QQ的图标 好像也不是很重要,反正也没人打钱

kelecn 在该项目上增加了QQ图标,不过好像大概就是换了下 bitcoin.svg logo,可看参考资料。

我个人比较喜欢 drink 样式的背景,但又喜欢 sample 样式的白底彩色图标效果,就自己动动手把他们综合了一下,不过最后好像也只是换了下logo?

最后它在我站点上的效果:

1 修改

经过研究源代码,确定两种样式是独立的,他们的 jscss 并不相互共用,交叉使用的只是 images 。而仔细分析我的需求,只是展示样式的问题,并不涉及二维码的展示逻辑,所以重点在 css 的修改上。

1.1 css修改

我的需求主要在于颜色,不想让它蓝蓝的,想让它白白的,这里就直接定位到含有颜色的部分,并通过 f12 大法确定它的用处

  1. #donate-buttons

class 下的颜色是按钮的背景色,就是他让整个按钮是蓝蓝的。这里将其修改为:

1
2
3
4
#donate-buttons {
background-color: #F8F8F8;
box-shadow: 0 10px 20px 1px rgba(221, 221, 221, 0.5);
}

为什么是 #F8F8F8 ,因为这是我的主题色,纯白色太亮眼的了,和主题色一致不至于有违和感。

  1. li[id$="_donate"]::after

class 下的颜色是鼠标放在某个按钮上时,按钮上方出现的小倒三角,意味着选择的那一个。因为我并不想看到这个三角,所以直接按之前的颜色处理:

1
2
3
4
5
li[id$="_donate"]::after {
border: 5px solid #F8F8F8;
border-color: #F8F8F8 transparent transparent transparent;

}
  1. #drinks-qrcode

class 下的颜色是弹出的二维码边框颜色,同样设置为 #F8F8F8

1
2
3
#drinks-qrcode {
background: #F8F8F8 no-repeat center center url();
}
  1. 更换图标

如果你是按着我这个顺序做的,那么你会在 1. 做完后发现,图标不见了。事实上,不是不见了,而是因为默认调用的是可调色的图标,前面设置成了白色自然无法看见。这里就需要更换彩色图片。

彩色图片来自于 sample 样式中的 images ,QQ的图标我采用了参考资料中的文件,不想自己找了。

但这里我遇到一个问题就是更换完成之后还是无法显示,后来发现是缓存问题,为了稳妥,我将所有涉及的图片都放在了图床上。当然最主要的原因还是为了方便部署在博客上,所以我建议最好放在自己的图床上。以下例举需要更换的地方。

查看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*1*/
#drinks-icons {
background: no-repeat center center url(https://ky.hermitlsr.top/donate/image/text.png);
}

/*2*/
#github-box {
background: no-repeat center center url(https://ky.hermitlsr.top/donate/image/github.svg);
}

/*3*/
#paypal_donate {
background-image: url(https://ky.hermitlsr.top/donate/image/paypal.svg);
}
#qq_donate {
background-image: url(https://ky.hermitlsr.top/donate/image/qq.svg);
}
#alipay_donate{
background-image: url(https://ky.hermitlsr.top/donate/image/alipay.svg);
}

#wechat_donate{
background-image: url(https://ky.hermitlsr.top/donate/image/wechat.svg);
}

/*4*/

#drinks-qrcode {
background: #F8F8F8 no-repeat center center url(https://ky.hermitlsr.top/donate/image/WeChanSQ.png);
}

经此4步,css 部分就基本修改完了。

1.2 js修改

js 中需要修改的内容不多,主要是二维码的路径。这里也强烈建议直接放在自己的图床上:

1
2
3
4
5
6
7
8
var PayPalLink  =   "https://www.paypal.me/KaiyuanXie"; // 我不用这个所以直接没改。

var qrcodes = {
'qq_donate' : 'https://ky.hermitlsr.top/donate/image/qqQR.png', // 二维码路径
'alipay_donate' : 'https://ky.hermitlsr.top/donate/image/AliPayQR.png', // 支付宝二维码
'alipay_donate_link' : 'https://qr.alipay.com/fkx03277sywmqzbvpjow76', // 支付宝二维码上的链接,必须换成自己的连接!!!手机点击会自动跳转到支付宝。
'wechat_donate' : 'https://ky.hermitlsr.top/donate/image/WeChanSQ.png'
};

另外,你应该发现,我这里是 ‘qq_donate’ 而没有 btc_donate,是的,因为我不需要比特币,所以我把所有关于 btc 的类都改成了 qq。这个直接在 htmljscss 三个文件中搜索替换即可。

1.3 html修改

这里的修改主要是:

  1. 将图片链接替换掉
  2. li id="paypal_donate"><a href="https://www.paypal.me/KaiyuanXie" target="_blank">Paypal</a></li> 删掉,。
  3. 在顶内部添加:
1
2
3
4
---
layout: false
---

作为独立页面,便于后续使用 <iframe> 放在文章里

至此基本修改就已经完成了。本地看起来基本没有问题,剩下的就是让他能够在博客上顺利展示。

2 部署

这里我遇到的问题是,直接将 donate 复制在 source 中,发现只出现了背景图片,但点击无反应。原因在于 hexo 在编译时,这种情况提取不到 jscss 文件,我的做法是将他们托管到我的图床上。

所以我在 source/donate 里只放置了 index.html 。记得修改 index.html

1
2
<link rel="stylesheet" href="https://ky.hermitlsr.top/donate/donate.css">
<script src="https://ky.hermitlsr.top/donate/donate.js"></script>

最后在文章底部加入:

1
2
<hr>
<iframe src="/donate/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe>

就可以得到和我一样的效果。

另外,为了不要每次写文章时都粘贴一次这个代码,我建议将他直接放在 scaffolds/post.md 中:

看博主的模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }}
date: {{ date }}
mathjax: true
comments: false
tags:
categories:
---

&emsp;&emsp;

<!--more-->


![](https://doc.hermitlsr.top/post/line.gif)
<iframe src="/donate/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe>

3 注意

  1. 嫌麻烦,可直接使用原作的部件,其实一样美滋滋。但无论如何,只要用了请去给原作 star
  2. 一定要将图片资源放在没有防盗链的图床上,否则不显示;jscss 托管到 github 或者 gitee ,当然有服务器放服务器最好。
  3. 二维码可以用草料二维码 ,先从app下载官方二维码再解码,再生成二维码。当然我知道你们的办法更多。
  4. 喜欢我改后的样式的可以直接下载我的 jscss 文件,前文有。
  5. 最后,记得请我喝咖啡

最后真诚的感谢原作 Kaiyuan Xie ,这个部件是真好看。