反向代理 Disqus 评论框。见：https://benwong.cn/tech/Disqus-API.html

README.md

利用 Docker 一键部署 Disqus 反向代理到服务器，请看 https://github.com/Ben02/disqus-lite 。

---

注意：服务器需有 nginx 和 php 环境。

注意：因为 proxy_pass 里包含变量，所以要到 nginx.conf 里增加一条配置：

http{

  #...原有代码

  resolver 8.8.8.8;
}

注意：请在前台自行引入 jQuery 和 comments.css；并且自行下载 moment.js，和 comments.js 一起放到 js 文件夹下。

注意：comments.html 是以 Hugo 为例的模板，请自行替换里面的 {{ ... }}。

注意：main.js 里的内容可以放到自己主题的 js 文件里引入。

注意：index.php 应放在 post 路径下。

comments.css

.comment_num, .comment_create, .comment_change {
  color: rgb(42,46,46);
  font-size: 15px;
  font-weight: 700;
  border-bottom: rgb(86,148,241) 2px solid;
  line-height: 1;
  padding-bottom: 5px;
}
.comment_create {
  margin-left: 24px;
  border-bottom: 0;
  cursor: pointer;
}
.comment_change {
  border-bottom: 0;
  float: right;
  margin-top: 1px;
  cursor: pointer;
}
.comment_avatar {
  float: left;
  border-radius: 3px;
  height: 48px;
  width: 48px;
  background: rgb(221, 221, 221);
}
.comment_desc {
  margin-left: 62px;
}
.author_name {
  display: inline;
  padding-right: 10px;
  font-weight: bold;
  font-size: 14px;
  color: rgb(101, 108, 122);
}
.comment_time, .comment_reply {
  color: rgb(101, 108, 122);
  font-size: 12px;
}
.comment_reply {
  padding-left: 10px;
  cursor: pointer;
}
.comment_message {
  margin-left: 62px;
  font-size: 15px;
}
.comment_message p {
  color: rgb(42, 46, 46);
}
.comment_children {
  margin-left: 62px;
}
.comment_children .comment_avatar {
  height: 36px;
  width: 36px;
  margin-top: 7px;
}
.comment_children .comment_desc {
  margin-left: 50px;
}
.comment_children .comment_message {
  margin-left: 50px;
}
#comment_title {
  height: 30px;
  border-bottom: 2px solid rgb(231,233,238);
  margin-bottom: 20px;
  margin-top: 34px;
}
.comment_loading {
  display: block;
  margin: 30px auto;
}
@media screen and (max-width: 660px) {
    .comment_avatar, .comment_children .comment_avatar {
      width: 30px;
      height: 30px;
    }
    .comment_desc, .comment_children .comment_desc, .comment_message, .comment_children .comment_message {
      margin-left: 40px;
    }
    .author_name {
      display: block;
      line-height: 1;
      margin-bottom: 2px;
      font-size: 15px;
    }
    .comment_children .comment_avatar{
      margin-top:0;
    }
    .comment_children {
      margin-left: 0;
      border-left: 2px solid rgb(231,233,238);
      padding-left: 15px;
    }
    .comment_message, .comment_children .comment_message {
      margin-left:0;
      margin-top: 4px;
    }
}
.animated {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}


@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

comments.html

{{ if .Site.Params.disqusShortname }}
<a href="#comments"></a>
<div id="disqus_lite"></div>
<div id="disqus_thread"></div>
<script>
var disqus_run_count = 0;
var disqus_lite_run_count = 0;
var disqus_done = false;
var disqus_shortname = {{ .Site.Params.disqusShortname }};
var disqus_identifier = {{ if .Params.identifier }}{{ trim .Params.identifier "/" }}{{ else }}{{ trim .RelPermalink "/" }}{{end}};
var disqus_url = {{ if .Params.identifier }}"{{ trim .Site.BaseURL "/" }}{{ .Params.identifier }}"{{ else }}{{ .Permalink }}{{end}};
var disqus = {
          load : function disqus(){
            (function() {
                if (window.location.hostname == "localhost" ){
                  return;
                }
                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                dsq.onload = function()  {
                  disqus_done = true;
                };
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
            })();
            disqus_run_count ++;
          }
        }
showComments();
</script>
{{ end }}

comments.js

// jQuery 加载评论框 by Ben 2017.8

var disqusLite = {
    // 自建服务器地址，get 的地址和 nginx 配置一致，post 是放 index.php 的地方
    server: {
      get: 'https://d.benwong.cn/get',
      post: 'https://d.benwong.cn/post/index.php'
    },

    // 开始加载评论框
    load: function() {
      // moment.js 国际化配置
      moment.locale("zh-cn");
      // 自动获取 Disqus 的配置
      var listUrl = disqusLite.server.get + '/threads/listPosts.json?thread:ident=' + disqus_identifier + '&forum=' + disqus_shortname + '&order=asc';
      // 首次加载评论
      $.ajax({
          url: listUrl,
          dataType: 'jsonp',
          jsonp: "callback"
        })
        .done(function(res) {
          if (res.code == 0) {
            disqusLite.showList(res) //成功则加载整个评论框
            if (res.cursor.hasNext) {
              disqusLite.getNext(res.cursor.next); //若有翻页内容则继续加载
            }
          } else {
            disqusLite.showError(res.response);
          }
        })
        .fail(function(res) {
          disqusLite.showError(res);
        });
      disqus_lite_run_count++;
    },

    //整个评论框的架构
    showList: function(data) {
      //评论数
      var numUrl = disqusLite.server.get + '/threads/details.json?thread:ident=' + disqus_identifier + '&forum=' + disqus_shortname + '';
      $.ajax({
          url: numUrl,
          dataType: 'jsonp',
          jsonp: "callback"
        })
        .done(function(res) {
          if (res.code == 0) {
            $(".comment_num").append(res.response.posts + '条评论');
            $("#comment_title").append('<a onclick="window.open(\'' + disqusLite.server.post + '?type=0&thread=' + res.response.id + '\',\'\',\'channelmode=yes,scrollbars=no,width=380,height=450,left=60,top=150\')" class="comment_create">写评论</a>');
            $("#comment_title").append('<a class="comment_change" onclick="disqusLite.showDisqus()" title="请确认海外网络连接通畅后切换">切换完整版</a>');
          } else {
            disqusLite.showError(res.response);
          }
        })
        .fail(function(res) {
          disqusLite.showError(res);
        });

      $(".comment_loading").hide();
      $("#disqus_lite").append('<div id="comment_title"><a class="comment_num"></a></div>');
      $("#disqus_lite").append('<div id="comment_body" class="animated fadeInDown"></div>');

      //显示评论主体
      disqusLite.showPosts(data);
    },

    //加载翻页内容
    getNext: function(cursor) {
      var listUrl = disqusLite.server.get + '/threads/listPosts.json?thread:ident=' + disqus_identifier + '&forum=' + disqus_shortname + '&order=asc&cursor=' + cursor;

      $.ajax({
          url: listUrl,
          dataType: 'jsonp',
          jsonp: "callback"
        })
        .done(function(res) {
          if (res.code == 0) {
            disqusLite.showPosts(res) //成功则把翻页内容接到评论框里
            if (res.cursor.hasNext) {
              disqusLite.getNext(res.cursor.next); //还能翻页就继续
            }
          } else {
            disqusLite.showError(res.response);
          }

        })
        .fail(function(res) {
          disqusLite.showError(res);
        });
    },

    //显示评论主体
    showPosts: function(data) {
      //console.log(data);
      data.response.forEach(function(c) {
        disqusLite.insertPost(c);
      })
    },

    //单条评论的插入
    insertPost: function(c) {
      var author_name = '';
      if (c.author.url == '') {
        author_name = c.author.name;
      } else {
        author_name = '<a href="' + c.author.url + '">' + c.author.name + '</a>';
      }
      //回复的链接
      var replyLink = '<a onclick="window.open(\'' + disqusLite.server.post + '?type=1&thread=' + c.thread + '&parent=' + c.id + '\',\'\',\'channelmode=yes,scrollbars=no,width=380,height=450,left=60,top=150\')" class="comment_reply">回复</a>';
      //每条评论的模板
      var comment_post = '<div class="comment_wrapper"><img class="comment_avatar" src="' + c.author.avatar.large.cache + '"><div class="comment_desc"><p class="author_name">' + author_name + '</p><a href="#comment-' + c.id + '" class="comment_time">' + moment(c.createdAt + '+00:00').fromNow() + '</a>' + replyLink + '</div><div class="comment_message">' + c.message + '</div></div>';
      //插入嵌套
      if (!c.parent) {
        $("#comment_body").prepend('<div class="comment_post" id="comment-' + c.id + '">' + comment_post + '</div>');
      } else {
        $("#comment-" + c.parent).append('<div class="comment_post comment_children" id="comment-' + c.id + '">' + comment_post + '</div>');
      }
    },

    //切换到原版
    showDisqus: function() {
      $("#disqus_lite").hide();
      $("#disqus_thread").show();
      disqus.load();
    },

    //错误处理
    showError: function(err) {
      $("#disqus_lite").prepend('<p>出错了，请尝试刷新页面或报告博主！（错误信息：' + err + '）</p>');
    }
  }
  
  //异步加载 moment.js
  var mmt = document.createElement('script');
  mmt.type = 'text/javascript';
  mmt.async = true;
  mmt.src = '/js/moment.js';
  mmt.onload = function() {
    if (disqus_lite_run_count == 0) {
      disqusLite.load();
    }
  };
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(mmt);

disqus.conf

server {
  listen  80 ;
  listen [::]:80;
  server_name d.benwong.cn;
  return 301 https://$host$request_uri;
}

server {
        listen 443 ssl http2;
        root /var/www/disqus;
        server_name d.benwong.cn; #填写绑定证书的域名
        ssl on;
        ssl_certificate /home/ben/ssl/1_d.benwong.cn_bundle.crt;
        ssl_certificate_key /home/ben/ssl/2_d.benwong.cn.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;
        access_log  /var/log/nginx/disqus_access.log;
        error_log   /var/log/nginx/disqus_error.log;
  
  location / {
    root /var/www/disqus;
    index  index.php index.html index.htm;
    if (-f $request_filename) {
    rewrite ^/(.*)$  /$1 break;
    }
  }

  location ~* \.php$ {
    fastcgi_index   index.php;
    fastcgi_pass    127.0.0.1:9000;
    include         fastcgi_params;
    fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
    fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
  }

  location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
    root /var/www/disqus;
    access_log   off;
    expires      1d;
  }
  location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
    root /var/www/disqus;
    access_log   off;
    expires      10m;
  }
  location ~ ^/get/(.*) {
    proxy_pass https://disqus.com/api/3.0/$1?api_key=E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F&$args;
    proxy_set_header Referer https://disqus.com;
    proxy_set_header Origin https://disqus.com;
    proxy_redirect off;
  }
}

index.php

<?php
/*
type 是评论的类型，0 为撰写新评论，1 为回复评论
thread 是文章的 id，会自动传过来的
parent 是父评论的 id，会自动传过来
*/
?>
<!-- Page From https://imququ.com/ -->
<!Doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0" name="viewport">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="always">
<meta name="robots" content="noindex, nofollow, noarchive">
<title><?php
if ($_GET["type"]=="0"){
echo "撰写新评论";
}else{
  echo "回复评论";
}
 ?>
 - Ben Wong</title>
<style type="text/css">
*{margin:0;padding:0}html,body{height:100%}body{background:#fff;color:#2a2e2e;font-size:15px;font-family:"Helvetica Neue",arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection,::-moz-selection,::-webkit-selection{background-color:#2479CC;color:#eee}h3{font-size:1.3em;line-height:1.5;margin:15px 30px;text-align:center}a{color:#2479CC;text-decoration:none}.card{margin:15px 25px;text-align:left}.submit input,.submit textarea{-webkit-appearance:none;border:1px solid #bbb;border-radius:1px;font-size:15px;height:20px;line-height:20px;margin-left:10px;padding:6px 8px}.submit span{position:relative;top:8px}.submit li{display:-webkit-box;display:-ms-flexbox;display:flex;margin:15px 0}.submit textarea{height:130px}.submit .line{-webkit-box-flex:1;display:block;-ms-flex:1;flex:1}.submit .btn-submit{-webkit-appearance:none;background:#12b0e6;border:none;border-radius:0;box-shadow:inset 0 -5px 20px rgba(0,0,0,.1);color:#fff;cursor:pointer;display:block;font-size:14px;line-height:1;padding:0.625em .5em;width:100%}.submit li.tips{color:#999;font-size:14px}
</style>
</head>
<body>
<header>
<!--<h3>发表评论</h3>-->
</header>
<div class="bd">
  <div class="card submit">
    <form onsubmit="return false" id="create-post">
      <ul>
        <li><span>昵称：</span><input class="line" name="author_name" required placeholder="昵称会被公开显示">
        <li><span>邮箱：</span><input class="line" name="author_email" type="email" required placeholder="邮箱不会公开显示">
        <li><span>网址：</span><input class="line" name="author_url" type="url" placeholder="可输入个人主页地址">
        <li><span>内容：</span><textarea class="line" name="message" required placeholder="请不要发表无意义的评论内容"></textarea>
        <li><input type="hidden" name="thread" value="<?php echo $_GET["thread"]; ?>"><?php if(isset($_GET["parent"])){ ?><input type="hidden" name="parent" value="<?php echo $_GET["parent"]; ?>"><?php } ?><button class="btn-submit" type="submit"> 立即发表 </button>
        <li class="tips">注：通过本表单提交的数据，会原样转发给 Disqus，本站不做任何存储和记录。
        <li><a href="#close" onclick="window.close();void(0)">放弃评论</a>
      </ul>
    </form>
  </div>
</div>
<footer></footer>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>!
function(a) {
  function e() {
    try {
      localStorage.author_name = $('[name="author_name"]').val(), localStorage.author_email = $('[name="author_email"]').val(),localStorage.author_url = $('[name="author_url"]').val()
    } catch (a) {}
  }
  function t() {
    $('[name="author_name"]').val(localStorage.author_name), $('[name="author_email"]').val(localStorage.author_email), $('[name="author_url"]').val(localStorage.author_url), ["author_name", "author_email", "message"].some(function(a) {
      var e = $('[name="' + a + '"]');
      return e.val() ? void 0 : e.focus()
    })
  }
  var o = !1;
  $("#create-post").on("submit", function(e) {
    if (e.preventDefault(), !o) {
      o = !0;
      var t = $(".tips");
      t.html("\u63d0\u4ea4\u4e2d..."), $.post("/get/posts/create.json", $("#create-post").serialize()).then(function(e) {
        o = !1, !e.code==0 ? t.html("\u63d0\u4ea4\u5931\u8d25\uff1a" + e.response) : ($(".btn-submit").prop("disabled", !0), t.html("\u63d0\u4ea4\u6210\u529f\uff01\u672c\u7a97\u53e3\u5373\u5c06\u5173\u95ed\u3002"), setTimeout(function() {
          try {
            a.opener.location.hash = "comment-" + e.response.id, a.opener.disqusLite.insertPost(e.response), a.close()
          } catch (t) {
            a.close()
          }
        }, 1e3))
      })
    }
  }), t(), $('[name="author_name"], [name="author_email"], [name="author_url"]').on("change", e)
}(this);</script>
</body>
</html>

main.js

function showComments() {
	disqus.load();
	setTimeout(function() {
		if (!disqus_done && disqus_lite_run_count == 0) {
			$("#disqus_lite").html('<img src="https://benwong.cn/images/loading.png" class="comment_loading animated fadeInDown">');
			var dsq = document.createElement('script');
			dsq.type = 'text/javascript';
			dsq.async = true;
			dsq.src = '/js/comments.js';
			dsq.onload = function() {
				disqusLite.load();
			};
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

			$("#disqus_thread").hide();
		}
	}, 2000);
}