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

推荐订阅源

freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
H
Help Net Security
云风的 BLOG
云风的 BLOG
Apple Machine Learning Research
Apple Machine Learning Research
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
D
Docker
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Blog — PlanetScale
Blog — PlanetScale
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
GbyAI
GbyAI
博客园 - Franky
B
Blog RSS Feed
Stack Overflow Blog
Stack Overflow Blog
L
LangChain Blog
量子位
V
Visual Studio Blog
Y
Y Combinator Blog
小众软件
小众软件
N
Netflix TechBlog - Medium
博客园 - 三生石上(FineUI控件)
Microsoft Security Blog
Microsoft Security Blog
雷峰网
雷峰网

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
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 日 完成初稿

最近更新

猜你喜欢