MENU

巧用七牛使多说完美兼容 Https

June 2, 2016 • Read: 3782 • Codes

网上教程很多,但一般都没有解决表情和图片的问题,所以这里重复造一个。

现在的多说默认的地址都是兼容 Https ,而使用了 Http 资源的都是一些第三方头像和表情等。

所以只要把这些给修改了就可以了。

其实用不用七牛都可以的,只是我主机比较慢(而且穷。。),所以用了七牛做加速。你可以根据你的实际情况来做修改。

准备工作

你需要一个反代的地址。

可选:申请过 Https 域名的七牛空间一个。

反代地址

先说一下反代地址,要使用七牛加速的话,你的 URL 地址必须符合以下格式:

yourdomain.com/proxy/{src}

否则的话,格式就随意了。

网上有很多大神使用 Nginx 做的反代,如:《让多说评论框完美支持 HTTPS》这个我没试过,毕竟菜🐔一枚,这一块一点都不懂。。

菜🐔的方法如下:

因为主机的问题。。。反正各种吧,不能在 URL 中直接放 src,像这种:

yourdomain.com/proxy/https://example.com/fake/image/url.png

以及这种(这种大神们的反代是可以的):

yourdomain.com/proxy/example.com/fake/image/url.png

否则会被重定向到主机的 404 页面。所以我用了 base64 将 src url encode 了。

yourdomain.com/proxy/aHR0cHM6Ly9leGFtcGxlLmNvbS9mYWtlL2ltYWdlL3VybC5wbmc=

URL 中的代码如下:

// base64时将`/`修改为了`-`
$src = str_replace('-', '/', $src);
$src = base64_decode($src);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $src);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36'));
$out = curl_exec($ch);
if (endsWith(strtolower($src), ".jpg")) {
    $contentType = "image/jpeg";
} elseif (endsWith(strtolower($src), ".png")) {
    $contentType = "image/png";
} elseif (endsWith(strtolower($src), ".gif")) {
    $contentType = "image/gif";
} elseif (endsWith(strtolower($src), ".bmp")) {
    $contentType = "image/bmp";
} elseif (endsWith(strtolower($src), ".webp")) {
    $contentType = "image/webp";
} else {
    $contentType = "image/png";
}
header('Content-Type:'.$contentType);
echo $out;
curl_close($ch);

设置七牛

将镜像源设置为https://yourdomain.com/proxy/即可。

修改Embed.js

首先从https://static.duoshuo.com/embed.js下载然后格式化

修改头像

位于 580 行附近,搜索 avatarUrl: function(e) { 直达。

修改 avatarUrl 方法

if (document.location.protocol == "https:") {
    if (e.avatar_url) {
        var matched;
        if (matched = e.avatar_url.match(/^([^\/]*(\/\/q\.)*(\/\/app\.)*qlogo\.cn\/.+\/)\d{2}$/)) {
            e.avatar_url = matched[1] + "100"; // 50的图高分屏下会很模糊,改不改随你。不改的话整个 If 分支就不需要了。
            e.avatar_url = e.avatar_url.replace(/^http\:\/\//, "https://");
        } else if (matched = e.avatar_url.match(/^(.*avatar\.duoshuo\.com\/avatar\-)\d{2}(\/.+)$/)) {
            e.avatar_url = matched[1] + "100" + matched[2]; // 50的图高分屏下会很模糊,改不改随你。不改的话整个 If 分支就不需要了。
            e.avatar_url = e.avatar_url.replace(/^http\:\/\//, "https://");
        } else if (e.avatar_url.match(/^http:\/\/wx\.qlogo\.cn.*$/) || e.avatar_url.match(/^.*avatar\.duoshuo\.com.*$/)) {
            e.avatar_url = e.avatar_url.replace(/^http\:\/\//, "https://");
        } else if (matched = e.avatar_url.match(/^(.*qlogo\.cn\/.+\/)\d{2}$/)) {
            e.avatar_url = matched[1] + "100"; // 50的图高分屏下会很模糊,改不改随你。不改的话整个 If 分支就不需要了。
        }  else if (e.avatar_url.match(/^.*img\d+\.douban\.com.*$/)) {
            e.avatar_url = e.avatar_url.replace(/img\d+\.douban\.com/, "img2.doubanio.com");//豆瓣无需镜像
        } 
        if (e.avatar_url.match(/^http:\/\/.+$/)) {
            e.avatar_url = "https://yours.qnssl.com/" + base64_encode(e.avatar_url);
            // 像大神们的那种反代大概就可以改成这样:
            // e.avatar_url = "https://yours.qnssl.com/" + e.avatar_url.replace(/^http\:\/\//, "");
            // 普通的地址:
            // e.avatar_url = "https://yourdomain.com/proxy?src=" + e.avatar_url;
        }
    } else {
        var matched = rt.data.default_avatar_url.match(/^(.*avatar\.duoshuo\.com\/avatar\-)\d{2}(\/.+)$/);
        if (matched != null) {
            rt.data.default_avatar_url = matched[1] + "100" + matched[2]; // 50的图高分屏下会很模糊,改不改随你。不改的话整个 If 分支就不需要了。
        }
    }
}
// 默认头像现在多说已经支持 Https, 因此不需要修改。
return e.avatar_url || rt.data.default_avatar_url

修改评论中的表情和图片

位于 740 行附近,搜索s.message直达。

var matched;
while(matched=s.message.match(/<img\s+src\s*=\s*\"(http:\/\/[^\"]+)\"/)) {
    s.message = s.message.replace(matched[1], "https://yours.qnssl.com/" + base64_encode(matched[1]));
      // 像大神们的那种反代大概就可以改成这样:
    // s.message = s.message.replace(matched[1], "https://yours.qnssl.com/" + matched[1].replace(/^http\:\/\//, ""));
    // 普通的地址:
    // s.message = s.message.replace(matched[1], "https://yourdomain.com/proxy?src=" + matched[1]);
}

// 下面这一行为`s.message`所在行,不需要修改,在此行前加上上面几行代码即可。
if (t += "<p>", s.parents.length >= i.max_depth && (!i.show_context || i.max_depth > 1) && s.parent_id && lt[s.parent_id] && (t += '<a class="ds-comment-context" data-post-id="' + s.post_id + '" data-parent-id="' + s.parent_id + '">' + D.reply_to + u(lt[s.parent_id].toJSON().author.name) + ": </a>"), t += s.message + '</p><div class="ds-comment-footer ds-comment-actions', s.vote > 0 && (t += " ds-post-liked"), t += '">', t += s.url ? et.timeAnchor(s.created_at, s.url) : et.timeText(s.created_at), "duoshuo" == s.source ? (t += '<a class="ds-post-reply" href="javascript:void(0);"><span class="ds-icon ds-icon-reply"></span>' + D.reply + "</a>" + et.likePost(s) + '<a class="ds-post-repost" href="javascript:void(0);"><span class="ds-icon ds-icon-share"></span>' + D.repost + '</a><a class="ds-post-report" href="javascript:void(0);"><span class="ds-icon ds-icon-report"></span>' + D.report + "</a>", s.privileges["delete"] && (t += '<a class="ds-post-delete" href="javascript:void(0);"><span class="ds-icon ds-icon-delete"></span>' + D["delete"] + "</a>")) : ("qqt" == s.source || "weibo" == s.source) && (t += '<a class="ds-weibo-comments" href="javascript:void(0);">' + D.comments, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.comments + "</span>)"), t += '</a><a class="ds-weibo-reposts" href="javascript:void(0);">' + D.reposts, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.reposts + "</span>)"), t += "</a>"), t += "</div></div></div>", i.max_depth > 1 && (s.childrenArray || s.children) && "weibo" != s.source && "qqt" != s.source) {
    t += '<ul class="ds-children">';
    var c = lt.getJSON(s.childrenArray || s.children);
    if (c) for (var s, d = -1, p = c.length - 1; p > d;) s = c[d += 1], t += et.post({
        post: s,
        options: i
    });
    t += "</ul>"
}

修改表情框中的表情

位于 1448 行附近。
搜索http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/直达

function t(t, s) {
    // 仅需要修改微博的表情,Wordpress 的不需要修改,默认为https
      // 仅需修改这一行
    var i = 0 === e.indexOf("微博") ? "https://yours.qnssl.com/" + base64_encode("http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb")) : S.STATIC_URL + "/images/smilies/" + s;
    // 像大神们的那种反代大概就可以改成这样:
    // var i = 0 === e.indexOf("微博") ? "https://yours.qnssl.com/" + "img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s;
    // 普通的地址:
    // var i = 0 === e.indexOf("微博") ? "https://yourdomain.com/proxy?src=" + "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s;
    "WordPress" === e && (t = " " + t + " "), a += '<li><img src="' + i + '" title="' + _(t) + '" /></li>'
}

附带一个base64_encode方法:

放到开头处!function(e, t, s) {的后面即可。

function base64_encode(str){
    var c1, c2, c3;
    var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-";                
    var i = 0, len= str.length, string = '';

    while (i < len){
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len){
            string += base64EncodeChars.charAt(c1 >> 2);
            string += base64EncodeChars.charAt((c1 & 0x3) << 4);
            string += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len){
            string += base64EncodeChars.charAt(c1 >> 2);
            string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            string += base64EncodeChars.charAt((c2 & 0xF) << 2);
            string += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        string += base64EncodeChars.charAt(c1 >> 2);
        string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        string += base64EncodeChars.charAt(c3 & 0x3F)
    }
    return string
}

以上。

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 17 条评论
  1. 博主,为啥我设置后,后台就进不去多说的管理界面了。。。

    1. @Mozhu多说插件默认不支持HTTPS,你看一下是不是这个原因,这篇文章中的内容影响不到后台插件

    2. @Hran我多说https一直没成功,用的懒人版,博主QQ多少啊。。qq请教下,有偿0.0赞赏点@(泪)

    3. @Mozhu主题页面有我QQ,不过现在还在外面浪。。。#(内伤)

  2. 话说都不知道怎么能弄个HTTPS的来装个逼。。

    1. @SIYO哈哈哈。。。我是用的Let's Encrypt的免费证书。。。

  3. 弱弱的问一句,境外主机调用七牛云文件会拖慢访问速度吗?:-I

    1. @③d's blog主要看访问者是国内的还是国外的,另外七牛有海外加速的

    2. @③d's blog访客会直接从七牛获取数据,不会经过境外主机中转的,话说是不是我理解错你的问题了

    3. @Hran解释一下,我说的是cdn加速
      ,但貌似它会解析到更远的节点,比如澳大利亚,而我的主机在香港

    4. @③d's blog他解析到哪里和你的主机在哪里没有关系

    5. @Hran问题是我觉得绕了很大一个弯,没有必要

    6. @③d's blog抱歉我没听懂????

  4. 感觉多说经常抽风

    1. @吴尼玛没错,我用了这么几天丢了不少评论了。。。

  5. 最后,我还是选择了 disqus。

    1. @ivmm蛤蛤蛤,不排除我也会换回去。。。不过现在这个一般情况下速度还挺快的,所以就先用用看了。