Home

Awesome

DisqusJS

纯前端、超轻量级的「评论基础模式」实现：使用 Disqus API 渲染评论列表

npm version Author npm license Size Travis Codacy Badge Dependency Status jsDelivr Hits

简介

使用 Disqus API 获取到的数据渲染评论列表，搭配 Disqus API 的反代可以实现在网络审查地区加载 Disqus 评论列表；支持自动检测访客的 Disqus 可用性自动选择加载原生 Disqus（评论完整模式）和 DisqusJS 提供的评论基础模式。

功能

Demo

使用

安装

直接引入

首先下载 经过编译和压缩的 DisqusJS 相关文件，在你需要安装 DisqusJS 的页面的 </head> 之前引入 DisqusJS 的 css，在需要在需要显示评论的位置引入 DisqusJS 的 js：

<link rel="stylesheet" href="disqusjs.css">

<script src="disqus.js"></script>

你也可以使用 CDN 加载上述文件：

<!-- Unpkg -->
<link rel="stylesheet" href="https://unpkg.com/disqusjs@1.3/dist/disqusjs.css">
<script src="https://unpkg.com/disqusjs@1.3/dist/disqus.js"></script>

<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqusjs.css">
<script src="https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js"></script>

DisqusJS 从 v1.3.0 版本开始使用 Fetch API 代替 XMLHttpRequest，因此不再兼容低于 IE 11 的老旧浏览器。这些浏览器将会收到如下提示：

你的浏览器版本过低，不兼容评论基础模式。如需完整体验请针对 disq.us | disquscdn.com | disqus.com 启用代理并尝试完整 Disqus 模式

如果需要为 IE8 及以上浏览器提供 DisqusJS 评论基础模式的兼容性支持，请在 DisqusJS 加载之前添加如下的 Polyfill：

<!-- Promise Polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<!-- Fetch Polyfill -->
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0.0/dist/fetch.umd.min.js"></script>

从 NPM 安装

你可以轻松将 DisqusJS 引入你现有的项目：

npm i --save disqusjs

import 'disqusjs/dist/disqusjs.css'
import DisqusJS from 'disqusjs'

使用

创建一个 DisqusJS 的容器：

<div id="disqus_thread"></div>

这个容器和 Disqus 原版评论的容器相同。

使用下述代码初始化一个 DisqusJS 实例，注意初始化需在 DisqusJS 加载完成后执行：

<script>
var dsqjs = new DisqusJS({
    shortname: '',
    siteName: '',
    identifier: '',
    url: '',
    title: '',
    api: '',
    apikey: '',
    admin: '',
    adminLabel: ''
});
</script>

完成上述步骤后，DisqusJS 就已经在您的站点安装好了，但是你现在还不能使用它。要使用 DisqusJS，你还需要进行一些配置。

配置 Disqus Application

在 Disqus API Application 处注册一个 Application。

点击新创建的 Application，获取你的 API Key（公钥）。

在 Application 的 Settings 页面设置你的域名，Disqus 会检查 API 请求的 Referrer。

配置 DisqusJS 参数

shortname {string}

siteName {string}

identifier {string}

url {string}

title {string}

api {string}

apikey {string || Array}

nesting {Number}

nocomment {string}

以下配置和 Disqus Moderator Badge 相关，缺少一个都不会显示 Badge

admin {string}

adminLabel {string}

PJAX 站点注意事项

如果你在使用 DisqusJS v0.2.5 版本，需要在 PJAX 的页面跳转事件下销毁 Disqus 实例（Disqus 不支持 PJAX）、并通过 window.disqusjs.load(); 重新加载 DisqusJS。DisqusJS v0.2.5 版本支持自动判断当前页面是否存在 #disqus_thread 容器，如果容器不存在就不加载。

DisqusJS v1.0.0 及之后的版本使用了新的方法加载 DisqusJS，并去除了对 #disqus_thread 容器的判断，在没有容器的页面初始化 DisqusJS 实例会报错。在切换页面时需要销毁已有的 Disqus 实例和 DisqusJS 实例，然后重新初始化一个新的 DisqusJS 实例。

DisqusJS v1.2.6 开始支持检测是否存在 Disqus 实例，并在加载 Disqus 时直接调用 DISQUS.reset() 方法重载 Disqus 评论，无需用户手动销毁现有的 Disqus 实例。

代码可以参考 DIYgod 的这条 commit，DIYgod 在这次 commit 中将 DisqusJS 从 v0.2.5 升级到了 v1.0.8。

如何搭建 Disqus API 反代

使用 Caddy 或者 Nginx 都可以搭建一个反代服务器，需要反代的 Endpoint 是 https://disqus.com/api/。这里介绍的是针对不使用服务器和后端程序，使用 Serverless 平台搭建 Disqus API 反代的方法。

当然，你也可以直接使用我搭建的反代 https://disqus.skk.moe/disqus/。

Vercel (ZEIT Now)

ZEIT Now 是一个 Serverless 平台。免费 Plan 提供每月 100 GiB 流量和无限的请求次数。 sukkaw/disqusjs-proxy-example 提供了一个使用 Now Router 进行反代的样例配置文件。

Cloudflare Workers

Cloudflare Workers 提供了一个在 Cloudflare 上运行 JavaScript 的平台。免费 Plan 可提供每天 100000 次免费请求次数额度。 idawnlight/disqusjs-proxy-cloudflare-workers 提供了一份使用 Cloudflare Workers 进行反代的样例代码。

Heroku

Heroku 是一个支持多种编程语言的 SaaS 平台。不绑定信用卡每月有 550 小时的免费运行时间、绑定信用卡后每月有 1000 小时的免费运行时间。 ysc3839/disqusjs-proxy 提供了一个直接部署至 Heroku 的 Disqus API 反代项目。你可以点击 Deploy 直接部署。

Firebase

Firebase Cloud Functions 提供了执行 Node.js 代码的 Serverless 平台。需绑定银行卡 (Visa 或 MasterCard) 才能启用互联网出站访问功能。 ysc3839/disqusjs-proxy 的 firebase 分支 提供了一个可以部署在 Firebase 上的反代样例。

注意

谁在使用 DisqusJS？

如果你的站点或者个人博客在使用 DisqusJS，来 把你的网站分享给其他人吧！

调试、进阶使用 & 开发相关

Todo List

DisqusJS GitHub Project

Author 作者

DisqusJS © Sukka, Released under the MIT License.<br> Authored and maintained by Sukka with help from contributors (list).

Personal Website · Blog · GitHub @SukkaW · Telegram Channel @SukkaChannel · Twitter @isukkaw · Keybase @sukka