Hexo 博客增加Valine/Gitalk评论插件

使用原因

hexo博客建立后，一直使用原来主题所带的评论功能，但是由于项目作者已经不再维护，服务器已经关闭，所以评论功能一直存在问题，但又不想关闭评论功能。所以看了很多帖子和试过很多评论插件，最后得出以下两种可用插件。由于多说、网易云跟帖已经凉凉，畅言需要备案，来必力经常显示异常，Disqus国内无法访问，gitment（和部署在GitHub的博客冲突）也有许多问题，因此主要来介绍Valine/Gitalk这两款评论插件。

Gitalk插件

1. 注册 OAuth Application

   当别人评论你的文章时，会需要它是授权。点击注册 OAuth Application进行注册，注册界面如下：

   

2. 配置 _config.yml 文件

   打开themes_config.yml，增加如下代码。

   #6、gitalk评论
   gitalk:
   enable: true
   githubID: 填写你的 github 账户名即可
   repo: 'repo 名字为可新建一个repo 或者使用博客托管的 repo 都行。'
   ClientID: '就是上步骤中注册的获取的信息'
   ClientSecret: '就是上步骤中注册的获取的信息'
   adminUser: 填写你的 github 账户名即可
   distractionFreeMode: true

3. 新增gitalk.ejs文件

   在themes/yilia/layout/_partial/post目录下新增gitalk.ejs文件，文件内写入如下代码。

   <div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
   <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
   <script type="text/javascript">
   
   if(<%=theme.gitalk.enable%>){
       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: '<%= page.date %>',
       distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
   })
   gitalk.render('gitalk-container')
   }
   </script>

4. 修改comment.scss文件

   修改themes/yilia/source-src/css目录下comment.scss文件。

   #disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
       padding: 0 30px !important;
       min-height: 20px;
   }
   
   #SOHUCS {
       #SOHU_MAIN .module-cmt-list .block-cont-gw {
           border-bottom: 1px dashed #c8c8c8 !important;
       }
   }

5. 新增gitalk相关的配置代码

   在themes/yilia/layout/_partial目录下的article.ejs文件内新增gitalk相关的配置代码。

   <% if(theme.gitalk.enable){ %>
   <%- partial('post/gitalk', {
   key: post.slug,
   title: post.title,
   url: config.url+url_for(post.path)
   }) %>
   <% } %>

   注意：这段代码不可在尾部添加，应该添加至这里

   <% if (!index && post.comments){ %>
   //添加到这里
   <% } %>

6. 重新部署

   配置完毕后，重新部署，即可看到效果。

   hexo g -d

   

Valine插件

1. 获取 APP ID 和 APP KEY

   • 点击这里登录或注册Leancloud，或者点击这里点击这里
   • 创建应用，应用名随意填写。
   • 选择刚刚创建的应用>设置>选择应用 Key，然后你就能看到你的APP ID和APP KEY了，参考下图：

   

   • 为了您的数据安全，请填写应用>设置>安全设置中的Web 安全域名

2. 修改yilia主题下的_config.yml文件，添加valine配置

   # valine配置
   valine_appid: '填写leancloud的appid'
   valine_appkey: '填写leancloud的appkey'

3. 修改themes/yilia/layout/_partial/article.ejs，添加一段代码

   <% if (theme.valine_appid && theme.valine_appkey){ %>
       <%- partial('post/valine', {
           key: post.slug,
           title: post.title,
           url: config.url+url_for(post.path)
         }) %>
       <% } %>

   注意：这段代码不可在尾部添加，应该添加至

   <% if (!index && post.comments){ %>
   //添加到这里
   <% } %>

4. 新增themes/yilia/layout/_partial/post/valine.ejs

   <div id="comment"></div>
   <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
   <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
   <script>
   new Valine({
   el: '#comment' ,
   notify:false,
   verify:false,
   appId: '<%=theme.valine_appid%>',
   appKey: '<%=theme.valine_appkey%>',
   placeholder: 'ヾﾉ≧∀≦)o欢迎评论!',
   path:window.location.pathname,
   avatar:'mm' 
   });
   </script>

5. 重新部署

   hexo g -d

   

6. Valine 评论系统中的邮件提醒设置

   进入Leancloud>选择你的评论所存放的应用>设置>邮件模板，按下图设置好用于重置密码的邮件主题>然后保存。

   

   修改邮件主题：你在的评论收到了新的回复。

   修改内容：将下面的代码复制到“内容”中，并将其中的你的网址首页链接改为你的网址首页链接。

   <p>Hi, {{username}}</p>
   <p>
   你在 {{appname}} 的评论收到了新的回复，请点击查看：
   </p>
   <p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

   点击“保存”按钮。

   修改yilia主题配置文件，位置：你的网站根目录_partial.ejs，将notify和verify的属性修改为true。

   <div id="comment"></div>
   <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
   <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
   <script>
   new Valine({
   el: '#comment' ,
   notify:true,
   verify:true,
   appId: '<%=theme.valine_appid%>',
   appKey: '<%=theme.valine_appkey%>',
   placeholder: '吾以为inkbottle必有高论，岂期出此鄙言！吾有一言，诸军静听',
   path:window.location.pathname,
   avatar:'mm' 
   });
   </script>

   配置完毕后，重新部署，需等待一段时间。

   hexo g -d

   进行测试，查看自己评论的回复能否收到邮件提醒。

   配置完成！

   注意事项：

   • 发送次数过多，可能会暂时被Leancloud 屏蔽邮件发送功能。
   • 由于邮件提醒功能使用的Leancloud的密码重置邮件提醒，只能传递昵称、邮箱两个属性，所以邮件提醒链> 接无法直达指定文章页。请悉知。
   • 开启邮件提醒会默认开启验证码选项。
   • 该功能目前还在测试阶段，谨慎使用。
   • 目前邮件提醒正处于测试阶段，仅在子级对存在邮件地址的父级发表评论时发送邮件。