惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
Google Online Security Blog
Google Online Security Blog
月光博客
月光博客
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
M
MIT News - Artificial intelligence
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
aimingoo的专栏
aimingoo的专栏
博客园 - 三生石上(FineUI控件)
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
MongoDB | Blog
MongoDB | Blog
H
Help Net Security
The Cloudflare Blog
Blog — PlanetScale
Blog — PlanetScale
F
Full Disclosure
G
Google Developers Blog
罗磊的独立博客
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
J
Java Code Geeks
A
About on SuperTechFans
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
GbyAI
GbyAI
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
The Register - Security
The Register - Security
U
Unit 42
D
Docker
Martin Fowler
Martin Fowler
L
LINUX DO - 热门话题
NISL@THU
NISL@THU
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
博客园_首页
Google DeepMind News
Google DeepMind News

Fooleap's Blog

渴望理想 | Fooleap's Blog 19 年底一些事 | Fooleap's Blog 藉秋风,跑起来 | Fooleap's Blog 一个人去跑步 | Fooleap's Blog 8 月的跑量仿佛是那暑假的作业 | Fooleap's Blog 三伏天跑步那么难受,为何还要跑? | Fooleap's Blog 解决小程序开发“当前系统代理不是安全代理” | Fooleap's Blog 忘却配速的夏日跑步 | Fooleap's Blog 六月天时“带水”跑步更爽 | Fooleap's Blog 出来混迟早要还的 | Fooleap's Blog 跑步不能当饭吃 | Fooleap's Blog 将京东移动端详情页链接转为 PC 端 | Fooleap's Blog 不是热就是雨 | Fooleap's Blog 这半月,我跑了 11 个 520 | Fooleap's Blog 跑完流汗一时爽,一直流汗一直爽 | Fooleap's Blog 初夏夜跑 | Fooleap's Blog Electron 中打开 QQ 临时会话 | Fooleap's Blog 春节期间的培隆角 | Fooleap's Blog 从春天跑到夏天 | Fooleap's Blog 晨雾中奔跑 | Fooleap's Blog 漫步春雨中 | Fooleap's Blog 跑在木棉花下 | Fooleap's Blog 我在春节依然坚持跑步 | Fooleap's Blog 伴随着日出跑步 | Fooleap's Blog 没有最好,只有更好 | Fooleap's Blog 电子气温计 | Fooleap's Blog 渡亭小学的金凤花 | Fooleap's Blog 随心而跑 | Fooleap's Blog 2018 跑步小结 | Fooleap's Blog 在 gVim 中使用“非等宽字体” | Fooleap's Blog 动车进汕,喜大普奔 | Fooleap's Blog 雨战汕马,漫步鮀城 | Fooleap's Blog 准备出发汕马 | Fooleap's Blog 环苏溪跑个半马 | Fooleap's Blog 不义之财 | Fooleap's Blog 跑去培隆看日落 | Fooleap's Blog 雨后跑土路 | Fooleap's Blog 秋意渐浓 | Fooleap's Blog 在夕阳下奔跑 | Fooleap's Blog 准备参加 2018 汕马 | Fooleap's Blog 不可立见的 spoiler 标签 | Fooleap's Blog TomTom Spark 表带 | Fooleap's Blog Disqus 支持新浪微博图床 | Fooleap's Blog 暂存 Disqus 匿名评论者邮箱地址 | Fooleap's Blog 组一台迷你主机 DeskMini 310 | Fooleap's Blog 我的个人信息卖给了谁? | Fooleap's Blog 我发了违法短信? | Fooleap's Blog 使用 Python 合并地图瓦片 | Fooleap's Blog 使用 Python 合并瓦片图 | Fooleap's Blog 拆电热水壶 | Fooleap's Blog 使用树莓派做监控显示 | Fooleap's Blog 南方的冷 | Fooleap's Blog 蓝牙耳机 Avantree Jogger Plus | Fooleap's Blog 新厝布网 | Fooleap's Blog 报装移动宽带 | Fooleap's Blog 双十一战绩 | Fooleap's Blog 郁闷的心情 | Fooleap's Blog 像 Disqus 一样获取链接颜色 | Fooleap's Blog Disqus 的 URL 编码问题 | Fooleap's Blog 选择框的全选联动 | Fooleap's Blog 弹出层中的视频全屏问题 | Fooleap's Blog 2016 年台风海马 | Fooleap's Blog 纯 CSS 实现导航图标动画 | Fooleap's Blog 湾头晨跑路线推荐:南湾小学跑道 | Fooleap's Blog Jekyll 显示每一年的文章数 | Fooleap's Blog 湾头晨跑路线推荐:南湾堤顶 | Fooleap's Blog Disqus 的 @ 提及功能 | Fooleap's Blog 近日渡亭堤顶的夕阳 | Fooleap's Blog 使用 Disqus API 上传图片 | Fooleap's Blog Disqus API 评论嵌套问题 | Fooleap's Blog Disqus API 的权限问题 | Fooleap's Blog 湾头晨跑路线推荐:环三湾 | Fooleap's Blog 如何下载 Apple Emoji 的 PNG 图片 公众号文章二维码 | Fooleap's Blog Disqus 的评论预审核 | Fooleap's Blog 湾头最好的跑道 | Fooleap's Blog 结合七牛和高德地图 API 显示照片位置 | Fooleap's Blog Zip 压缩排除特定目录 | Fooleap's Blog 流水涸摸蚬热 | Fooleap's Blog 2017 跨年跑 | Fooleap's Blog Jekyll 的中文字数统计 | Fooleap's Blog 为 Jekyll 文章页添加相关文章 | Fooleap's Blog 为 Jekyll 添加一个标签页面 | Fooleap's Blog 干了这瓶蛇草水 | Fooleap's Blog 在 macOS 上使用 NTFS 差点丢数据 Disqus Moderator Badge Text 已支持中文 为 Jekyll 添加一个简单的 API | Fooleap's Blog 为 Jekyll 加上简单搜索功能 | Fooleap's Blog 解决 Jemoji 的出错 | Fooleap's Blog 检测网络是否能够访问 Disqus | Fooleap's Blog 解决 This socket is closed 问题 更好的 Markdown 插图方式 | Fooleap's Blog 转换 Nike+ 的坐标数据 | Fooleap's Blog 高德地图 API 显示跑步路线 | Fooleap's Blog 善用 Google 搜索工具 | Fooleap's Blog 利用 Nike+ API 获取跑步路线数据 | Fooleap's Blog 七牛 API 生成页面 URL 二维码 旧年 12 月跑步笔记 | Fooleap's Blog 科学使用 Disqus | Fooleap's Blog 培隆角的日出 | Fooleap's Blog
Disqus 和多说在 Jekyll 的恩怨情仇 | Fooleap's Blog
fooleap · 2015-08-01 · via Fooleap's Blog

多说即将关闭,转 Disqus 可看此思路 科学使用 Disqus

自从使用 Jekyll 以来,一直使用 Disqus 作为评论系统,作为社会化评论系统的鼻祖,无论是用户量还是使用体验,Disqus 都是一级棒的,具体就不多说,毕竟这篇文章也并不是为了介绍 Disqus。

可是在特色社会的我国,Disqus 也有一些缺点:

  • 访问慢,有被墙的风险,这点不说也心知肚明,如浙江移动就无法访问 http://a.disquscdn.com
  • 允许使用的第三方登录都是要上梯的网站,比如 Facebook、Google、Twitter,国内网友除了一小部分爬墙好手外,访问困难

可以看出基本上就是网络的问题,所以鄙人也将 Disqus 弄成点击加载,而不是打开页面就立即加载。

那么国内的替代品是什么呢?友言,畅言?虽然有时候不是很稳定,但广受好评的还数多说。然而,从 WordPress 迁移到 Jekyll 已经有几年的“寒舍”,迁移成本并不低,正常迁移有那么几个步骤。

  1. 将 Disqus 的评论导出
  2. 将 Disqus 的 XML 文件转换为多说使用的 JSON 文件
  3. 导入多说后台并部署代码

几步骤中比较头疼的恐怕就是转换导出文件,在 GitHub 上很容易找到别人造的轮子,例如 GavinFoo/DISQUS2DUOSHUO

多说的文章管理 多说的文章管理

转换后导入,多说后台的文章管理中,可以看到比较“迷茫”的 Thread Key,看起来并不美观,而看了多说在 文档 里也说 data-thread-key 是文章的唯一标识,要正确的显示当前页的评论靠的是这个参数。

在 Jekyll 中,据 Jekyll 文档 页面 ID 可以用 page.id 这个变量,意味着在多说中原来的 Thread Key 便要一个一个改过,可以从后台改,也可以从后台导出文章数据后编辑完再导入,显然后者效率较高,倘若文章较多,恐怕手动修改是不可取的(太费时间)。

修改后如下:

修改后的 Thread Key 修改后的 Thread Key

到这里,在 Jekyll 中部署多说就很方便了,仅需根据多说官方的代码,配合以 Jekyll 的变量即可轻松解决。

<div class="ds-thread" data-thread-key="{{ page.id }}"  data-title="{{ page.title }} | {{ site.title }}" data-url="{{ site.url }}{{ page.url }}"></div>
<script>var duoshuoQuery = {short_name:"fooleap"};</script>
<script src="http://static.duoshuo.com/embed.js"></script>

这里注意 Jekyll 的配置文件里有设置 titleurl 才可使用 site.titlesite.url 变量。

异步加载多说评论

那么,如何将多说做成点击再加载呢?官方亦给出了文档,详细可摸 动态加载多说评论框的方法。Jekyll 又该如何做呢?根据官方的代码填鸭之后如下。

1、加载多说基础代码,跟上面一样。

<script>var duoshuoQuery = {short_name:"fooleap"};</script>
<script src="http://static.duoshuo.com/embed.js"></script>

2、使用 JS 编写一个加载评论的函数。

function toggleDuoshuoComments(container){
    var el = document.createElement('div');
    el.setAttribute('data-thread-key', location.pathname.split(/\./)[0]);
    el.setAttribute('data-url', location.href );
    el.setAttribute('data-author-key', 'fooleap');
    DUOSHUO.EmbedThread(el);
    jQuery(container).append(el);
}

这里采用 location.pathname.split(/\./)[0] 获取和 Jekyll 的 page.id 变量一样的字符串,location.href 则是页面 URL。

3、添加一个可以按的按钮。

<a href="javascript:void(0);" onclick="toggleDuoshuoComments('#comment-box');">展开评论</a>
<div id="comment-box" ></div>

到这里就差不多了,可以参考 这篇文章 将参数的获取改成采用 Jekyll 的变量,将按钮定制成可开关式的。

然而鄙人并没有将 Disqus 换成多说,这是为什么呢?因为原来的评论嵌套导入到多说后乱了,可能是转换过程中出错。

参考资料

本文历史

  • 2015 年 08 月 01 日 完成初稿

最近更新

猜你喜欢