前言

在此折腾说说的起因:原先已经用腾讯云和木木bber配备好了说说功能,但由于从今年8月份起,腾讯云CloudBase不再免费开放,月租价格高昂,只是简单配置说说的后端功能肯定是不划算的,并且也违背了hexo博客的初衷。且官方教程使用的LeanCloud国际版目前已不再对国内开放,国内版的LeanCloud需要有域名(需备案)才可使用,更难以接受的是artitalk的说说界面非常丑陋。

在查阅诸多教程之后,笔者只发现小康博客的说说功能完全能满足所有需求:完全免费且前端界面非常精美,但介于整个配置文档十分简略并且还有一些错误,对初上手的人极其不友好,于是写这篇博客来对其文档内容就行补充和排坑。

读完此篇教程你将拥有:

  • 同小康博客一样的说说界面 小康说说界面
  • 电脑、苹果手机和安卓手机三种便捷发说说的方式

本篇教程参考:小康说说配置文档

配置数据库

MongoDB云服务官网

按照教程文档一步步配置,建好云端数据库后把连接数据库的代码记下来

这一串代码是vercel api项目与数据库连接的关键

在vercel上部署与数据库相连的api

部署过程见文档 部署项目

主要注意的是环境变量不能弄错:

是否必填 名称 说明 示例
DATABASE_URL mongoDB链接字符串 mongodb+srv://Arui:<password>@cluster0.snpi9gi.mongodb.net/?retryWrites=true&w=majority
DATABASE_USER mongoDB用户名 Arui
DATABASE_PASSWORD mongoDB用户密码 用户名密码
SECRETKEY jwt加密字符串 字母数字均可

DATABASE_URL填写上一步获得的数据库的连接代码,DATABASE_USERDATABASE_PASSWORD是建数据库时候的用户名和密码,SECRETKEY是一种加密方式,我的理解是根据你所填写的东西进行密码的加密,故这里可以任意填写

若环境变量配置不成功,则部署后点击生成的链接会出现:

部署成功后会出现数个域名,推荐用下图所显示的格式:

即该api部署的域名kkapi-open-czrui99.vercel.app,浏览器直接进入的话会提示404,需要进行初始化,也就是在浏览器中输入https://kkapi-open-czrui99.vercel.app/api/user/init?userName=你自己设置账号,初始密码均为123456

记住这个初始化的账号和密码是后面管理系统登录的账号和密码

初始化后,在数据库中会创建一个test的数据库,里面有四张表,在MongoDB中可以看到

**所有数据均存放在这四张表中,**注意kkaip_user_list中可以手动加上头像和昵称信息

部署管理后台

部署过程见 kkapi后台配置

fork kkadmin项目

注意fork的时候一定要包含其他分支,取消那个只包含master分支的选项!!

配置环境变量

是否必填 名称 说明 示例
VITE_GLOB_API_URL vercel或者服务器部署的接口地址 https://kkapi-open-czrui99.vercel.app
VITE_GLOB_UPLOAD_URL lsky文件上传地址 https://7bu.top/api/upload
VITE_GLOB_UPLOAD_TOKEN lsky上传所需要token xxxxxx

VITE_GLOB_API_URL:是前面部署完kkapi后出现的那个域名,注意一定是和我这个形式类似的,不要选成其他接口地址了,另外两个变量是七不图床的接口地址和token,个人感觉配置错了不影响部署,这个是默认放图片的图床,因为我并不会把图片存这里面,所有没怎么仔细配置

构建Github Actions

要想触发actions的构建,必须在仓库中任意编辑一次文件,然后慢慢等待构建完成即可

后续操作

  • 在 vercel 中导入项目
  • 修改部署分支为 vercel
  • 修改 Production 分支为 vercel
  • 构建完成后即可打开网址,测试是否可以正常使用

这是系统管理端网址,这构建出来的网站页面内可以新增、删除每一条说说,并且能够建立说说的便签,所有数据均可在MongoDB中查看得到

注:本文省略了文档中GitHub相关操作这一章节内容是因为Ispeak发送的说说有三种类型:登录可见、公开可见和仅作者可见。此章节内容是通过Github作为一键认证来实现此功能,目前我的想法是避免配置麻烦,全部设置公开可见,也就不需要再研究这一章内容了。

博客说说前端配置

同其他类型的说说配置一样,在使用hexo new page ispeaker创建说说页面后得到index.md文件,文件内填入下面配置:

{% note success %}
说说内容来自 @黎明の守望者 的自言自语。🤪🤪
{% endnote %}
<div id="tip" style="text-align:center;">ipseak加载中</div>
<div id="ispeak"></div>
<link
rel="stylesheet"
href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ispeak@4.3.2/style.css"
/>

<style>
#article-container .D-avatar {
margin: 0 10px 0 0;
}
.D-footer {
display: none;
}
</style>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<script src="https://cdn1.tianli0.top/npm/discuss@0.2.2/dist/Discuss.js"></script>
<script src="https://cdn1.tianli0.top/npm/ispeak@4.3.2/ispeak.umd.js"></script>
<script>
var head = document.getElementsByTagName('head')[0]
var meta = document.createElement('meta')
meta.name = 'referrer'
meta.content = 'no-referrer'
head.appendChild(meta)
if (ispeak) {
ispeak
.init({
el: '#ispeak',
api: 'https://kkapi-open-czrui99.vercel.app/',
author: '你自己的id(管理系统中个人信息的id)',
pageSize: 10,
loading_img: 'https://czrui99.oss-cn-chengdu.aliyuncs.com/loading.gif',
initCommentName: 'Discuss',
initCommentOptions: {
serverURLs: 'https://kkdiscuss.vercel.app/'
}
})
.then(function () {
console.log('ispeak 加载完成')
document.getElementById('tip').style.display = 'none'
})
} else {
document.getElementById('tip').innerHTML = 'ipseak依赖加载失败!'
}
</script>

注:按照原文档中的配置后会出现时间无法显示的bug

此bug原博主已经修复,只是文档中尚未更新,只要把引入的css和js文件换成最新的版本即可!

发送说说的多种方式

原文档中提到了网页端发送、后台发送和IOS快捷指令发送三种方式,具体配置不做赘述。这里我自己参考原先的说说发送方式配置了安卓手机的快捷发送方式。

发送说说的原理

参照 网页端说说发送的流程,其实要想发送说说就是向管理后台发送post请求即可,想通这一点就可以用熟练的python先简单模拟下发送说说的过程

发送说说需要提供的参数:

  • token
  • userId 管理界面中基础设置中的用户Id
  • type 类型 0全部人可见 1仅登录可见 2仅自己可见
  • showComment 展示评论可被评论 0不可以被评论 1可以被评论
  • content
  • tag 标签为必填项目
  • title 选填

构建post请求:

import requests
import json

url = 'https://kkapi-open-czrui99.vercel.app/api/ispeak/addByToken'
payload = {
"token": "***",
"userId": "***",
"type": "0",
"showComment": "1",
"tag": "62f49f63381a8be9bdce6cf5",
"title": "test",
"content": "my phone test"

}
headers = {
"user-agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36",
"content-type": "application/json",
}
response = requests.post(url=url, data=json.dumps(payload), headers = headers)
print(response)

标签id的获取除了按照文档所写那样获取,也可直接在MongoDB数据库中找每个标签对应的id

我建立的标签

手机捷径发送说说

从 Github 下载安装这款 “HTTP 快捷方式” apk,安装后继续下文操作

点击安装应用

具体需要设置这三个参数:

  1. 设置请求头

  1. 设置响应体

注意所有定义的变量都要有一个双引号包裹"",否则上传错误

特别要注意的是在编辑变量content时要勾选使用json编码,否则一旦上传一些mardown语法的文本时会出现上传错误!