请作者喝咖啡--sponsor-page

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

sponsor 介绍

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

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

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

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

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

1 修改

经过研究源代码，确定两种样式是独立的，他们的 js 和 css 并不相互共用，交叉使用的只是 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 ，因为这是我的主题色，纯白色太亮眼的了，和主题色一致不至于有违和感。

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

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

1
2
3
4
5

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

}

3. #drinks-qrcode

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

1
2
3

#drinks-qrcode {
	background: #F8F8F8 no-repeat center center url();
}

4. 更换图标

按这个顺序做的，会在 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://cdn.hermitlsr.top/ky/donate/image/text-new.png);
}

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

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

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

/*4*/

#drinks-qrcode {
	background: #F8F8F8 no-repeat center center url(https://cdn.hermitlsr.top/ky/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://cdn.hermitlsr.top/ky/donate/image/qqQR.png',	// 二维码路径
    'alipay_donate'	:	'https://cdn.hermitlsr.top/ky/donate/image/AliPayQR.png',	// 支付宝二维码
    'alipay_donate_link'   :   'https://qr.alipay.com/fkx03277sywmqzbvpjow76',   // 支付宝二维码上的链接，必须换成自己的连接！！！手机点击会自动跳转到支付宝。
    'wechat_donate'	:	'https://cdn.hermitlsr.top/ky/donate/image/WeChanSQ.png'
};

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

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 在编译时，这种情况提取不到 js 和 css 文件，解决方法是将他们托管到图床上。

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

1
2

<link rel="stylesheet" href="https://cdn.hermitlsr.top/ky/donate/donate.css">
<script src="https://cdn.hermitlsr.top/ky/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:
---

  

<!--more-->


![](https://cdn.hermitlsr.top/images/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 部署升级版

2 中的部署方式也是可行，只不过还是较麻烦，而且与文章主体以及下方的额外信息割裂，下面的部署方式将其直接作为 article.footer 的一部分。

在 "...\layout\_partial\main\article\article_footer.ejs" 文件的 107 行后添加如下代码：

1
2
3
4
5
6
7
8
9

if (theme.article.donate && page.donate != false) {
  el += '<section id="donate">';
  el += '<div class="header">';
  el += '<span>' + __('meta.donate') + '</span>';
  el += '<div>';
  el += '<iframe src="/donate/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no"></iframe>';
  el += '</div>';
  el += '</section>';
}

并在 _config.stellar.yml 的 article 部分，添加：

1
2

article:
  donate: true

若设置为 donate.true 则启用打赏部件，反正关闭。
效果图可见本文下方。

4 注意

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

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

参考资料

• 给博客添加捐赠小部件—sponsor-page
• drinks样式的readme.md

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

赞助博主