为next添加友言评论支持

背景

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

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

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

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

• 获取代码

  
  

第二步开始改造

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

  {% 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文件，添加友言脚本的引用。

{% 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。

   {% 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.yml中Third Party Services Settings下添加友言的配置信息。

# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# Duoshuo ShortName
#duoshuo_shortname:

# youyan
youyan_uid: 你的UID

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

更多精彩文章，请访问我的博客http://jinfang.life