Cota 是一个使用Javascript语言编写的,以 sqlite 作为数据存储的小型评论系统。该系统部署简单,只需简单添加一个 js 脚本及一个 DOM 节点即可将其融入已有网页。
- 服务端: Koa + sqlite
- 管理页面: React
要想让cota服务在你自己的server上运行,至少需要以下几步操作:
- 克隆本项目到本地
- 安装项目所需要的依赖
- 生成静态资源
- 生成后台管理页面
- 创建数据库
- 启动
ps. 我使用 yarn 管理依赖包,如果你没有安装 yarn,请使用 npm 替换下列命令中所有的 yarn 关键字!
cd cota # 进入本项目根目录
yarn i:yarn # 安装server及admin所需依赖,npm需要使用npm run i:npm
yarn export:prod # 导出静态资源,测试环境下可使用yarn export:dev,将会有完整的error信息显示
yarn build # 生成管理后台页面
yarn migrate # 创建数据库,添加默认admin账号 cota-admin / cota-admin (请记得在项目部署后修改密码)
yarn start # 默认该server会启动到localhost:4444,你可以通过nginx进行反向代理提供公网访问
这样 Cota
server及静态资源就准备好了,后面还需要做最后一步操作,将评论框注入你需要评论服务的页面。
要实现评论框注入,你需要准备一个容纳评论框的DOM节点,并且该节点拥有唯一的id。(例如:<div id="cota"></div>
)
之后引入 cota.min.js
并实例化 Cota
对象,传入你准备好的容纳评论框的id即可:
<script src="http://localhost:4444/cota.min.js"></script>
<!-- 如果注入节点id为cota,则可省去el参数。具体参数配置请参考后面配置部分 -->
<script>
new Cota({
el: 'cota',
lang: 'zh_CN'
});
</script>
ps. 在创建
Cota
实例的时候,其实所有的参数都是可选,如果你的节点id就是cota的话,只需要new Cota()
即可,但配置的存在让你多了一些选择,具体的配置项请参考下面配置一节。
刷新页面,即可看到 cota 注入成功!
通过以上操作,你可以快速启动一个 cota 评论系统程序,但是为了系统的正常运行,你还需要根据需要根据你的需求修改一些配置文件:
简单来说,配置文件分为两个部分:
src/config.json
中用于设置server端表现的配置文件- 在实例化
Cota
对象时传入的options
默认克隆下来的项目是没有这个文件的,因为里面的配置都是极其隐私的部分。所以我只给出了一个 sample-config.json
文件,你需要将这份sample文件复制为 config.json
在对其进行更改即可。
打开 src/config.json
文件你可以看到几个配置项,其中 whiteList
指定了能够通过 cota 暴露的 api 访问评论资源的域名,一般来说需要设置两个,一个是 cota server 启动的域名,另一个是被注入 cota 评论系统的网页域名。
jwtSecret
字段设置的字符串,将被作为 server 生成授权 token 时的密匙,根据自己的需要设置即可。
trustThreshold
字段用于自动审核评论,当一条评论产生的时候,默认(0)是需要手动审核之后才能在评论列表中显示的,将该字段设置为任何大于0的值即打开自动信任模式,用户的前N次(你设置的值)评论还是需要你手动审核,但当被审核通过的评论数量达到设置的值时,该用户将被加入可信名单,以后该用户所有的评论都将无审核直接显示在评论列表中!
在实例化 Cota
对象的的时候,你可以传入一个对象改变其默认配置:(所有配置都不是必须的,如果你的注入节点id是cota的话)
字段 | 参数类型 | 作用 | 默认值 |
---|---|---|---|
el |
string | 设置输入框注入节点(id) | cota |
avatarMirror |
string | gravatar头像CDN | gravatar.loli.net |
defaultAvatar |
string | 用户没有自定义头像时显示的默认头像 | 'mm' |
pageSize |
number | 每页评论数 | 10 |
lang |
string | 显示语言 | en |
emailNotify |
boolean | 是否开启邮件提醒 | false |
notifyStatus |
boolean | 默认邮件提醒状态(在邮件提醒功能开启状态下,用户可自行选择是否提醒) | false |
key |
string | 本页面对应key | md5(document.location.pathname) |
url |
string | 本页面url | document.location.href |
title |
string | 本页面标题 | document.title |
lazyload |
boolean | 是否懒加载评论框 | false |
yarn build # 构建后台静态文件,静态文件将会生成到项目根目录下admin-public中
运行以上命令,在你成功部署 Cota
服务之后,可以直接通过 http://localhost:4444
访问cota提供的管理后台。默认的账号 / 密码为: cota-admin / cota-admin
如果你在使用中发现有什么逻辑 / 样式不符合你需求的地方,并且你有一定的 Javascript 语言基础,那你完全可以根据你自己的需求修改源代码。本项目主要分为三个个部分:
- 提供数据获取 / 操作 api 的 server 端 (src)
- 管理评论的 admin GUI (src/admin)
- 将评论框 + 数据注入指定网页的 js / css 资源 (src/static)
其中,GUI 和 静态资源在压缩后分别被放在了根目录下的 admin-public 和 dist 文件夹下,并通过 koa-static 提供了对应静态资源的访问。