之前在这篇文章中尝试解决多说在https下的问题,但是后来由于ds.duoshuo.com停止对https的解析导致头像在SSL中加载失效.前几天看到了Jerry Qu的博客中的使用ngnix反代缓存头像的方法,稍作修改,可借用七牛,实现无需设置服务器反向代理,即可让多说完美支持SSL.

相比于使用反代缓存多说头像,直接利用七牛有以下几点好处:
1,可以让不支持反代的环境(比如托管在git的静态页面)中的多说也支持https.
2,借用七牛CDN能让像自己这样的海外VPS的评论头像图片也获得加速效果.
3,免除了服务器缓存图片的磁盘空间开销.

其实实现起来非常简单:

配置七牛空间

1,首先,需要4个七牛云存储的空间.
如果是七牛的标准用户以上的话,可以创建20个空间,直接创建4个公开空间即可;
如果是体验用户,只能创建一个空间,那就需要注册4个体验用户并分别创建公开空间了.

2,进入创建的空间,选择”空间设置”->”基本设置”,在”镜像存储”填写需要缓存的头像域名,四个空间分别填写的镜像源为:
镜像源： http://himg.bdimg.com/
镜像源： http://ds.cdncache.org/
镜像源： http://app.qlogo.cn/
镜像源： http://tp1.sinaimg.cn/

qiniu-ssl-box1

3,选择”域名设置”,在HTTPS一栏填写自定义的qbox.me的二级域名(自己取名),并提交审核.(审核一般是2个工作日,然而我国庆后提交的审核整整等了7个工作日= =|| )

4,在空间的”基本设置”中可设置”防盗链”选项,控制来访域名,毕竟七牛的免费配额和请求数有限,还是稍微限制下防止滥用.

5,记下4个https的域名,等审核通过后就可以使用了,这之前可以先行准备,修改多说的js文件:

修改多说embed.js

1,下载http://static.duoshuo.com/embed.js
修改以下部分(请自行修改替换):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
avatarUrl: function(e) {
	if (document.location.protocol == "https:") {
		if (e.avatar_url) {
			e.avatar_url = e.avatar_url.replace(/^http\:\/\//, "https://");
			e.avatar_url = e.avatar_url.replace(/himg\.bdimg\.com/, "dn-***.qbox.me");//镜像源是baidu的https域名
			e.avatar_url = e.avatar_url.replace(/ds\.cdncache\.org/, "dn-***.qbox.me");//镜像源是cdncache的https域名
			e.avatar_url = e.avatar_url.replace(/img\d+\.douban\.com/, "img1.doubanio.com");//豆瓣无需镜像
			e.avatar_url = e.avatar_url.replace(/app\.qlogo\.cn/, "dn-***.qbox.me");//镜像源是qlogo的https域名
			e.avatar_url = e.avatar_url.replace(/tp\d+\.sinaimg\.cn/, "dn-***.qbox.me");//镜像源是sina的https域名
		} else {
			rt.data.default_avatar_url = "https://***/***.jpg";//评论区默认头像的地址,请自行修改
		}
	}
	return e.avatar_url || rt.data.default_avatar_url
}

注意1: 以上代码中域名部分的***请自行替换成上一步当中提交审核的那4个自定义的qbox.me域名,如需压缩js请先把注释内容删干净.
注意2: 默认头像地址自行设置,需支持https,可直接上传需要的图片到七牛得到外链.
注意3: 豆瓣默认的头像地址由于禁止了外链,七牛请求缓存会被豆瓣禁止,这里直接参考了豆瓣官方api文档,域名替换成 https://img2.doubanio.com/ 即可显示头像,域名替换成 https://img1.doubanio.com/ 或者 https://img3.doubanio.com/ 即可显示头像(2016-08-24: 豆瓣最近修改了api,img2.doubanio.com 无效了,而img1和img3均有效,且多说貌似也自己用了doubanio的头像地址,一般情况下可以不用正则匹配了),不需要用到七牛.

2,分组表情建议直接在多说后台设置禁止使用表情,一来多说表情里的坑太多,embed.js中对表情的地方改了好几次了,不保证修改了以后还能不出问题,二来,没什么必要,带的那些表情实在是丑.
如果实在需要表情的话也可以,WordPress的头像可以直接取https://static.duoshuo.com/,其他的微博头像域名是http://img.t.sinajs.cn/,也可用上面的方法新建个七牛空间进行表情缓存.不过显示表情的时候也要进行正则替换就是了.

3,将修改后的embed.js上传到七牛,并将多说默认引用的地址改为七牛的https外链地址.这样即可实现多说的本地化(包括CDN加速)和SSL下完美头像缓存,除了数据部分,静态资源和图片的存取均交由七牛完成.
至于多说引用的地方需要根据项目自行查找,如WordPress就在wp-content/plugins/duoshuo/的WordPress.php里,其他请自行谷歌”多说 本地化”.

PS:

其实这些篇文章的内容在国庆后就已经实现了,愣是忙到双十一后才整理出来orz~ ~
第二次解决多说这个蛋疼的问题了,反正现在暂时可以放心的全站强制SSL了.
但是本文依然具有时效性,以后不知道多说是否会再改.而且多说的稳定性真的不敢恭维啊…或许该试试用Disqus了么?

参考链接:
让多说评论框完美支持 HTTPS

豆瓣用户API V2