# Hexo-Donate
**Repository Path**: spark-store-project/Hexo-Donate
## Basic Information
- **Project Name**: Hexo-Donate
- **Description**: github拉来的捐赠面板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-01
- **Last Updated**: 2024-11-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Hexo-Donate
> 本文档内容已于2020.09.11更新
❤打赏系统;打赏作者并填写打赏信息后可展示在打赏列表中;
GitHub项目地址:https://github.com/xingjiahui/Hexo-Donate
# 写在前面
1. 作者是大二软工学生,在 `代码规范` 、`系统强壮性` 等方面肯定存在欠缺,但也在努力提升自己。
2. 自己的 [个人博客](https://plushine.cn) 搭建好后,又用之前学的 Web前端知识写了打赏页面,思路是:
给 [IamZLT](https://www.iamzlt.com/) 体验后,也是觉得不太友善(从 `填写问卷` 到看到 `自己的打赏信息` 需要等待的时间太长)
决定改版,从确定思路到验证思路可行性,再从测试版发布到逐渐功能完善差不多一周的时间,最终有了此打赏系统。
新版本思路:
3. 系统用到的 `数据库`、`PHP` 等方面知识我还是个 `小白`,但能凭自己能力把它 `实现出来` 就已经 `很满意` 了。
4. 问题或不足欢迎开 [issues](https://github.com/xingjiahui/Hexo-Donate/issues) 或到 [XJHui's Blog](https://plushine.cn) 留言。
## 关于系统
理论上不管你是什么博客框架,只要有一个空白页面就能安排上...
打赏列表`demo`:[https://plushine.cn/donate](https://plushine.cn/donate)
问卷页面`demo`:[https://donate.plushine.cn](https://donate.plushine.cn)
后台管理暂时需要在phpMyAdmin中操作,如有必要以后可以添加 `管理员页面`
## 已支持的功能
1. 打赏列表可统计 `总打赏人数` 、`打赏金额`
2. 不同打赏方式字体 `显示颜色` 不同
3. 填写打赏问卷并成功上传,可在打赏列表中 `显示` 填写的信息
4. 数据上传成功后,博主会收到 `QQ消息` 提醒
## 待更新内容
1. 区分`已核实`、`未核实`金额(在做)
2. 丰富 `QQ消息` 提醒内容(在做)
3. 接入`微信`推送(未开始)
4. 使用github action替代虚拟主机(未开始)
5. 使用官方接口,实现 `自动` 审核(放弃)
## 系统界面图
1. 打赏列表:
2. 问卷页面:
3. 操作GIF实录:
## 安装系统要求
1. 虚拟主机(有教程(免费))
2. 准备页面、域名:
- 显示打赏列表的页面
- 打赏问卷页面域名(二级域名即可,并为其申请证书)
# 使用该系统
> 教程中的虚拟主机会定期维护,维护前我会发布在 [博主动态](https://plushine.cn/log/) 页面
## 虚拟主机
> 因为爱网云更换了官网框架,但购买免费主机步骤相似
购买教程在这篇 [文章]([https://plushine.cn/38834.html#%E8%99%9A%E6%8B%9F%E4%B8%BB%E6%9C%BA](https://plushine.cn/38834.html#虚拟主机)) 已经写过,不在赘述!
## 下载并上传
1. 到 [项目页](https://github.com/xingjiahui/Hexo-Donate) 选择 `clone or download` 选择 `Download ZIP`:
2. 在虚拟主机 `控制面板` 选择 `在线文件管理器` 并进入 `www` 目录下:
解压后如图:
框选出的 `文件/文件夹` 可删除。
## 导入数据库
点击 `donate_info.sql` 文件后的 `导入` ,提示输入 `数据库密码` :
数据库密码在下图位置,复制后填入上图位置:
填入密码,点击导入即可:
注意:
- 导入后若非上图结果,请检查一下填写的 `数据库密码` 是否正确
- 为了便于测试,导入的数据库中自带了两条数据:
测试结束后,可自行删除!
## 搭建问卷网站
其实,将项目文件导入后,网站已经搭建完成:
但虚拟主机自带的域名为(http),不能满足我们的需要,因此需要自定义域名(并开启https)!
## 自定义域名
1. 登录主机面板首页点击 `域名绑定`,并按下图操作:
2. 域名解析记录添加方法如下图:
3. 申请ssl证书:可以在域名注册商那里申请,也可以自行百度(证书免费,不要去付费购买)
4. 绑定ssl证书:
- 将申请的ssl证书下载并解压(后缀必须是pem和key,否则代表下载的类型不对):
- 回到面板首页,点击SSL证书,按下图操作:
## 配置虚拟主机
> 面板首页中点击 '在线文件' 并进入www目录,完成下面的操作
1. 配置 `getJsonData.php`
点击 `编辑` :
找到下图框选出的位置:
还记得 `主机信息` 么,将对应的信息替换。
2. 配置 `regist.php`
点击 `编辑`,找到下图框选出的位置:
下图位置也要修改:
3. 测试数据库是否配置成功
访问上面那个域名,填写上信息:
上传,判断是否配置成功:
注意:只要是提示 `错误/警告` 一定是操作问题,认真检查。
4. 检查数据导出是否正常:
浏览器访问:`域名/getJsonData.php`
查看能否导出数据库内容:
目前为止,`打赏页面 ` 和 `数据库` 已经配置好了,最后就是在 `前端` 把数据库中的数据展现出来。
## 编辑前端页面
1. fork [Hexo-Donate](https://github.com/xingjiahui/Hexo-Donate) 这个项目(喜欢就赏个star吧):
2. fork后,在自己仓库中的Hexo-Donate项目中编辑donateJS.js文件
点击下图位置可以在线修改文件:
修改内容为:
注意:域名一定是完整的(包含https)。
3. 编辑下面的代码并粘贴到前面准备的空白页面:
> Hexo框架下无论post(博客)还是page(页面)都是`markdown`格式,但`markdown`兼容`html`提供了很大的便利性。
修改下图位置代码:
粘贴到空白页面(markdown/html均可):
```html
截至 nowDate,共收到来自 personNum位小伙伴的打赏,金额为 sumDonate 元!
用户名 | 打赏方式 | 打赏金额 | 是否核实 |
---|