博客添加评论系统

自从多说停止运营以后，我尝试过使用 Disqus ，但因为 Disqus 影响网页加载速度而弃用。之后一段时间一直没找到称心的评论系统，索性关了评论。前几天遇到了名为 Valine 的评论系统，支持静态博客，看起来还不错。自己改了一下博客主题的代码，替换了原来的多说和 Disqus 。

部署 Valine

Valine 的安装和使用可以参考这篇文章 Valine: 独立博客评论系统解决方案 。

替换代码

主要是修改主题 landscape-plus 的这三个文件：

• \themes\landscape-plus\_config.yml
• \themes\landscape-plus\layout\_partial\after-footer.ejs
• \themes\landscape-plus\layout\_partial\article.ejs

_config.yml 内添加

#valine
valine_shortname: 1

valine_shortname 在这里是个布尔值，用来控制评论的开关。

修改 after-footer.ejs ，删除下面的代码（第 4 至 32 行）

<% if (config.duoshuo_shortname || theme.duoshuo_shortname){ %>
<!-- 多说公共js代码 start -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%= config.duoshuo_shortname || theme.duoshuo_shortname %>"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共js代码 end -->
<% } else if (config.disqus_shortname || theme.disqus_shortname){ %>
<script>
  var disqus_shortname = '<%= config.disqus_shortname || theme.disqus_shortname %>';
  <% if (page.permalink){ %>
  var disqus_url = '<%= page.permalink %>';
  <% } %>
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<% } %>

在原来的代码位置添加

<% if (config.valine_shortname || theme.valine_shortname){ %>
<!--载入js，在</body>之前插入即可-->
    <!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库-->
    <script src="/js/Valine.min.js"></script>
    <script>
        new Valine({
            av: AV, 
            el: '.comment',
            app_id: '',
            app_key: '',
            placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
        });
    </script>
<% } %>

将 Valine.min.js 放到 \themes\landscape-plus\source\js 文件夹内，此文件可以从我的博客下载 https://www.bfdz.ink/js/Valine.min.js

app_id 和 app_key 分别填写你自己的 id 和 key。

修改 article.ejs ，删除下面的代码（第 32 至 36 行）

    <% if (post.comments && (config.duoshuo_shortname || theme.duoshuo_shortname)){ %>
        <a href="<%- post.permalink %>#ds-thread" class="article-comment-link"><%= __('comments') %></a>
      <% } else if (post.comments && (config.disqus_shortname || theme.disqus_shortname)){ %>
        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comments') %></a>
      <% } %>

在原来的第 36 行位置添加

      <% if (post.comments && (config.valine_shortname || theme.valine_shortname)){ %>
        <a href="<%- post.permalink %>#valine_thread" class="article-comment-link"><%= __('comments') %></a>
      <% } %>

删除（第 46 至 56 行）

<% if (!index && post.comments && (config.duoshuo_shortname || theme.duoshuo_shortname)){ %>
  <section id="comments">
    <div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
  </section>
<% } else if (!index && post.comments && (config.disqus_shortname || theme.disqus_shortname)){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
<% } %>

在原来的第 46 行位置添加

<% if (!index && post.comments && (config.valine_shortname || theme.valine_shortname)){ %>
  <section id="comments">
    <div id="valine_thread">
      <div class="comment"></div>
    </div>
  </section>
<% } %>

改好后重新生成静态文件即可。