本文章最初发表在XJHui’s Blog,未经允许,任何人禁止转载!
为使您获得最好的阅读体验,强烈建议您点击 这里 前往 XJHui’s Blog 查看!
Hexo-Donate
本文档内容已于2020.09.11更新
❤打赏系统;打赏作者并填写打赏信息后可展示在打赏列表中;
GitHub项目地址:https://github.com/xingjiahui/Hexo-Donate
写在前面
作者是大二软工学生,在
代码规范
、系统强壮性
等方面肯定存在欠缺,但也在努力提升自己。自己的 个人博客 搭建好后,又用之前学的 Web前端知识写了打赏页面,思路是:
给 IamZLT 体验后,也是觉得不太友善(从
填写问卷
到看到自己的打赏信息
需要等待的时间太长)决定改版,从确定思路到验证思路可行性,再从测试版发布到逐渐功能完善差不多一周的时间,最终有了此打赏系统。
新版本思路:
系统用到的
数据库
、PHP
等方面知识我还是个小白
,但能凭自己能力把它实现出来
就已经很满意
了。问题或不足欢迎开 issues 或到 XJHui’s Blog 留言。
关于系统
理论上不管你是什么博客框架,只要有一个空白页面就能安排上…
打赏列表demo
:https://plushine.cn/donate
问卷页面demo
:https://donate.plushine.cn
后台管理暂时需要在phpMyAdmin中操作,如有必要以后可以添加 管理员页面
已支持的功能
- 打赏列表可统计
总打赏人数
、打赏金额
- 不同打赏方式字体
显示颜色
不同 - 填写打赏问卷并成功上传,可在打赏列表中
显示
填写的信息 - 数据上传成功后,博主会收到
QQ消息
提醒
待更新内容
- 区分
已核实
、未核实
金额(在做) - 丰富
QQ消息
提醒内容(在做) - 接入
微信
推送(未开始) - 使用github action替代虚拟主机(未开始)
- 使用官方接口,实现
自动
审核(放弃)
系统界面图
打赏列表:
问卷页面:
操作GIF实录:
安装系统要求
虚拟主机(有教程(免费))
准备页面、域名:
显示打赏列表的页面
打赏问卷页面域名(二级域名即可,并为其申请证书)
使用该系统
教程中的虚拟主机会定期维护,维护前我会发布在 博主动态 页面
虚拟主机
因为爱网云更换了官网框架,但购买免费主机步骤相似
购买教程在这篇 文章 已经写过,不在赘述!
下载并上传
到 项目页 选择
clone or download
选择Download ZIP
:在虚拟主机
控制面板
选择在线文件管理器
并进入www
目录下:解压后如图:
框选出的
文件/文件夹
可删除。
导入数据库
点击 donate_info.sql
文件后的 导入
,提示输入 数据库密码
:
数据库密码在下图位置,复制后填入上图位置:
填入密码,点击导入即可:
注意:
导入后若非上图结果,请检查一下填写的
数据库密码
是否正确为了便于测试,导入的数据库中自带了两条数据:
测试结束后,可自行删除!
搭建问卷网站
其实,将项目文件导入后,网站已经搭建完成:
但虚拟主机自带的域名为(http),不能满足我们的需要,因此需要自定义域名(并开启https)!
自定义域名
登录主机面板首页点击
域名绑定
,并按下图操作:域名解析记录添加方法如下图:
申请ssl证书:可以在域名注册商那里申请,也可以自行百度(证书免费,不要去付费购买)
绑定ssl证书:
将申请的ssl证书下载并解压(后缀必须是pem和key,否则代表下载的类型不对):
回到面板首页,点击SSL证书,按下图操作:
配置虚拟主机
面板首页中点击 ‘在线文件’ 并进入www目录,完成下面的操作
配置
getJsonData.php
点击
编辑
:找到下图框选出的位置:
还记得
主机信息
么,将对应的信息替换。配置
regist.php
点击
编辑
,找到下图框选出的位置:下图位置也要修改:
测试数据库是否配置成功
访问上面那个域名,填写上信息:
上传,判断是否配置成功:
注意:只要是提示
错误/警告
一定是操作问题,认真检查。检查数据导出是否正常:
浏览器访问:
域名/getJsonData.php
查看能否导出数据库内容:
目前为止,打赏页面
和 数据库
已经配置好了,最后就是在 前端
把数据库中的数据展现出来。
编辑前端页面
fork Hexo-Donate 这个项目(喜欢就赏个star吧):
fork后,在自己仓库中的Hexo-Donate项目中编辑donateJS.js文件
点击下图位置可以在线修改文件:
修改内容为:
注意:域名一定是完整的(包含https)。
编辑下面的代码并粘贴到前面准备的空白页面:
Hexo框架下无论post(博客)还是page(页面)都是
markdown
格式,但markdown
兼容html
提供了很大的便利性。修改下图位置代码:
粘贴到空白页面(markdown/html均可):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/custom.min.css">
<p>截至 <span class="inline-tag red">nowDate</span>,共收到来自 <span class="inline-tag red">personNum</span>位小伙伴的打赏,金额为
<span class="inline-tag red">sumDonate</span> 元!</p>
<table>
<thead>
<tr>
<th align="center">用户名</th>
<th align="center">打赏方式</th>
<th align="center">打赏金额</th>
<th align="center">是否核实</th>
</tr>
</thead>
</table>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/改成你的github用户名/Hexo-donate@master/donateJS.js"></script>注意:
- 上面代码中引用css不符合规范,但暂时没有找到替代的方法。
- 粘贴该代码后,不要在其前面添加任何内容,否则会显示失败(已知bug,下版本更新)
检查前端页面是否能够正常显示数据:
提醒功能
到 Qmsg酱 这里登陆并选择一个
Qmsg酱小姐姐
:添加一个QQ号:
注意:记得要添加小姐姐为好友呀,不然怎么给你发消息。
点击
文档
,用接口地址替换下面代码中的接口地址
:1
echo '<script>function Qmsg(){var xhr=new XMLHttpRequest();url="接口地址?msg=收到新的打赏啦!";url=encodeURI(url);xhr.open("GET",url,true);xhr.send()}Qmsg();</script>';
在
www
目录下编辑regist.php
文件,将上面的代码粘贴在下图位置:
后期使用
填写打赏问卷后,点击
返回打赏列表
会跳转到作者的打赏列表:想修改为自己的,可以修改虚拟主机
www
目录下的index.html
文件:后期维护:
当有人打赏后,根据填写的打赏方式去账户看有没有到账。
收到打赏:将数据库中
donate_confirm
字段修改为YES
未收到打赏:在数据库中将该记录删除
至此, Hexo-Donate
打赏系统全部安装完成!
感谢
不足之处,欢迎留言,会及时回复,及时更正!
创作不易,感谢支持!