盒子
盒子
文章目录
  1. 环境准备
  2. disqus-php-api部署
    1. Disqus设置
  3. 修改fexo源码
    1. 添加disqus评论开关
    2. 添加disqus-php-api
    3. 恢复主题评论统计
  4. 参考资料

为Hexo主题fexo添加disqus反代

fexo主题默认使用disqus评论系统,但鉴于disqus在国内的访问速度实在惨不忍睹,决定尝试使用反代加速访问。

目前现成的disqus反代主要有以下两种:

上述两种方案均支持根据网络情况判断加载简易/原版评论框。在此我选择了disqus-php-api,原因无它,只是先接触disqus-php-api而已。以下为替换为disqus-php-api的具体步骤,供大家参考,也给自己留下一个记录。

环境准备

在替换为disqus-php-api前,必须先准备好php环境。在php环境部署这块就不多做说明了。
另外需要注意disqus-php-api依赖于php-curl。

disqus-php-api部署

cd /var/www/html
git clone https://github.com/fooleap/disqus-php-api.git
# 根据 disqus-php-api/api/config.php 中的注释修改相应配置
/*
* Disqus 设置
*
* DISQUS_PUBKEY Disqus 公钥,无需修改
* DISQUS_USERNAME Disqus 用户名
* DISQUS_EMAIL Disqus 注册邮箱,重要
* DISQUS_PASSWORD Disqus 密码,重要
* DISQUS_WEBSITE 网站域名,如:'http://blog.fooleap.org'
* DISQUS_SHORTNAME 网站在 Disqus 对应的 Shortname
* DISQUS_APPROVED 评论是否免审核,true 即跳过评论预审核,false 则按后台设置
*
* 留言者的名字为 DISQUS_USERNAME 或邮箱号为 DISQUS_EMAIL 皆视为管理员
* 填写正确的邮箱、密码之后,将以网站管理员的身份去获取评论数据。
* 发送评论请求时,请填写在此设置的用户名、邮箱信息,将以登录身份发表评论。
*
*/
/*
* 图片设置
*
* GRAVATAR_CDN Gravatar 头像 CDN
* GRAVATAR_DEFAULT 默认头像 URL
* EMOJI_PATH Emoji 表情 PNG 资源路径
*
*/
/*
* PHP Mailer 设置
*
* SITE_NAME 网站名
* SMTP_SECURE 安全协议
* SMTP_HOST 邮箱服务器
* SMTP_PORT 端口号
* SMTP_USERNAME SMTP 登录的账号,即邮箱号
* SMTP_PASSWORD SMTP 登录的账号,即邮箱密码
*
*/

Disqus设置

在disqus上将站点评论设置为允许匿名评论

开启Disqus匿名评论

修改fexo源码

添加disqus评论开关

修改themes/fexo/layout/_partial/component/disqus.ejs文件,添加disqus开关

<% if (theme.disqus.enable){ %>
<% if (theme.disqus.shortname){ %>
<section class="disqus-comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<script>
var disqus_shortname = '<%= theme.disqus.shortname %>';
<% if (page.permalink){ %>
var disqus_url = '<%= page.permalink %>';
<% } %>
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<script id="dsq-count-scr" src="//<%= theme.disqus.shortname %>.disqus.com/count.js" async></script>
<% } %>
<% } %>

此时可将themes/fexo/_config.yml关于评论部分修改为如下内容,暂时关闭原版disqus评论。注意将your_disqus_shortname修改为你的disqus shortname。

# Comment service
# disqus_shortname: your_disqus_shortname
# hypercomments_id: 89821
# gentie_key: d16a7241e7cd4b389584ed8db2a4e8bc
disqus:
enable: false
shortname: your_disqus_shortname

添加disqus-php-api

新建themes/fexo/layout/_partial/component/disqusapi.ejs文件,加入以下内容:

<% if (theme.disqusapi.enable){ %>
<div id="comments"></div>
<% if (theme.disqusapi.toggle){ %>
<input type="checkbox" id="comment-toggle" disabled />
<% } %>
<script>
var emojiList = [{
code:'smile',
title:'笑脸',
unicode:'1f604'
},{
code:'mask',
title:'生病',
unicode:'1f637'
},{
code:'joy',
title:'破涕为笑',
unicode:'1f602'
},{
code:'stuck_out_tongue_closed_eyes',
title:'吐舌',
unicode:'1f61d'
},{
code:'flushed',
title:'脸红',
unicode:'1f633'
},{
code:'scream',
title:'恐惧',
unicode:'1f631'
},{
code:'pensive',
title:'失望',
unicode:'1f614'
},{
code:'unamused',
title:'无语',
unicode:'1f612'
},{
code:'grin',
title:'露齿笑',
unicode:'1f601'
},{
code:'heart_eyes',
title:'色',
unicode:'1f60d'
},{
code:'sweat',
title:'汗',
unicode:'1f613'
},{
code:'smirk',
title:'得意',
unicode:'1f60f'
}];
var disq = new iDisqus('comments', {
forum: '<%= theme.disqusapi.shortname %>',
site: '<%= theme.disqusapi.site %>',
api: '<%= theme.disqusapi.api %>',
mode: <%= theme.disqusapi.mode %>,
badge: '<%= theme.disqusapi.badge %>',
timeout: <%= theme.disqusapi.timeout %>,
toggle: '<%= theme.disqusapi.toggle %>',
emoji_path: '<%= theme.disqusapi.emoji_path %>',
init: true,
count: true,
emoji_list: emojiList
});
disq.count();
</script>
<% } %>

并在themes/fexo/layout/_partial/component/comments.ejs添加引用disqusapi.ejs

<div class="fexo-comments <%= className %>">
<%- partial('disqus') %>
<%- partial('disqusapi') %>
<%- partial('duoshuo') %>
<%- partial('gentie') %>
<%- partial('hypercomments') %>
</div>

themes/fexo/layout/_partial/head.ejs中引入disqus-php-api的css、js

<% if (theme.disqusapi.enable){ %>
<link rel="stylesheet" href="//disqus.kuroy.me/dist/iDisqus.min.css" />
<script src="//disqus.kuroy.me/dist/iDisqus.min.js"></script>
<% } %>

修改主题配置文件themes/fexo/_config.yml,注意修改your_short_nameyour_sitedisqus.your_site为你自己的。

disqusapi:
enable: true
shortname: your_short_name
site: https://your_site
api: https://disqus.your_site/api
mode: 2
badge: 博主
timeout: 3000
# toggle: comment-toggle
emoji_path: https://disqus.kuroy.me/images/icons/emoji/unicode/ #此处由于默认的github链接访问速度同样不佳,我用nginx配置了反代。(可选,不填默认试用github资源。)

此时不出意外的话disqus-php-api已经可以正常加载了。但还有一些遗留问题,比如评论数的统计。

恢复主题评论统计

修改themes/fexo/layout/_partial/article.ejs,修改与如下内容相近的部分:

<% if (theme.disqus.shortname && theme.url && page.comments){ %>
<span>
<i class="icon-comment"></i>
</span>
<a href="<%= theme.url + url_for(page.path) + '#comment-count' %>"><span data-disqus-url="<%= url_for(page.path) %>"></span></a>
<% } %>

至此disqus-php-api添加完成,一切功能正常。

参考资料

修改源码添加disqus-php-api:

〖原创〗基于disqus-php-api在Hexo博客中使用Disqus

支持一下
扫一扫,支持一下