Hexo博客(11)添加网易云跟帖评论系统

2017年6月1日多说正式关闭，使用搜狐畅言评论系统又必须域名备案，所以将hexo博客切换为网易云跟帖评论系统。

2019.5.11更新，已在vps用spring boot搭建自己的评论系统，参考 Hexo博客(25)自建博客评论系统

主题配置中添加网易云跟帖开关变量

首先在网易云跟帖https://gentie.163.com/index.html 注册账号，完善站点信息。
在主题的_config.yml配置文件中给云跟帖加个开关变量，同时也是云跟帖的appkey：
netease_gentie_appkey: ******************
appkey在网易云跟帖站长后台-获取代码-APP SDK处拷贝得到。
后面会根据此变量决定是否启用云跟帖，方便控制，还有个好处是只需在此处配置appkey，在评论框代码里引用这个变量，方便更换。

文章页面添加网易云跟帖评论框

我使用的free2mind主题中，评论框展示脚本在themes\free2mind\layout\_partial\post\comment.ejs中，在其中加入云跟帖评论框代码，根据theme.netease_gentie_appkey变量决定是否加载代码，添加后comment.ejs如下：

<% if (page.comment){ %>
<section id="comment">
  <% if(theme.duoshuo_shortname) { %>
       <div class="ds-thread" data-thread-key="<%- page.path %>" data-title="<%- page.title %>" data-url="<%- page.permalink %>"></div>
  <% } else if(config.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>
  <% } else if(theme.netease_gentie_appkey) { %>
    <div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
    <script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
    <script>
    var cloudTieConfig = {
      url: document.location.href,
      sourceId: "",
      productKey: "<%= theme.netease_gentie_appkey %>",
      target: "cloud-tie-wrapper"
    };
    var yunManualLoad = true;
    Tie.loader("aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vcGMvbGl2ZXNjcmlwdC5odG1s", true);
    </script>
  <% } %>
</section>
<% } %>

代码同样在网易云跟帖后台管理页面的获取代码中可得到，用的是WEB代码。这里我把script脚本中的productKey替换为theme.netease_gentie_appkey变量了。
可以看到里面还有多说和disqus的评论框代码，虽然多说关闭了，disqus国内用不了，还是保留了其代码。
要注意的是，使用网易云跟帖后，要在主题的_config.yml配置文件中注释掉duoshuo_shortname变量，否则大家都懂的，if else从上到下执行，有了duoshuo_shortname配置就不会加载云跟帖的评论框代码了。
仔细看下云跟帖的代码，可以看到其中的div是评论框，其他的script脚本其实是评论公共代码，是可以放到别处的，只要保证在评论框所在的页面被加载之前加载公共代码即可。
还有，网易云跟帖提供的Hexo代码接入教程以官方默认的landscape主题为例，代码加在themes/landscape/layout/_partial/article.ejs文件里，我用的free2mind主题单独给评论框写了个模版comment.ejs，也会被引到article.ejs中，都一样。

留言页面添加网易云跟帖评论框

我是用的free2mind主题有个留言页面，模版为themes\free2mind\layout\message.ejs，在其中添加云跟帖评论框，和文章页面的评论框添加方法一样，不贴代码了。

修改hosts文件本地测试

由于网易云跟帖管理后台设置的域名必须跟当前站点的域名一致才能关联，要想本地测试时也能加载云跟帖，需要修改hosts文件使网站域名指向localhost即127.0.0.1，编辑C:\Windows\System32\drivers\etc\hosts文件，加入一条：
127.0.0.1 masikkk.com
由于hosts中无法指定端口号，必须使用默认的80端口，所以还需要以80端口来启动hexo本地测试服务器：
hexo s -p 80
本地测试完成后记着删除此条hosts映射，或者嫌麻烦就每次都hexo d部署后查看。

文章侧边栏添加网易云跟帖评论数

在网易云跟帖站长后台-获取代码-WEB代码中获得跟帖参与数代码如下：

<a class="cloud-tie-join-count" href="javascript:void(0);">
  <span class="icon-comment"></span>
  <span class="join-count">0</span>
  <span class="join-text">人参与</span>
</a>

我把他放在每篇文章的侧边栏里，修改free2mind主题的themes\free2mind\layout\_partial\post\meta.ejs文件，meta.ejs是单篇文章页面的侧边栏插件配置，我对评论数代码做了一些修改，使得和侧边栏的其他项风格一致，修改后代码如下：

<!-- 网易云跟帖评论数 -->
<div class="meta-widget">
<a class="cloud-tie-join-count" href="javascript:void(0);">
  <i class="fa fa-commenting-o"></i>
  评论 <span class="join-count" style="color:#555; font-size:100%;">0</span>
</a>
</div>

自己改样式时注意下，虽然对前端的东西不是很懂，但感觉a标签的class应该必须有cloud-tie-join-count，评论数span标签的class应该必须有join-count，否则网易云跟帖数据回传可能出问题。

首页文章列表添加网易云跟帖评论数

在网易云跟帖站长后台-获取代码-WEB代码中获得列表页参与数代码如下：

<!-- DOM元素 -->
<!-- 根据站点情况，配置data-url或data-sourceId中的一个即可 -->
<span
  lang="join-count"
  class="join-count"
  data-url=""
  data-sourceId=""
>0</span>

<!-- JavaScript 配置 -->
<script>var yunModuleEnv = true;</script>
<script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
<script>
  var yunTieProductKey = "********************";
  Tie.loader("aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vZXh0ZW5kL2xpc3Rfam9pbl9zY3JpcHQuaHRtbA==", true);
</script>

添加到首页的文章列表上，修改free2mind主题的themes\free2mind\layout\_partial\index.ejs文件，index.ejs模版中遍历page.posts(当前页的所有文章)生成首页上的文章列表。
配置data-url变量，使得云跟帖代码能定位到文章的url，这样才能获得此篇文章的评论数。在循环page.posts.each(function(item)中，item就是每篇文章变量，所以item.permalink就是页面的完整网址，具体hexo变量定义参考官网https://hexo.io/zh-cn/docs/variables.html ，最终添加到index.ejs中的代码是：

<span class="comments-link">
    <span class="fa fa-comments" aria-hidden="true"></span>
    <!-- 网易云跟帖文章列表页参与数代码，根据站点情况，配置data-url或data-sourceId中的一个即可 -->
    评论数 <span lang="join-count" class="join-count" data-url="<%- item.permalink %>" data-sourceId="">0</span>
    <!-- 云跟帖JavaScript 配置 -->
    <script>var yunModuleEnv = true;</script>
    <script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
    <script>
      var yunTieProductKey = "<%= theme.netease_gentie_appkey %>";
      Tie.loader("aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vZXh0ZW5kL2xpc3Rfam9pbl9zY3JpcHQuaHRtbA==", true);
    </script>
</span>

添加网易云跟帖热门新闻插件

在网易云跟帖站长后台-功能模块-热门新闻获得代码，热门新闻类似多说的热门评论，展示评论数最多的n篇文章，自己可以设置展示多少篇文章等参数。

类似添加多说热门评论插件，新建一个Widget并加载即可。在themes\free2mind\layout\_widget目录下新建gentie_top_comments.ejs，将网易云跟帖官方给出的“热门新闻”脚本复制进去，根据有没有配置netease_gentie_appkey来判定是否启用“热门新闻”侧边栏，以及与主题自带的其他Widget保持样式一致，然后在主题的_config.yml配置文件中的widgets:项添加gentie_top_comments插件即可启用。

最终我的gentie_top_comments.ejs内容如下：

<% if (theme.netease_gentie_appkey){ %>
<div class="widget">
    <h4><%= __('热评文章') %></h4>
    <ul class="blogroll list-unstyled">
    <div id="hot-news-wrap"></div>
    <script>var yunModuleEnv = true;</script>
    <script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
    <script>
      var yunTieProductKey = "*****************";
      var yunHotNewsWrap = "hot-news-wrap";   //放置的DOM节点ID 或 样式类
      Tie.loader("aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vZXh0ZW5kL2hvdF9uZXdzX3NjcmlwdC5odG1s", true);
    </script>
    </ul>
</div>
<% } %>

问题是，加载出来的插件极其丑，并且“热评文章”这个h4标题还乱码，最终放弃加载“热门新闻”插件。

去掉多说相关侧边栏插件

多说关闭后，原来的多说最近评论、最近访客、热评文章侧边栏插件都用不了了，去掉页面上这些插件。
修改主题的_config.yml配置文件，将widgets:下的这三个插件注释掉：

#- recent_comments
#- recent_visitor
#- duoshuo_top_pages

还有我的留言页面模版里面单独加载了最近评论widget，在themes\free2mind\layout\message.ejs将其注释掉。

参考

网易云跟帖官方帮助文档
https://gentie.163.com/help.html
多说评论关闭服务后迁移到网易云跟帖
http://www.cduyzh.com/hexo-settings-7/

当前位置 : 首页 » 文章分类 : 开发 » Hexo博客(11)添加网易云跟帖评论系统