@ -1,7 +1,6 @@
# DisqusJS
> Alternative Disqus - Render comment component using Disqus API< br >
> Disqus 替代方案：使用 Disqus API 渲染评论列表
> 超轻量级的「评论基础模式」实现：使用 Disqus API 渲染评论列表
[](https://www.npmjs.com/package/disqusjs)
[](https://skk.moe)
@ -19,8 +18,7 @@
## 功能
- 展示评论列表
- 自动判断访客的 DISQUS 可用性选择不同模式
- 自动判断访客的 DISQUS 可用性选择「评论基础模式」或「」
## Demo
@ -31,7 +29,9 @@
### 安装
首先下载 [经过编译和压缩的 DisqusJS 相关文件 ](https://github.com/SukkaW/DisqusJS/tree/master/dist )，在你需要安装 DisqusJS 的页面的 `</head>` 之前引入 DisqusJS 的 css、在 `</body>` 之前引入 Disqus 的 JS：
#### 直接引入
首先下载 [经过编译和压缩的 DisqusJS 相关文件 ](https://github.com/SukkaW/DisqusJS/tree/master/dist )，在你需要安装 DisqusJS 的页面的 `</head>` 之前引入 DisqusJS 的 css， ：
```html
< link rel = "stylesheet" href = "disqusjs.css" >
@ -45,33 +45,53 @@
```html
<!-- Unpkg -->
< link rel = "stylesheet" href = "https://unpkg.com/disqusjs@ 0.2.4 /dist/disqusjs.css">
< script src = "https://unpkg.com/disqusjs@ 0.2.4 /dist/disqus.js"> < / script >
< link rel = "stylesheet" href = "https://unpkg.com/disqusjs@ 1. 0.0-rc- 2/dist/disqusjs.css">
< script src = "https://unpkg.com/disqusjs@ 1. 0.0-rc- 2/dist/disqus.js"> < / script >
<!-- jsDelivr -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/disqusjs@0.2.4/dist/disqusjs.css" >
< script src = "https://cdn.jsdelivr.net/npm/disqusjs@0.2.4/dist/disqus.js" > < / script >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/disqusjs@1.0.0-rc-2/dist/disqusjs.css" >
< script src = "https://cdn.jsdelivr.net/npm/disqusjs@1.0.0-rc-2/dist/disqus.js" > < / script >
```
#### 从 NPM 安装
你可以轻松将 DisqusJS 引入你现有的项目：
```bash
npm i --save gitalk
```
在需要显示评论的地方插入下述代码：
```
import 'disqusjs/dist/disqusjs.css'
import DisqusJS from 'disqusjs'
```
### 使用
创建一个 DisqusJS 的容器：
```html
< div id = "disqus_thread" > < / div >
```
使用下述代码初始化一个 DisqusJS 实例，注意初始化需在 DisqusJS 加载完成后执行：
```html
< script >
var disqusjs = [];
disqusjs.config = {
var dsqjs = new DisqusJS({
shortname: '',
siteName: '',
identifier: '',
url: '',
api: '',
apikey: '',
admin: '',
adminLabel: ''
};
}) ;
< / script >
```
完成上述步骤后， ，
完成上述步骤后， 在您的站点 安装好了，但是你现在还不能使用它。要使用 DisqusJS，
### 配置 Disqus Application
@ -89,53 +109,47 @@ disqusjs.config = {
### 配置 DisqusJS 参数
```
disqusjs.config {}
```
**shortname**
**shortname** `{string}`
- 你的 Disqus Forum 的 shortname， Disqus Admin - Settings - General - Shortname ](https://disqus.com/admin/settings/general/ ) 获取你的 shortname
- {String}
- ** 必填**，无默认值
- ** 必须**，无默认值
**identifier**
**siteName** `{string}`
- 你的页面的 identifier，
- {String}
- ** 必填**，无默认值
- 你站点的名称，将会显示在「评论基础模式」的 header 中；该配置应该和 [Disqus Admin - Settings - General - Website Name ](https://disqus.com/admin/settings/general/ ) 一致
- 非必须，无默认值
**url**
**identifier** `{string}`
- 你的页面的 URL，
- {String}
- ** 必填**，无默认值
- 当前页面的 identifier，
- ** 建议**，默认值为 `document.location.origin + document.location.pathname + document.location.search`
**api**
**url** `{string}`
- DisqusJS 请求的 API Endpoint， `https://disqus.com/api/` 或者使用我搭建的公共 Disqus API 反代：`https://disqus.skk.moe/disqus/`
- {String}
- ** 必填**，无默认值
- 当前页面的 URL，
- ** 建议**，默认值为 `document.location.origin + document.location.pathname + document.location.search`
**api** `{string}`
- DisqusJS 请求的 API Endpoint， `https://disqus.com/api/` ，或我搭建的 Disqus API 反代 Endpoint `https://disqus.skk.moe/disqus/`
- 非必须，默认值为 `https://disqus.skk.moe/disqus/`
**apikey**
**apikey** `{string}`
- DisqusJS 向 API 发起请求时使用的 API Key，
- {String}
- ** 必填**，无默认值
以下配置和 Disqus Moderator Badge 相关
以下配置和 Disqus Moderator Badge 相关，缺少一个都不会显示 Badge
**admin**
**admin** `{string}`
- 你的站点的 Disqus Moderator 的用户名（也就是你的用户名）
- {String}
- ** 必填**，不使用 Badge 时配置为 `''`
- 你的站点的 Disqus Moderator 的用户名（也就是你的用户名）。你可以在 [Disqus - Settings - Account - Username ](https://disqus.com/home/settings/account/ ) 获取你的 Username
- 非必须，无默认值
**adminLabel**
**adminLabel** `{string}`
- 你想显示在 Disqus Moderator Badge 中的文字。该配置应和 [Disqus Admin - Settings - Community - Moderator Badge Text ](https://disqus.com/admin/settings/community/ ) 相同
- {String}
- ** 必填**，不使用 Badge 时配置为 `''`
- 非必须，无默认值
---
@ -145,12 +159,11 @@ disqusjs.config {}
- nocomment 没有评论时的提示语（对应 Disqus Admin - Settings - Community - Comment Count Link - Zero comments）
- commentPolicyURL 站点评论政策 URL（ ）
- commentPolicyText 站点评论政策 URL（ ）
- noavatar 默认头像的图片 URL（ ）
- newcomment 是否允许添加新评论（目前增加评论功能尚未实现）
## 注意
- ~~DisqusJS 尚不支持初始化一个新页面，在新创建了页面以后需要先使用原版 Disqus 访问一次该页面完成初始化。~~
- DisqusJS 如果检测到当前页面没有初始化、会提示是否切换到 Disqus 完整模式进行初始化。
- DisqusJS 仅在当前域名首次访问时检测 Disqus 可用性并选择模式，并把结果持久化在 localStorage 中，之后访问都会沿用之前的模式。
- 一个 Disqus Application 的 Rate Limit 是每小时 1000 次； ， ，
- 我搭建了一个 Disqus API 反代的服务 `https://disqus.skk.moe/disqus/` 可供没有能力搭建反代的用户使用，不保证 SLA。
@ -158,12 +171,11 @@ disqusjs.config {}
## 调试、进阶使用 & 开发相关
- `a.disquscdn.com` 和 `c.disquscdn.com` 解析到 Cloudflare 而不是 Fastly， ； `disqus.com` 已经解封，但是 `shortname.disqus.com` 仍然被墙。
- `a.disquscdn.com` 和 `c.disquscdn.com` 解析到 Cloudflare 而不是 Fastly， ； `disqus.com` 已经解封，但是 `shortname.disqus.com` 仍然被墙；
- DisqusJS 检测访客的 Disqus 可用性是通过检测 `disqus.com/favicon.ico` 和 `${disqusjs.config.shortname}.disqus.com/favicon.ico` 是否能正常加载， （ ）
- 你应该已经注意到 DisqusJS 在页面注册了全局变量 `window.disqusjs` ，你可以直接在控制台输入 `console.log(disqusjs)` 查看。关于里面每个子串的含义全部标注在 [DisqusJS 源文件 ](https://github.com/SukkaW/DisqusJS/blob/master/src/disqus.js ) 的注释之中。
- ~~ 你应该已经注意到 DisqusJS 在页面注册了全局变量 `window.disqusjs` ，你可以直接在控制台输入 `console.log(disqusjs)` 查看。关于里面每个子串的含义全部标注在 [DisqusJS 源文件 ](https://github.com/SukkaW/DisqusJS/blob/master/src/disqus.js ) 的注释之中。~~
- Disqus 自己的 config 保存在全局变量 `window.disqus_config` 中，你可能好奇为什么没有引入。实际上由于 `disqus_config` 和 `disqusjs.config` 中有很多重复的配置，所以 DisqusJS 直接将 `disqusjs.config` 中相关配置项赋给了 `disqus_config` ，所以用户只需要配置 `disqusjs.config` 即可。
- ~~ES6 模板字符串不支持复用，所以引入了 [baiduTemplate](https://baidufe.github.io/BaiduTemplate/) 用来渲染评论条目。baiduTemplate 是一个超轻量级的浏览器端 EJS 模板实现。以后 DisqusJS 可能会通过复用函数的方法实现 ES6 模板字符串复用，届时就可以剥离掉 baiduTemplate 了。~~ 已经剥离 baiduTemplate。
- Disqus API 中有一个 createComment 的 API 用于创建新的评论，但是调用时会有一些坑。
- DisqusJS 并没有使用 Webpack 将 `disqusjs.css` 和 `disqus.js` 打包在一起，这样大家就可以开发自己的 DisqusJS 主题并引入。所有 DisqusJS 创建的 HTML 元素都在 `<div id="dsqjs"></div>` 之中、几乎所有的元素都有自己的类名并都以 `dsqjs-` 为前缀，防止污染。
## Todo List
SukkaW
7 years ago