Compare commits

...

63 Commits

Author SHA1 Message Date
Hans362 9f18b70670
Update disqusjs.css 4 years ago
Hans362 acc15cb127
Update disqusjs.css 4 years ago
Hans362 703935ce70
Update disqusjs.css 4 years ago
Hans362 8b806951d6
Update disqusjs.css 4 years ago
Hans362 c2a3959bbe
Update disqus.js 4 years ago
Hans362 14fbd12c3e
Update build.yml 4 years ago
Hans362 b2db72ad8b
Create build.yml 4 years ago
Chawye Hsu 7cce96652a
fix: correct HTML_TPL_A_ATTR on avatarEl (#58) 5 years ago
Chawye Hsu 136a3a7efb
docs: update readme (#56) 5 years ago
Ren Zibei 60a5430737
refactor: use Array#slice instead of Array#from (#52) 5 years ago
Ren Zibei d13b4d60ad
fix: avoid spread syntax & encode api endpoint (#51)
* add encodeURIComponent before get
* use Array.from instead of spread operator because of the behavior of gulp
5 years ago
SukkaW 6ab240b777 refactor: replace for..of with forEach 5 years ago
SukkaW af6512312b refactor: use Promise.all for check disqus 5 years ago
Kid 112f5d0f31
fix: `replaceDisquscdn` (#47) 5 years ago
SukkaW fd7bdec054 docs(README): fix another typo 5 years ago
Charles Chin 7ba5054a6f
docs(README): fix a typo (#45)
miss a "/"
5 years ago
SukkaW 4a79b818d2 release 1.3.0 5 years ago
SukkaW 0b7db01af2 chore(gulp): update gulpfile 5 years ago
SukkaW 45457378f5 chore(devDeps): move all dependencies to devDeps 5 years ago
SukkaW 471521d2a8 refactor: make code smaller after uglify 5 years ago
SukkaW 2942e4b72f refactor: simplify the code 5 years ago
SukkaW 208693364a feat: add external link attr for <a> tag 6 years ago
SukkaW 4cf41cca54 feat: replace a.disquscdn.com with c.disquscdn.com 6 years ago
SukkaW 777d98ca39 docs: update demo 6 years ago
SukkaW 81d486ac8b chore: enable babel loose 6 years ago
SukkaW 0bf5b7ed6f refactor: use fetch instead of xhr 6 years ago
SukkaW e134a73215 feat/refactor: not to support old browser 6 years ago
SukkaW 50fd9e1f77 docs(README): update descr, config 6 years ago
SukkaW 2b9183490e chore: update deps to latest 6 years ago
SukkaW 694e707fee refactor: rewrite the code to higher standard
- Use ES2015, ES2016, ES2017, ES2018 syntax
- Format the code
- Refactor some parts
6 years ago
SukkaW b51f38aa93 1.2.6 6 years ago
SukkaW 35ef15e95b merge: from remote to local 6 years ago
SukkaW c65587525f docs(demo): update demo site 6 years ago
renovate[bot] 5fc2bac75c chore(deps): update dependency gulp-autoprefixer to v7 (#35) 6 years ago
Sukka eb6867563c docs(README): deploy disqus proxy on serverless 6 years ago
dependabot[bot] 0284aa8953 chore(deps): bump lodash from 4.17.11 to 4.17.14 (#33)
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>
6 years ago
dependabot[bot] a95c0db360 chore(deps): bump lodash.template from 4.4.0 to 4.5.0 (#32)
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>
6 years ago
Sukka 06ca1fe07b
merge(#31): from kidonng/master into sukkaw/master 6 years ago
Kid b8a204b2e2
refactor: remove inappropriate styles 6 years ago
Sukka cd48f97ab9
merge(#30): from kidonng/master into sukkaw.master
feat: use `DISQUS.reset` when reloading
6 years ago
kidonng 3a0ff649de feat: use `DISQUS.reset` when reloading 6 years ago
Sukka 7cbcf47100
merge(#29): from kidonng/master into sukkaw/master 6 years ago
Kid bdb856418c
docs(readme): fix a typo 6 years ago
Kid 1e81dc3664
docs(readme): add description about adblocker 6 years ago
SukkaW f0fba592cb version 1.2.5 6 years ago
SukkaW 7e98ae7551 fix: syntax error 6 years ago
SukkaW a00f5fb7e7 demo: update 6 years ago
SukkaW d8f3ec1c18 version 1.2.4 6 years ago
SukkaW 940d9946f0 refactor: use dom instead of regrex 6 years ago
Sukka ae8c58c3ff
merge(#27): from fix/workaround/#26 into master
fix: workaround of #26
6 years ago
SukkaW 41fdfde9b7 fix(hasMore): change btn typo & style 6 years ago
SukkaW 3b99e35cc0 feat: add hasMore btn and add listener 6 years ago
SukkaW 94e06a209c feat: add hasMore prop 6 years ago
SukkaW fd6e4fa014 merge: from remote to local 6 years ago
SukkaW ef0ab51a76 feat(nesting): custom nesting configuration 6 years ago
Sukka 23c77d1600
docs(README): #12 6 years ago
SukkaW 25a5ebb03e version 1.2.3 6 years ago
Sukka 2f83d2d3d9
merge(#22): from giuem/master to sukkaw/master 6 years ago
Sukka 6c749cbcfb
merge(#24) from h404bi/patch-1 to sukkaw/master 6 years ago
Chawye Hsu 12b91ae33e
fix(css): encode disqus svg logo 6 years ago
Sukka 54c6bccec5
fix: variable typo
Co-Authored-By: giuem <giuemcom@gmail.com>
6 years ago
giuem 0182d61b2a feat(config): allow to specify page's title 6 years ago
giuem 543a3f7198 fix: variable disqusjs is object 6 years ago

@ -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

6
.gitignore vendored

@ -13,4 +13,8 @@ _build
public
src/index.html
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.1/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.1/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'
```
@ -85,6 +100,7 @@ var dsqjs = new DisqusJS({
siteName: '',
identifier: '',
url: '',
title: '',
api: '',
apikey: '',
admin: '',
@ -131,6 +147,11 @@ var dsqjs = new DisqusJS({
- 当前页面的 URLDisqus 的爬虫会爬取该 URL 获取页面相关信息
- **建议**,默认值为 `document.location.origin + document.location.pathname + document.location.search`
**title** `{string}`
- 当前页面的标题,如果没有设置默认为当前页面的标题。当页面标题中有其他信息(比如站点名称)而不想在 Disqus 中展示时,可以设置此项。
- 非必须,默认值为 `document.title`
**api** `{string}`
- DisqusJS 请求的 API Endpoint通常情况下你应该配置一个 Disqus API 的反代并填入反代的地址。你也可以直接使用 DISQUS 官方 API 的 Endpoint `https://disqus.com/api/`,或是使用我搭建的 Disqus API 反代 Endpoint `https://disqus.skk.moe/disqus/`。如有必要可以阅读关于搭建反代的 [相关内容](https://github.com/SukkaW/DisqusJS#%E8%B0%83%E8%AF%95%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8--%E5%BC%80%E5%8F%91%E7%9B%B8%E5%85%B3)
@ -139,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}`
@ -154,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
@ -186,17 +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)
- 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
@ -205,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.2/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,41 +82,74 @@
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.2/dist/disqus.js"></script>
<script id="dsqjs-script" async src="https://cdn.jsdelivr.net/npm/disqusjs@1.3.0/dist/disqus.js"></script>
<script>
var dsqjs = new DisqusJS({
shortname: 'sukas-blog',
siteName: "Sukka's Blog · 苏卡卡的博客",
identifier: "https://suka.js.org/DisqusJS/",
url: "https://suka.js.org/DisqusJS/",
api: "https://disqus.skk.moe/disqus/",
apikey: 'G2amHmorq3wJVjaviRo3YNWPgsKkAm7IolUWQKLeyQNd7lb3GtgWNnh6RgFFIwO9',
admin: 'SukkaW',
adminLabel: '苏卡卡~'
document.getElementById('dsqjs-script').addEventListener('load', function() {
var dsqjs = new DisqusJS({
shortname: 'sukas-blog',
siteName: "Sukka's Blog · 苏卡卡的博客",
identifier: "https://suka.js.org/DisqusJS/",
url: "https://suka.js.org/DisqusJS/",
api: "https://disqus.skk.moe/disqus/",
apikey: 'G2amHmorq3wJVjaviRo3YNWPgsKkAm7IolUWQKLeyQNd7lb3GtgWNnh6RgFFIwO9',
admin: 'SukkaW',
adminLabel: '苏卡卡~'
});
});
</script>
<script>
@ -118,4 +163,4 @@
</script>
</body>
</html>
</html>

@ -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',
'> 1%',
'Chrome >= 30',
'Firefox >= 30',
'ie >= 9',
'Safari >= 9',
],
const browserslist = [
'last 3 versions',
'since 2016',
'> 1%',
'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')
.pipe(babel({
"presets": [
["@babel/env", {
"targets": configs.browsers
}]
]
}))
.pipe(uglify({
keep_fnames: false
}))
.pipe(header(jsBanner, { pkg: pkg }))
.pipe(gulp.dest('dist'));
});
gulp.task('minify-js', () => gulp.src('src/**/*.js')
.pipe(babel({
'presets': [
['@babel/env', {
'targets': browserslist,
'loose': true
}]
]
}))
.pipe(uglify({
keep_fnames: false
}))
.pipe(header(jsBanner, { pkg }))
.pipe(gulp.dest('dist')));
gulp.task('minify-css', () => {
return gulp.src('src/**/*.css')
.pipe(autoprefixer(configs.browsers))
.pipe(cleanCSS(configs.cleanCSS))
.pipe(header(cssBanner, { pkg: pkg }))
.pipe(gulp.dest('dist'));
});
gulp.task('minify-css', () => gulp.src('src/**/*.css')
.pipe(autoprefixer(configs.autoprefixer))
.pipe(cleanCSS(configs.cleanCSS))
.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.2",
"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;
}
@ -210,9 +200,11 @@
#dsqjs .dsqjs-post-list.dsqjs-children>li {
margin-left: 48px;
}
#dsqjs .dsqjs-post-list .dsqjs-post-avatar {
margin-right: 12px;
}
#dsqjs .dsqjs-post-list .dsqjs-post-item {
margin-bottom: 20px;
}
@ -248,14 +240,17 @@
#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;
}
#dsqjs .dsqjs-disqus-logo {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438 80"><path fill="%23575B5D" d="M30.2 1.6H1v76h28.9C57 77.6 73 61.3 73 39.4v-.2c0-22-15.7-37.6-42.9-37.6zm21.3 38.1c0 12.3-8.4 19.3-21 19.3H22V20.3h8.5c12.6 0 21 7 21 19.2v.2zm35.6 38h21.2V1.5H87.1v76zm70-47.4c-10.4-2.4-13-4-13-7.4v-.2c0-2.7 2.4-5 7.6-5 6.7 0 14.3 2.7 21.2 7.6l10.6-14.9A47.9 47.9 0 0 0 152.2.3c-18.3 0-29.4 10.2-29.4 24.3v.2c0 15.7 12.4 20.3 28.6 24 10.4 2.3 12.9 4 12.9 7.2v.2c0 3.3-3 5.2-8.7 5.2-8.8 0-17.2-3.1-24.7-9l-11.7 14a53.1 53.1 0 0 0 35.6 12.5c18.5 0 30.7-9.2 30.7-24.7V54c0-14.3-10.8-20-28.3-23.7zm120.7 9.3v-.2A39.5 39.5 0 0 0 236.9.1c-23.4 0-41 17.7-41 39.5v.2a39.5 39.5 0 0 0 40.8 39.4c8.7 0 16.6-2.5 23.1-6.8l8.4 7.5L279 68.1l-7.9-6.6a38 38 0 0 0 6.8-21.9zm-21.4.5c0 2.6-.5 5-1.3 7.3l-10.4-9.3-10.6 12 10.5 9a21.7 21.7 0 0 1-7.7 1.4c-11.6 0-19.4-9.7-19.4-20.7v-.2c0-11 7.7-20.5 19.2-20.5 11.7 0 19.7 9.7 19.7 20.7v.3zm83.5 4.3c0 10.6-5.5 15.6-14 15.6s-14-5.2-14-16.1V1.6h-21.4v42.7C290.5 68 304 79 325.7 79s35.6-10.8 35.6-35.3V1.5h-21.4v42.8zm68.9-14.1c-10.6-2.4-13.2-4-13.2-7.4v-.2c0-2.7 2.5-5 7.6-5 6.8 0 14.4 2.7 21.3 7.6l10.6-14.9A47.9 47.9 0 0 0 403.8.3c-18.3 0-29.5 10.2-29.5 24.3v.2c0 15.7 12.5 20.3 28.7 24 10.3 2.3 12.8 4 12.8 7.2v.2c0 3.3-3 5.3-8.7 5.3-8.8 0-17.1-3.2-24.6-9.2l-11.7 14A53.1 53.1 0 0 0 406.4 79c18.5 0 30.7-9.2 30.7-24.7V54c0-14.3-10.8-20-28.3-23.7z"/></svg>');
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438 80'%3e%3cpath fill='%23575B5D' d='M30.2 1.6H1v76h28.9C57 77.6 73 61.3 73 39.4v-.2c0-22-15.7-37.6-42.9-37.6zm21.3 38.1c0 12.3-8.4 19.3-21 19.3H22V20.3h8.5c12.6 0 21 7 21 19.2v.2zm35.6 38h21.2V1.5H87.1v76zm70-47.4c-10.4-2.4-13-4-13-7.4v-.2c0-2.7 2.4-5 7.6-5 6.7 0 14.3 2.7 21.2 7.6l10.6-14.9A47.9 47.9 0 0 0 152.2.3c-18.3 0-29.4 10.2-29.4 24.3v.2c0 15.7 12.4 20.3 28.6 24 10.4 2.3 12.9 4 12.9 7.2v.2c0 3.3-3 5.2-8.7 5.2-8.8 0-17.2-3.1-24.7-9l-11.7 14a53.1 53.1 0 0 0 35.6 12.5c18.5 0 30.7-9.2 30.7-24.7V54c0-14.3-10.8-20-28.3-23.7zm120.7 9.3v-.2A39.5 39.5 0 0 0 236.9.1c-23.4 0-41 17.7-41 39.5v.2a39.5 39.5 0 0 0 40.8 39.4c8.7 0 16.6-2.5 23.1-6.8l8.4 7.5L279 68.1l-7.9-6.6a38 38 0 0 0 6.8-21.9zm-21.4.5c0 2.6-.5 5-1.3 7.3l-10.4-9.3-10.6 12 10.5 9a21.7 21.7 0 0 1-7.7 1.4c-11.6 0-19.4-9.7-19.4-20.7v-.2c0-11 7.7-20.5 19.2-20.5 11.7 0 19.7 9.7 19.7 20.7v.3zm83.5 4.3c0 10.6-5.5 15.6-14 15.6s-14-5.2-14-16.1V1.6h-21.4v42.7C290.5 68 304 79 325.7 79s35.6-10.8 35.6-35.3V1.5h-21.4v42.8zm68.9-14.1c-10.6-2.4-13.2-4-13.2-7.4v-.2c0-2.7 2.5-5 7.6-5 6.8 0 14.4 2.7 21.3 7.6l10.6-14.9A47.9 47.9 0 0 0 403.8.3c-18.3 0-29.5 10.2-29.5 24.3v.2c0 15.7 12.5 20.3 28.7 24 10.3 2.3 12.8 4 12.8 7.2v.2c0 3.3-3 5.3-8.7 5.3-8.8 0-17.1-3.2-24.6-9.2l-11.7 14A53.1 53.1 0 0 0 406.4 79c18.5 0 30.7-9.2 30.7-24.7V54c0-14.3-10.8-20-28.3-23.7z'/%3e%3c/svg%3e");
background-position: 50% 50%;
background-repeat: no-repeat;
display: inline-block;
@ -289,5 +284,19 @@
border-radius: 2px;
padding: 0 5px;
background-color: #dcdcdc;
color: #4c4d4e;
cursor: pointer;
}
}
#dsqjs p.dsqjs-has-more {
margin-bottom: 24px;
margin-left: 48px;
font-size: 13px;
line-height: 15px;
}
#dsqjs p.dsqjs-has-more a.dsqjs-has-more-btn {
color: #656c7a;
text-decoration: underline;
cursor: pointer;
}

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