Compare commits

...

44 Commits

Author SHA1 Message Date
Hans362 9f18b70670
Update disqusjs.css
Hans362 acc15cb127
Update disqusjs.css
Hans362 703935ce70
Update disqusjs.css
Hans362 8b806951d6
Update disqusjs.css
Hans362 c2a3959bbe
Update disqus.js
Hans362 14fbd12c3e
Update build.yml
Hans362 b2db72ad8b
Create build.yml
Chawye Hsu 7cce96652a
fix: correct HTML_TPL_A_ATTR on avatarEl ()
Chawye Hsu 136a3a7efb
docs: update readme ()
Ren Zibei 60a5430737
refactor: use Array#slice instead of Array#from ()
Ren Zibei d13b4d60ad
fix: avoid spread syntax & encode api endpoint ()
* add encodeURIComponent before get
* use Array.from instead of spread operator because of the behavior of gulp
SukkaW 6ab240b777 refactor: replace for..of with forEach
SukkaW af6512312b refactor: use Promise.all for check disqus
Kid 112f5d0f31
fix: `replaceDisquscdn` ()
SukkaW fd7bdec054 docs(README): fix another typo
Charles Chin 7ba5054a6f
docs(README): fix a typo ()
miss a "/"
SukkaW 4a79b818d2 release 1.3.0
SukkaW 0b7db01af2 chore(gulp): update gulpfile
SukkaW 45457378f5 chore(devDeps): move all dependencies to devDeps
SukkaW 471521d2a8 refactor: make code smaller after uglify
SukkaW 2942e4b72f refactor: simplify the code
SukkaW 208693364a feat: add external link attr for <a> tag
SukkaW 4cf41cca54 feat: replace a.disquscdn.com with c.disquscdn.com
SukkaW 777d98ca39 docs: update demo
SukkaW 81d486ac8b chore: enable babel loose
SukkaW 0bf5b7ed6f refactor: use fetch instead of xhr
SukkaW e134a73215 feat/refactor: not to support old browser
SukkaW 50fd9e1f77 docs(README): update descr, config
SukkaW 2b9183490e chore: update deps to latest
SukkaW 694e707fee refactor: rewrite the code to higher standard
- Use ES2015, ES2016, ES2017, ES2018 syntax
- Format the code
- Refactor some parts
SukkaW b51f38aa93 1.2.6
SukkaW 35ef15e95b merge: from remote to local
SukkaW c65587525f docs(demo): update demo site
renovate[bot] 5fc2bac75c chore(deps): update dependency gulp-autoprefixer to v7 ()
Sukka eb6867563c docs(README): deploy disqus proxy on serverless
dependabot[bot] 0284aa8953 chore(deps): bump lodash from 4.17.11 to 4.17.14 ()
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.14.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.11...4.17.14)

Signed-off-by: dependabot[bot] <support@github.com>
dependabot[bot] a95c0db360 chore(deps): bump lodash.template from 4.4.0 to 4.5.0 ()
Bumps [lodash.template](https://github.com/lodash/lodash) from 4.4.0 to 4.5.0.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.4.0...4.5.0)

Signed-off-by: dependabot[bot] <support@github.com>
Sukka 06ca1fe07b
merge(): from kidonng/master into sukkaw/master
Kid b8a204b2e2
refactor: remove inappropriate styles
Sukka cd48f97ab9
merge(): from kidonng/master into sukkaw.master
feat: use `DISQUS.reset` when reloading
kidonng 3a0ff649de feat: use `DISQUS.reset` when reloading
Sukka 7cbcf47100
merge(): from kidonng/master into sukkaw/master
Kid bdb856418c
docs(readme): fix a typo
Kid 1e81dc3664
docs(readme): add description about adblocker

@ -0,0 +1,37 @@
name: DisqusJS Build Automatically
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [9.x]
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Build
run: |
yarn global add gulp-cli
yarn
gulp build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.DEPLOY_KEY }}
publish_branch: release
publish_dir: ./dist

4
.gitignore vendored

@ -14,3 +14,7 @@ _build
public
src/index.html
dist/index.html
package-lock.json

@ -1,3 +1,5 @@
src/index.html
dist/index.html
docs/

@ -1,11 +1,11 @@
# DisqusJS
> 超轻量级的「评论基础模式」实现:使用 Disqus API 渲染评论列表
> 纯前端、超轻量级的「评论基础模式」实现:使用 Disqus API 渲染评论列表
[![npm version](https://img.shields.io/npm/v/disqusjs.svg?style=flat-square)](https://www.npmjs.com/package/disqusjs)
[![Author](https://img.shields.io/badge/Author-Sukka-b68469.svg?style=flat-square)](https://skk.moe)
[![npm license](https://img.shields.io/npm/l/disqusjs.svg?style=flat-square)](https://github.com/SukkaW/suka.css/blob/master/LICENSE)
[![Size](https://badge-size.herokuapp.com/SukkaW/DisqusJS/master/dist/disqus.js?compression=gzip&style=flat-square)](https://github.com/SukkaW/suka.css/tree/master/dist)
[![npm license](https://img.shields.io/npm/l/disqusjs.svg?style=flat-square)](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE)
[![Size](https://badge-size.herokuapp.com/SukkaW/DisqusJS/master/dist/disqus.js?compression=gzip&style=flat-square)](https://github.com/SukkaW/DisqusJS/tree/master/dist)
[![Travis](https://img.shields.io/travis/SukkaW/DisqusJS.svg?style=flat-square)](https://travis-ci.org/SukkaW/DisqusJS)
[![Codacy Badge](https://img.shields.io/codacy/grade/20babb75dd6047c2828f231e7254bb5b.svg?style=flat-square)](https://app.codacy.com/app/SukkaW/DisqusJS)
[![Dependency Status](https://img.shields.io/david/SukkaW/DisqusJS.svg?style=flat-square)](https://david-dm.org/SukkaW/DisqusJS)
@ -13,16 +13,16 @@
## 简介
使用 Disqus API 获取到的数据渲染评论列表,搭配 Disqus API 的反代可以实现在网络审查地区加载 Disqus 评论列表;支持自动检测访客的 Disqus 可用性自动选择加载原生 DISQUS(评论完整模式)和 DisqusJS 提供的评论基础模式。
使用 Disqus API 获取到的数据渲染评论列表,搭配 Disqus API 的反代可以实现在网络审查地区加载 Disqus 评论列表;支持自动检测访客的 Disqus 可用性自动选择加载原生 Disqus(评论完整模式)和 DisqusJS 提供的评论基础模式。
## 功能
- 展示评论列表
- 自动判断访客的 DISQUS 可用性选择「评论基础模式」或「Disqus 完整模式」
- 展示评论列表、支持按照「最新」、「最早」、「最佳」排序
- 判断访客能否访问 Disqus、自动选择「评论基础模式」或「Disqus 完整模式」
## Demo
- https://suka.js.org/DisqusJS/
- https://disqusjs.skk.moe
- https://blog.skk.moe
## 使用
@ -45,12 +45,27 @@
```html
<!-- Unpkg -->
<link rel="stylesheet" href="https://unpkg.com/disqusjs@1.2/dist/disqusjs.css">
<script src="https://unpkg.com/disqusjs@1.1/dist/disqus.js"></script>
<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.2/dist/disqusjs.css">
<script src="https://cdn.jsdelivr.net/npm/disqusjs@1.1/dist/disqus.js"></script>
<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
```html
<!-- 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 安装
@ -61,7 +76,7 @@
npm i --save disqusjs
```
```
```js
import 'disqusjs/dist/disqusjs.css'
import DisqusJS from 'disqusjs'
```
@ -145,9 +160,21 @@ var dsqjs = new DisqusJS({
**apikey** `{string || Array}`
- DisqusJS 向 API 发起请求时使用的 API Key你应该在配置 Disqus Application 时获取了 API Key
- DisqusJS 支持填入一个 包含多个 API Key 的 Array在每次请求时会随机使用其中一个如果你只需要填入一个 API Key则可以填入 String 或 Array。
- DisqusJS 支持填入一个 包含多个 API Key 的 Array在每次请求时会随机使用其中一个如果你只填入一个 API Key可以填入 string 或 Array。
- **必填**,无默认值
**nesting** `{Number}`
- 最大评论嵌套数;超过嵌套层数的评论,会不论从属关系显示在同一层级下
- 非必须,默认值为 `4`
**nocomment** `{string}`
- 没有评论时的提示语(对应 Disqus Admin - Settings - Community - Comment Count Link - Zero comments
- 非必须,默认值为 `这里冷冷清清的,一条评论都没有`
---
以下配置和 Disqus Moderator Badge 相关,缺少一个都不会显示 Badge
**admin** `{string}`
@ -160,31 +187,51 @@ var dsqjs = new DisqusJS({
- 你想显示在 Disqus Moderator Badge 中的文字。该配置应和 [Disqus Admin - Settings - Community - Moderator Badge Text](https://disqus.com/admin/settings/community/) 相同
- 非必须,无默认值
---
未来可能扩展的配置:
- nesting 最大评论嵌套数(超过嵌套层数的评论会显示在同一层级下,目前该值采用 Disqus 官方 4 级嵌套且不可改变)
- nocomment 没有评论时的提示语(对应 Disqus Admin - Settings - Community - Comment Count Link - Zero comments
- ~~commentPolicyURL 站点评论政策 URL对应 对应 Disqus Admin - Settings - General - Comment Policy URL~~
- ~~commentPolicyText 站点评论政策简介(对应 对应 Disqus Admin - Settings - General - Comment Policy Summary~~
- ~~newcomment 是否允许添加新评论(目前增加评论功能尚未实现)~~
### 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](https://github.com/DIYgod/diygod.me/commit/31012c21a457df5ab172c2e24bc197d5a0de8e69#diff-566630479f69d2ba36b6b996f6ba5a8f)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](https://zeit.co) 是一个 Serverless 平台。免费 Plan 提供每月 100 GiB 流量和无限的请求次数。
[sukkaw/disqusjs-proxy-example](https://github.com/SukkaW/disqusjs-proxy-example) 提供了一个使用 Now Router 进行反代的样例配置文件。
### Cloudflare Workers
[Cloudflare Workers](https://www.cloudflare.com/products/cloudflare-workers/) 提供了一个在 Cloudflare 上运行 JavaScript 的平台。免费 Plan 可提供每天 `100000` 次免费请求次数额度。
[idawnlight/disqusjs-proxy-cloudflare-workers](https://github.com/idawnlight/disqusjs-proxy-cloudflare-workers) 提供了一份使用 Cloudflare Workers 进行反代的样例代码。
### Heroku
[Heroku](https://www.heroku.com/) 是一个支持多种编程语言的 SaaS 平台。不绑定信用卡每月有 550 小时的免费运行时间、绑定信用卡后每月有 1000 小时的免费运行时间。
[ysc3839/disqusjs-proxy](https://github.com/ysc3839/disqusjs-proxy) 提供了一个直接部署至 Heroku 的 Disqus API 反代项目。你可以点击 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ysc3839/disqusjs-proxy) 直接部署。
### Firebase
[Firebase Cloud Functions](https://firebase.google.com/products/functions/) 提供了执行 Node.js 代码的 Serverless 平台。需绑定银行卡 (Visa 或 MasterCard) 才能启用互联网出站访问功能。
[ysc3839/disqusjs-proxy 的 `firebase` 分支](https://github.com/ysc3839/disqusjs-proxy/tree/firebase) 提供了一个可以部署在 Firebase 上的反代样例。
## 注意
- Disqus API 不支持通过 AJAX 方式调用创建评论或者初始化页面,所以自动初始化页面和创建匿名评论在不搭配专门的后端程序的话不能实现。
- Disqus API 会检查请求是否包含 `Origin`、`X-Request-With` 等响应头、拦截 AJAX 请求。就算 Disqus API 不做检查,把你的私钥和公钥一起明文写在前端也是 **十分愚蠢** 的
- 所以如果 DisqusJS 检测到当前页面没有初始化、会提示是否切换到 Disqus 完整模式进行初始化。
- DisqusJS 仅在当前域名首次访问时检测 Disqus 可用性并选择模式,并把结果持久化在 localStorage 中,之后访问都会沿用之前的模式。
- 一个 Disqus Application 的 Rate Limit 是每小时 1000 次DisqusJS 一次正常加载会产生 2 次请求。DisqusJS 支持填入多个 API Key你可以创建多个 Disqus API Application 并分别获取 API Key。
- 我搭建了一个 Disqus API 反代的服务 `https://disqus.skk.moe/disqus/` 供没有能力搭建反代的用户使用,不保证 SLA、缓存 TTL 1 小时。
- 一些广告拦截规则(如 [Fanboys Enhanced Tracking List](https://github.com/ryanbr/fanboy-adblock) 会导致检测失败,可在广告拦截器的自定义规则中添加 `@@||*disqus*.com/favicon.ico*` 解决。当然你不必担心访客,因为 DisqusJS 会提供 `尝试 Disqus 完整模式 | 强制 Disqus 完整模式` 的按钮供访客切换。
- 一个 Disqus Application 的 Rate Limit 是每小时 1000 次DisqusJS 一次正常加载会产生 2 次请求。DisqusJS 支持将多个 API Key 填入一个 Array 中,并在请求时随机选择(负载均衡)。你可以创建多个 Disqus API Application 并分别获取 API Key。
- 我搭建了一个 Disqus API 反代的服务 `https://disqus.skk.moe/disqus/` 供没有能力搭建反代的用户使用,不保证 SLA、缓存 TTL 3 小时。
## 谁在使用 DisqusJS
@ -192,18 +239,19 @@ DisqusJS v1.0.0 及之后的版本使用了新的方法加载 DisqusJS并去
- DIYgod: [Hi, DIYgod](https://diygod.me) ([source](https://github.com/DIYgod/diygod.me))
- imlonghao: [Imlonghao](https://imlonghao.com/)
- Yrom Wang: [Yrom's](https://yrom.net/) (Still using DisqusJS v0.2.5)
- h404bi: [Chawye Hsu's Blog](https://www.h404bi.com/blog/) ([source](https://github.com/h404bi/www.h404bi.com))
- chawyehsu: [The Art of Chawye Hsu](https://chawyehsu.com) ([source](https://github.com/chawyehsu/chawyehsu.com))
- ysc3839: [YSC's blog](https://blog.ysc3839.com/)
如果你的站点或者个人博客在使用 DisqusJS来 [把你的网站分享给其他人吧](https://github.com/SukkaW/DisqusJS/issues/12)
## 调试、进阶使用 & 开发相关
- 需要反代的 Endpoint 是 `https://disqus.com/api/`,使用 Nginx、Caddy 都可以很轻松的设置一个反代。如果没有自己的服务器,可以使用 [Now](https://zeit.co) 提供的 Serverless 平台搭建一个反代,[这里](https://github.com/SukkaW/disqusjs-proxy-example) 提供了一个样例。当然,你也可以使用我搭建的反代 `https://disqus.skk.moe/disqus/`
- `a.disquscdn.com` `c.disquscdn.com` 解析到 Cloudflare 而不是 Fastly可用性大大增强`disqus.com` 和 `shortname.disqus.com` 仍然被墙;`disq.us` 解析到 Fastly 连通性较差DisqusJS 通过解析获得了原链接
- ~~`a.disquscdn.com` 和~~ `c.disquscdn.com` 解析到 Cloudflare 而不是 Fastly可用性大大增强`disqus.com` 和 `shortname.disqus.com` 仍然被墙;`disq.us` 解析到 Fastly 连通性较差DisqusJS 通过解析获得了原链接
- `a.disquscdn.com` 重新解析到 Fastly可用性不如 `c.disquscdn.com`DisqusJS 内部已增加替换 `a.disquscdn.com``c.disquscdn.com` 以改善速度
- DisqusJS 检测访客的 Disqus 可用性是通过检测 `disqus.com/favicon.ico``${disqusjs.config.shortname}.disqus.com/favicon.ico` 是否能正常加载如果有一个加载出错或超时2s就判定 Disqus 不可用。
- DisqusJS 在 localStorage 中持久化了 Disqus 连通性检查结果key 为 `dsqjs_mode`value 为 `disqus` 或者 `dsqjs`。需要调整 DisqusJS 的模式时可以直接操作 localStorage。
- Disqus 自己的 config 保存在全局变量 `window.disqus_config` 中,你可能好奇为什么没有引入。实际上由于 `disqus_config` 和 DisqusJS 中有很多重复的配置,所以 DisqusJS 直接将相关配置项赋给了 `disqus_config`,所以用户只需要配置 Disqus 即可。
- DisqusJS 并没有使用 Webpack 将 `disqusjs.css``disqus.js` 打包在一起,大家可以开发自己的 DisqusJS 主题。所有 DisqusJS 创建的 HTML 元素都在 `<div id="dsqjs"></div>` 之中、几乎所有的元素都有自己的类名并都以 `dsqjs-` 为前缀,防止污染。
- Disqus 自己的 config 保存在全局变量 `window.disqus_config` 中,你可能好奇为什么没有引入。实际上由于 `disqus_config` 和 DisqusJS 中有很多重复的配置,所以 DisqusJS 直接将相关配置项赋给了 `disqus_config`,所以用户只需要配置 DisqusJS 即可。
- DisqusJS 并没有使用 Webpack 将 `disqusjs.css``disqus.js` 打包在一起,大家可以开发自己的 DisqusJS 主题。所有 DisqusJS 创建的 HTML 元素都包裹`<div id="dsqjs"></div>` 之中、几乎所有的元素都有自己的类名并都以 `dsqjs-` 为前缀,防止污染。
- DisqusJS 从 v1.2.0 版本开始实现了评论排序。Disqus 将评论排序方式持久化在 localStorage 中、key 为 `disqus.sort`DisqusJS 沿用了这一位置。
## Todo List
@ -212,7 +260,7 @@ DisqusJS v1.0.0 及之后的版本使用了新的方法加载 DisqusJS并去
## Author 作者
**DisqusJS** © [Sukka](https://github.com/SukkaW), Released under the [MIT](https://github.com/SukkaW/suka.css/blob/master/LICENSE) License.<br>
Authored and maintained by Sukka with help from contributors ([list](https://github.com/SukkaW/suka.css/graphs/contributors)).
**DisqusJS** © [Sukka](https://github.com/SukkaW), Released under the [MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE) License.<br>
Authored and maintained by Sukka with help from contributors ([list](https://github.com/SukkaW/DisqusJS/graphs/contributors)).
> [Personal Website](https://skk.moe) · [Blog](https://blog.skk.moe) · GitHub [@SukkaW](https://github.com/SukkaW) · Telegram Channel [@SukkaChannel](https://t.me/SukkaChannel) · Twitter [@isukkaw](https://twitter.com/isukkaw) · Keybase [@sukka](https://keybase.io/sukka)

7
dist/disqus.js vendored

File diff suppressed because one or more lines are too long

7
dist/disqusjs.css vendored

File diff suppressed because one or more lines are too long

@ -0,0 +1 @@
disqusjs.skk.moe

@ -11,7 +11,7 @@
<link href="https://cdn.jsdelivr.net/npm/skx@0.0.1/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
<link href="https://cdn.jsdelivr.net/npm/skx@0.0.1/favicon/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
<link href="https://cdn.jsdelivr.net/npm/skx@0.0.1" rel="shortcut icon" type="image/ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@1.2.5/dist/disqusjs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@1.3.0/dist/disqusjs.css">
<script src="https://cdn.jsdelivr.net/npm/vconsole"></script>
<script>var vConsole = new VConsole();</script>
<style>
@ -20,12 +20,24 @@
padding: 0
}
blockquote {
border-left: .25em solid #dfe2e5;
color: #6a737d;
padding: 0 1em;
margin-left: 0
}
.comment-container {
width: 100%;
background: #eee;
padding: 20px 0
}
.comment-container-text {
max-width: 600px;
margin: 0 auto;
padding: 10px
}
#disqus_thread {
max-width: 600px;
margin: 20px auto;
@ -36,7 +48,7 @@
max-width: 600px;
padding: 20px;
margin: 20px auto 0;
text-align: center
text-align: left
}
.github-corner:hover .octo-arm {
@ -70,32 +82,64 @@
animation: octocat-wave 560ms ease-in-out
}
}
.dsqjs-demo-btn-container {
text-align: center
}
.dsqjs-demo-btn-container a {
display: inline-block;
text-decoration: none;
height: 36px;
line-height: 36px;
border-radius: 22px;
text-align: center;
}
.btn-begin {
padding: 0 20px;
min-width: 80px;
color: white;
background-color: #2e9fff;
}
.btn-github {
margin-left: 36px;
width: 120px;
color: #2e9fff;
border: 1px solid #2e9fff;
}
</style>
</head>
<body>
<a href="https://github.com/SukkaW/DisqusJS" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
aria-hidden="true">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div class="dsqjs-demo-descr">
<h1>DisqusJS Demo</h1>
<p>Disqus 替代方案 - 使用 Disqus API 渲染评论列表</p>
<p>Demo 中使用了我自行搭建的 Disqus API 反代 <code>https://disqus.skk.moe/disqus/</code>,开放给大家使用,但不保证 SLA</p>
<p>如果您当前网络支持访问 DisqusDisqusJS 将会自动加载完整 DISQUS 模式。如果需要预览 DisqusJS 你可以 <a href="javascript:;" onclick="forceDisqusJS()">点击这里</a>
来强制使用 DisqusJS 的评论基础模式</p>
<h1 style="text-align: center">DisqusJS</h1>
<blockquote>Disqus 替代方案 - 使用 Disqus API 渲染评论列表</blockquote>
<p>DisqusJS 提供一个纯前端的、不依赖后端服务器的 Disqus 评论基础模式。</p>
<div class="dsqjs-demo-btn-container">
<a href="https://github.com/SukkaW/DisqusJS#%E4%BD%BF%E7%94%A8" class="btn-begin">开始使用</a>
<a href="https://github.com/SukkaW/DisqusJS" class="btn-github">GitHub</a>
</div>
</div>
<div class="comment-container">
<div class="comment-container-text">
<h2 style="margin: 16px auto; text-align: center; border-bottom: 2px dashed #2e9fff; width: 60px; color: #2e9fff">演示</h2>
<p><small>如果您当前网络支持访问 DisqusDisqusJS 将会自动加载完整 DISQUS 模式。如果需要预览 DisqusJS 你可以 <a href="javascript:;" onclick="forceDisqusJS()">点击这里</a> 来强制使用 DisqusJS 的评论基础模式</small></p>
</div>
<div id="disqus_thread"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/disqusjs@1.2.5/dist/disqus.js"></script>
<script id="dsqjs-script" async src="https://cdn.jsdelivr.net/npm/disqusjs@1.3.0/dist/disqus.js"></script>
<script>
document.getElementById('dsqjs-script').addEventListener('load', function() {
var dsqjs = new DisqusJS({
shortname: 'sukas-blog',
siteName: "Sukka's Blog · 苏卡卡的博客",
@ -106,6 +150,7 @@
admin: 'SukkaW',
adminLabel: '苏卡卡~'
});
});
</script>
<script>
function forceDisqusJS() {

@ -1,66 +1,64 @@
let gulp = require('gulp');
let uglify = require('gulp-uglify');
let babel = require('gulp-babel');
let autoprefixer = require('gulp-autoprefixer');
let cleanCSS = require('gulp-clean-css');
let header = require('gulp-header');
let pkg = require('./package.json');
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const header = require('gulp-header');
const pkg = require('./package.json');
var jsBanner = ['/*!',
' * DisqusJS | v<%= pkg.version %>',
' * Author: SukkaW',
' * Link: https://github.com/SukkaW/DisqusJS',
' * License: <%= pkg.license %>',
' */'
].join('\n');
var cssBanner = ['/*!',
' * DisqusJS - Default Theme | v<%= pkg.version %>',
' * Author: SukkaW',
' * Link: https://github.com/SukkaW/DisqusJS',
' * License: <%= pkg.license %>',
' */'
].join('\n');
const jsBanner = ['/*! DisqusJS v<%= pkg.version %>',
'Sukka (https://skk.moe)',
'https://disqusjs.skk.moe',
'<%= pkg.license %> License */',
].join(' | ');
const cssBanner = ['/*! DisqusJS - Default Theme | v<%= pkg.version %>',
'Sukka (https://skk.moe)',
'https://disqusjs.skk.moe',
'<%= pkg.license %> License */'
].join(' | ');
var configs = {
browsers: [
'last 2 versions',
'since 2015',
const browserslist = [
'last 3 versions',
'since 2016',
'> 1%',
'Chrome >= 30',
'Firefox >= 30',
'ie >= 9',
'Chrome >= 49',
'Firefox >= 50',
'ie >= 11',
'Safari >= 9',
],
]
const configs = {
autoprefixer: {
overrideBrowserslist: browserslist
},
cleanCSS: {
compatibility: 'ie9'
compatibility: 'ie11'
},
};
gulp.task('minify-js', () => {
return gulp.src('src/**/*.js')
gulp.task('minify-js', () => gulp.src('src/**/*.js')
.pipe(babel({
"presets": [
["@babel/env", {
"targets": configs.browsers
'presets': [
['@babel/env', {
'targets': browserslist,
'loose': true
}]
]
}))
.pipe(uglify({
keep_fnames: false
}))
.pipe(header(jsBanner, { pkg: pkg }))
.pipe(gulp.dest('dist'));
});
.pipe(header(jsBanner, { pkg }))
.pipe(gulp.dest('dist')));
gulp.task('minify-css', () => {
return gulp.src('src/**/*.css')
.pipe(autoprefixer(configs.browsers))
gulp.task('minify-css', () => gulp.src('src/**/*.css')
.pipe(autoprefixer(configs.autoprefixer))
.pipe(cleanCSS(configs.cleanCSS))
.pipe(header(cssBanner, { pkg: pkg }))
.pipe(gulp.dest('dist'));
});
.pipe(header(cssBanner, { pkg }))
.pipe(gulp.dest('dist')));
gulp.task('build', gulp.parallel('minify-js', 'minify-css'));

@ -1,6 +1,6 @@
{
"name": "disqusjs",
"version": "1.2.5",
"version": "1.3.0",
"description": "Alternative DISQUS - Render comments components from Disqus API",
"main": "dist/disqus.js",
"scripts": {
@ -24,14 +24,15 @@
"url": "https://github.com/SukkaW/DisqusJS/issues"
},
"homepage": "https://github.com/SukkaW/DisqusJS#readme",
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gulp": "4",
"gulp-autoprefixer": "^6.0.0",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.10.1",
"@babel/preset-env": "^7.10.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-header": "^2.0.5",
"gulp-uglify": "^3.0.1"
"gulp-clean-css": "^4.3.0",
"gulp-header": "^2.0.9",
"gulp-uglify": "^3.0.2"
}
}

File diff suppressed because it is too large Load Diff

@ -1,9 +1,6 @@
#dsqjs * {
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#dsqjs a {
@ -68,16 +65,15 @@
line-height: 1.5;
word-wrap: break-word;
overflow: hidden;
color: #2a2e2e;
color: var(--t);
margin-bottom: 6px;
}
#dsqjs .dsqjs-nav-tab {
float: left;
text-transform: capitalize;
font-size: 15px;
padding: 12px 0;
color: #656c7a;
padding: 12px 8px;
color: var(--body-color);
display: block;
margin: 0 15px 0 0;
font-weight: 700;
@ -91,7 +87,7 @@
}
#dsqjs .dsqjs-tab-active {
color: #2a2e2e;
color: var(--ic);
}
#dsqjs .dsqjs-tab-active>span:after {
@ -100,7 +96,7 @@
height: 2px;
background-color: #076dd0 !important;
position: absolute;
bottom: -2px;
bottom: -5px;
left: 0;
right: 0;
}
@ -164,19 +160,13 @@
line-height: 1.5;
word-wrap: break-word;
overflow: hidden;
color: #2a2e2e
}
#dsqjs .dsqjs-post-body code,
#dsqjs .dsqjs-post-body pre {
font-family: "SF Mono", "Segoe UI Mono", Consolas, "Roboto Mono", "Liberation Mono", Menlo, Courier, 'Courier New', monospace !important;
color: var(--t)
}
#dsqjs .dsqjs-post-body code {
padding: .2em .4em;
margin: 0;
font-size: 85%;
background: #f5f5f5;
color: inherit;
border-radius: 3px;
}
@ -250,7 +240,10 @@
#dsqjs footer {
text-align: right;
line-height: 1.5;
padding-top: 12px;
padding-top: 10px;
padding-right: 10px;
border-top: 2px solid #e7e9ee;
margin-top: 12px;
font-weight: 700;
font-size: 16px;
color: #555;
@ -291,6 +284,7 @@
border-radius: 2px;
padding: 0 5px;
background-color: #dcdcdc;
color: #4c4d4e;
cursor: pointer;
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save