诗与远方

为next添加友言评论支持

背景

最近多说经常莫名其妙的挂掉,而且也无法进行新站点的注册,总提示服务错误,请联系客服的信息,被逼无奈,只能转战其他的第三方评议平台,目前next官方只支持多说disqus,而disqus在国外,国内访问相对来说比较慢,在我家里的网络条件下,如果不翻墙,根本打不开,极大地影响了用户体验。

所以,自已动手,丰衣足食。简单地研究了一下next的目录以后,便开始开发友言的评论模块。

第一步,注册友言,添加新的站点

  • 打开 友言 的官网,注册新用户,并登录。

注册页面

  • 获取代码

第二步开始改造

(1). 在目录thems/next/layout/_scripts/third_party/comments下添加友言的模块文件youyan.swig文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if not (theme.duoshuo and theme.duoshuo.shortname)
and not theme.duoshuo_shortname
and not theme.disqus_shortname
and not theme.hypercomments_id
and not theme.gentie_productKey %}
{% if theme.youyan_uid %}
{% set uid = theme.youyan_uid %}
{% endif %}
{% if page.comments %}
<!-- UY BEGIN -->
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid={{uid}}"></script>
<!-- UY END -->
{% endif %}
{% endif %}

(2). 修改thems/next/layout/_scripts/third_party/comments.swig文件,添加友言脚本的引用。

1
2
3
4
5
{% include './comments/duoshuo.swig' %}
{% include './comments/disqus.swig' %}
{% include './comments/youyan.swig' %}
{% include './comments/hypercomments.swig' %}
{% include './comments/gentie.swig' %}

(3). 修改themes/next/layout/_partials/comments.swig文件,在endif之前添加友言的div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{% if page.comments %}
<div class="comments" id="comments">
{% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
<div class="ds-thread" data-thread-key="{{ page.path }}"
data-title="{{ page.title }}" data-url="{{ page.permalink }}">
</div>
{% elseif theme.facebook_sdk.enable and theme.facebook_comments_plugin.enable %}
<div class="fb-comments"
data-href="{{ page.permalink }}"
data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
data-width="{{ theme.facebook_comments_plugin.width }}"
data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
</div>
{% elseif theme.disqus_shortname %}
<div id="disqus_thread">
<noscript>
Please enable JavaScript to view the
<a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</div>
{% elseif theme.hypercomments_id %}
<div id="hypercomments_widget"> </div>
{% elseif theme.gentie_productKey %}
<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"> </div>
{% elseif theme.youyan_uid %}
<div id="uyan_frame"> </div>
{% endif %}
</div>
{% endif %}

(4). 在thems/next/_config.ymlThird Party Services Settings下添加友言的配置信息。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# Duoshuo ShortName
#duoshuo_shortname:
# youyan
youyan_uid: 你的UID

至此,改造完成。运行hexo clean清理一下目录,hexo g重新生成一次所有的文档,hexo s运行服务器以后,就可以查看评论效果了,效果如下图: