解决Next主题评论区不显示的问题

今天在搞博客的评论汐统，使用Valine，踩了敲多的坑(不知道是不是我脸黑)。来说说怎么解决的吧。

一. 返回404(101)

问题描述

网页摁F12，在Console里有404提示，但是在Response里提示错误Code是101。

Solution

上网查了一下，发现如果同时使用Valine的评论和阅读统计时，要在Leancloud应用的储存的结构化数据里，分别新建两个名字为Comment和Counter的Class(分别用作储存评论和阅读计数)。

二. 网页无评论区

问题描述

如图所示:

有评论区但是就是不显示

Solution

调了半天不能解决。既然不能靠主题生成，为什么不能把别人生成好的拿过来呢？

打开百度，搜索Hexo Next Valine，找到一个有Valine的博客，查看网页源代码，把Valine那一块复制下来。

复制的长这样：

<script type="text/javascript">
    NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
      NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
       var GUEST = ['nick', 'mail', 'link'];
        var guest = 'nick,mail,link';
        guest = guest.split(',').filter(item => {
          return GUEST.includes(item);
        });
      new Valine({
        el: '#valine-comments',
        verify: true,
        notify: false,
        appId: '你的appId',
        appKey: '你的appKey',
        placeholder: "添加评论",
        avatar: 'hide',
        meta: guest,
        pageSize: '10' || 10,
        visitor: true,
        lang: '' || 'zh-cn',
        path: location.pathname,
        recordIP: false,
        serverURLs: ''
      });
    }, window.Valine);
  });
  </script>

把复制下来的内容替换blog/themes/next/layout/_third-party/comments/valine.swig中长得跟这块很像的东西。

之后更改Valine配置时在这个文件改而不是在主题的_config.yml中改

然后hexo clean && hexo g && hexo s就行了。

另外，在</script>前加上

var infoEle = document.querySelector('#valine-comments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  </script>

即可去除Powered by Valine.。

如果去除无效，请将CDN上的Valine.min.js下载到blog/themes/next/source/js/src中，并在Next设置中将Valine的CDN设为/js/src/Valine.min.js。打开下载的js文件，搜索Powered，在搜索结果附近找到<div class="power txt-right">Powered By <a href="https://valine.js.org" target="_blank">Valine</a><br>v'+o并删掉即可。

这样处理后，最后我的valine.swig长这样

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  {% set valine_uri = '/js/src/Valine.min.js' %}
  {% if theme.vendors.valine %}
    {% set valine_uri = theme.vendors.valine %}
  {% endif %}
  <script src="{ { valine_uri } }"></script>
  
  <script type="text/javascript">
    NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
      NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
       var GUEST = ['nick', 'mail', 'link'];
        var guest = 'nick,mail,link';
        guest = guest.split(',').filter(item => {
          return GUEST.includes(item);
        });
      new Valine({
        el: '#valine-comments',
        verify: true,
        notify: false,
        appId: 'TXFun2tTdkrFHCo8SPKrI5a8(appId)', //记得带引号
        appKey: 'VRbgL04C09q5aRk(appKey)',//记得带引号
        placeholder: "添加评论",
        avatar: 'hide',
        meta: guest,
        pageSize: '10' || 10,
        visitor: true,
        lang: '' || 'zh-cn',
        path: location.pathname,
        recordIP: true,
        serverURLs: ''
      });
    }, window.Valine);
  });
  var infoEle = document.querySelector('#valine-comments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  </script>
{% endif %}