这是一个vuepress的打赏插件,借鉴于开源项目Kaiyuan/sponsor-page。由于开源项目是基于jQuery来实现动画效果和DOM操作的,为了减轻插件依赖,在原开源项目的基础上简单重构了一下,将jQuery替换成Vue。
在配置文件(.vuepress/config.js
)添加如下代码,选择Babel 式或对象式,例子如下。
module.exports = {
plugins: [
[
'vuepress-plugin-sponsor',
{
theme: 'simple',
alipay: '/sponsor-qrcode/qrcode-alipay.png',
wechat: '/sponsor-qrcode/qrcode-wechat.png',
qq: '/sponsor-qrcode/qrcode-qq.png',
paypal: 'https://www.paypal.me/yokefellow',
duration: 2000
}
]
]
}
module.exports = {
plugins: {
'vuepress-plugin-sponsor': {
theme: 'simple',
alipay: '/sponsor-qrcode/qrcode-alipay.png',
wechat: '/sponsor-qrcode/qrcode-wechat.png',
qq: '/sponsor-qrcode/qrcode-qq.png',
paypal: 'https://www.paypal.me/yokefellow',
duration: 2000
}
}
}
Name | Type | Default | Description |
---|---|---|---|
theme | String | simple | 插件主题(simple / drinks) |
alipay | String | null | 支付宝收款码的图片路径 |
String | null | 微信收款码的图片路径 | |
String | null | QQ收款码的图片路径 | |
paypal | String | null | PayPal 收款地址 |
duration | Number | 1500 | 当收款选项为null时,点击选项后弹出的消息显示时间(ms) |
- 小小的建议:添加支付宝/微信/QQ等收款码时,建议裁剪为正方形并放在public目录下
在需要显示打赏插件的页面(.md)中设置变量
---
showSponsor: true
---