利用 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 路径下。
| .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; | |
| } |
| {{ 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 }} |
| // 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); |
| 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; | |
| } | |
| } | |
| <?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> |
| 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); | |
| } |