gitalk Error: Validation Failed

有的没的

这个问题出现在这个博客基本搭建完成后，我发布第三篇文章时，解决的历程不算太困难，但是为了养成记录问题解决过程的习惯（这次就因为没养成习惯错过了截图），还是决定写下来，如果能帮到人就更好了。

问题详情

问题环境：hexo+GitHub+next主题+gitalk
问题描述：页面评论处出现Error: Validation Failed提示

问题分析

在查阅了互联网之后，最后在gitalk的GitHub的issues中得知主要原因在于gitalk将当前网址作为id属性，并在公开仓库创建相应label的issues实现存储评论，而GitHub限制label长度50从而使得部分文章导致无法创建。

解决方案

比较方便的解决方案主要有以下两种

方案一

方案描述

由于编码问题会在网址链接中出现16进制，使其超过长度限制导致无法创建，因此可以调用decodeURI函数，重新编码后用作id属性从而达到缩短的目的。不过该方案存在隐患，即当你的文章链接编码后仍超过限制就会失效，所以我最后没有采用这种方案。

方案实施

找到主题文件路径下的gitalk.swig，我的具体路径为：hexo_third-party，将找到对应代码，将id部分进行如下修改

var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.ClientID }}',
      clientSecret: '{{ theme.gitalk.ClientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.githubID }}',
      admin: ['{{ theme.gitalk.adminUser }}'],
      id: location.pathname,
      id: md5(location.pathname),
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })

方案来源

方案二

方案描述

同方案一，主要目的仍是控制id属性的长度，所以可以采用将location.pathname进行md5加密得到等长字符串作为id，这样就可以无视原本长度将id长度控制在50以内，从而解决问题，本博客最后采用了这个方案。

方案实施

添加md5实现

这里采用blueimp/JavaScript-MD5的代码，在该项目中找到js/md5.min.js。下载后放到主题目录下，我的具体路径为：hexo。 ##### 修改gitalk.swig 找到主题文件路径下的gitalk.swig，我的具体路径为：hexo_third-party。在该文件中加入md5.min.js引用，并对id部分进行修改，将location.pathname进行md5加密后作为id。修改后文件内容如下：

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script src="/js/src/md5.min.js"></script> 
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.clientID }}',
      clientSecret: '{{ theme.gitalk.clientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.owner }}',
      admin: ['{{ theme.gitalk.admin }}'],
      id: md5(location.pathname),
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
  </script>
{% endif %}

方案来源