# 太长不想看

WARNING

这是一个简短的 Discuss 构建指南 (适合有开发经验的用户)

  1. 选择部署方式 服务器 OR 无服务器(Serverless)
  2. 新建package.json,填入如下内容
{ "dependencies": { "discuss": "latest" } }
1
  1. 新建index.js,填入如下内容
const discuss = require('discuss')

// 选择以什么方式运行
discuss.server() // 服务器使用 (Server)

discuss.main() // 无服务器使用 (ServerLess)
1
2
3
4
5
6
  1. 配置环境变量,填写相关的配置信息
  2. 使用nodejs执行执行index.js文件,即:node index.js
  3. 访问启动的服务地址,初始化管理员账户即可

# 服务端 (Server)

提示

如果你没有服务器(不想部署在服务器上)的话,你可以选择免费部署

初始化 npm 项目

mkdir Discuss                   # 创建目录
cd Discuss                      # 进入目录
npm init -y                     # 初始化npm
npm install discuss --save      # 安装Discuss
touch index.js .env             # 创建index.js 以及 .env(环境配置文件)
1
2
3
4
5

编辑index.js

const discuss = require('discuss')

// 选择以什么方式运行
discuss.server() // 服务器使用 (Server)

discuss.main() // 无服务器使用 (ServerLess)
1
2
3
4
5
6

编辑.env,以MongoDB数据库为例

TIP

具体如何配置其他数据库请前往.env.example (opens new window)观看相应的配置信息说明

# Discuss environment Config

# 启动的端口号(仅对服务器有用)
DISCUSS_PORT=6870

# Token 加密的密钥字符串([可选]自定义)
DISCUSS_SECRET=discuss

# 数据库连接

# 使用什么数据库
## 目前可选的数据库 [cloudbase, deta, leancloud, mongodb, mysql, postgresql, sqlite]
DISCUSS_DB_TYPE=mongodb

# ------ MongoDB ------
## 如果你使用的是mongodb官方的免费数据库
## 你可以使用连接字符串必须选择‘v2.2.12’版本的连接字符串
## 将填入D_MONGO_URL环境变量即可,下面的其它配置就不用填写,仅需填写D_MONGO_URL即可
D_MONGO_URL=
## 主机地址 默认: 127.0.0.1
D_MONGO_HOST=
## 端口 默认: 27017
D_MONGO_PORT=
## 数据库名 默认: discuss
D_MONGO_DB=
## 用户名
D_MONGO_USER=admin
## 密码
D_MONGO_PASSWORD=111111
## [可选项] 集群
D_MONGO_REPLICASET=
## [可选项] 认证源
D_MONGO_AUTHSOURCE=
## [可选项] 是否启用 SSL 连接方式
D_MONGO_SSL=
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

最后使用nodejs执行执行index.js文件,即:node index.js

# 配置管理

关于服务端的配置管理,本文仅提取部分配置项进行详细说明,其余配置仅看配置管理内的描述即可轻松理解含义

# 安全域名

  • 默认: null 允许所有域名的 POST 请求

顾名思义,仅在白名单上的域名发送的请求,服务才会做出响应,反之任何请求都将返回403状态码,GET 请求除外

如需设置多个,请使用英文逗号进行分割,如example.com,www.example.com,discuss.example.com

注意

不支持通配符*之类的语法

一旦设置了安全域名,本地的localhost127.0.0.1也将被服务端拦截,如果您需要在本地计算机使用,你需要添加上localhost127.0.0.1(包括端口号)

# 请求头优先级

用于获取用户 IP 地址,如果你使用了类似于Cloud Flare (opens new window)的 CDN 加速,那么你可能需要注意 CDN 服务商是否将 IP 地址指定到了一个新的headers.xxxx

以 Cloud Flare 举例,如果使用了 Cloud Flare CDN 那么这时的 IP 会被放到headers.cf-connecting-ip,你需要将他填入请求优先级的输入框中,多个使用英文逗号分割

注意

如果你未设置,那么服务端保存的可能全都是 Cloud Flare(CDN)的 IP,这可能会被服务端的10 分钟评论所限制

# 头像 CDN

  • 默认: https://cravatar.cn/avatar/

Cravatar (opens new window)Gravatar (opens new window) 在中国的完美替代方案,当访客请求自己的头像时,我们会按此顺序分三级匹配头像:Cravatar->Gravatar->QQ 头像,对于博客站,这平均可以为 70% 的访客提供准确的头像

如果你需要设置头像参数,可以使用${avatar}来指定头像的hash,如:https://cravatar.cn/avatar/${avatar}?s=400

# 邮件模板(管理员)

模板允许的变量: ${subject}${nick}${avatar}${content}${ip}${mail}${url}

# 邮件模板(评论者)

模板允许的变量: ${subject}${Ravatar}${Rcontent}${nick}${avatar}${content}${url}

# 客户端 (Client)

按照如下代码对您的网站进行调整,保存并部署 此时评论服务就会在你的网站上成功运行 [欢呼]🎉🎉🎉

<head>
  ...
  <!-- <script src="https://cdn.jsdelivr.net/npm/discuss@latest/dist/discuss.js"></script> -->
  <!-- 建议你使用指定版本的js,而不是上方的最新版本,因为后续如果js有更新的话,可能会出现问题 -->
  <script src="https://cdn.jsdelivr.net/npm/discuss@1.2.9/dist/discuss.js"></script>
  ...
</head>
<body>
  ...
  <div id="Discuss-Comments"></div>
  <script>
    // 初始化
    discuss.init({
      el: '#Discuss-Comments',
      serverURLs: ''
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

你也可以自定义初始化后台评论管理

TIP

例如: 你可以在你的网站上新建一个admin/index.html文件,然后填入如下信息,这时你可以在你的网站上访问https://www.xxx.com/admin即可对你的评论进行管理

例如: 当前文档的/admin路径就可以直接管理评论 https://discuss.js.org/admin (opens new window)

<head>
  ...
  <!-- <script src="https://cdn.jsdelivr.net/npm/discuss@latest/dist/discuss.admin.js"></script> -->
  <!-- 建议你使用指定版本的js,而不是上方的最新版本,因为后续如果js有更新的话,可能会出现问题 -->
  <script src="https://cdn.jsdelivr.net/npm/discuss@1.2.9/dist/discuss.admin.js"></script>
  ...
</head>
<body>
  ...
  <div id="Discuss-Comments-Admin"></div>
  <script>
    // 初始化评论管理
    discussAdmin.init({
      el: '#Discuss-Comments-Admin',
      serverURLs: ''
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

以下未标有必填项,则为可选项

# el [必填]

  • 类型: String
  • 默认: null|undefined

将评论挂载到某个 DOM 上 用于绑定DOM元素,渲染评论区

# serverURLs [必填]

  • 类型: String
  • 默认: null|undefined

用于发送请求,获取评论信息的服务端地址

# color

  • 类型: String
  • 默认: #f4645f

设置评论的主要颜色

# path

  • 类型: String
  • 默认: location.pathname

当前网页唯一标识符,用于区分不同网页,以保证能正确读取不同网页下的评论列表

提示

如需要两个网页显示同一个评论列表,则可以通过传入相同的path网页唯一标识符来实现

# lang

  • 类型: String
  • 默认: cn
  • 可选参数: ['cn', 'en']

指定显示的语言

# ph

  • 类型: String
  • 默认: 评论你的想法~

原名placeholder,评论框占位符,可自定义,默认值与lang有关系

# master

  • 类型: String
  • 默认: 博主

与如上placeholder选项相似

# stick

  • 类型: String
  • 默认: 置顶

与如上placeholder选项相似

# visitStat

  • 类型: Boolean
  • 默认: true

访问量统计,默认为true,并且自动寻找 id 为Discuss-Visitors的元素,如未找到,则取消获取访问量统计

如果需要自定义获取DOM元素,你需要调用API VisitStat

# imgLoading

  • 类型: String
  • 默认: 1像素白色base64图

评论图片懒加载,加载动画

# emotCDN

  • 类型: String
  • 默认: https://unpkg.com

自定义默认表情的 CDN 地址

举例如下(任选其一)

discuss.init({
  // baomitu (默认内置)
  emotCDN: 'https://lib.baomitu.com/discuss/1.2.9'
  // unpkg
  emotCDN: 'https://unpkg.com/discuss@1.2.9'
  // jsdelivr
  emotCDN: 'https://cdn.jsdelivr.net/npm/discuss@1.2.9'
})
1
2
3
4
5
6
7
8

WARNING

只能自定义评论自带的表情地址,如果你自定义表情,该属性无效

# emotMaps

  • 类型: Object|String
  • 默认: 内置表情

支持一个 json 类型的 url 地址(内部自动判断是否是 url 后发送请求)

如未指定值,则使用内置表情

如指定 url 则会发送请求获取表情 json 数据

如指定为Object对象,则直接使用该对象

格式如下:

提示

type 属性仅支持textimage

其中表情typeimage可以将 key 设置为htmlimg标签

{
  "OwO": {
    "type": "text",
    "items": {
      "喵星人": "( =•ω•= )m",
      "hi": "Hi~ o(* ̄▽ ̄*)ブ"
    }
  },
  "<img src='https://cdn.jsdelivr.net/gh/zhheo/Sticker-Heo@main/Sticker-100/鼓掌.png'>": {
    "type": "image",
    "items": {
      "heo-再见": "https://cdn.jsdelivr.net/gh/zhheo/Sticker-Heo@main/Sticker-100/再见.png",
      "heo-呲牙笑": "https://cdn.jsdelivr.net/gh/zhheo/Sticker-Heo@main/Sticker-100/呲牙笑.png"
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16