博客添加评论系统

自从多说停止运营以后,我尝试过使用 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 内添加

1
2
#valine
valine_shortname: 1

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

修改 after-footer.ejs ,删除下面的代码(第 4 至 32 行)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<% 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>
<% } %>

在原来的代码位置添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<% 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_idapp_key 分别填写你自己的 id 和 key。

修改 article.ejs ,删除下面的代码(第 32 至 36 行)

1
2
3
4
5
<% 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 行位置添加

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

删除(第 46 至 56 行)

1
2
3
4
5
6
7
8
9
10
11
<% 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 行位置添加

1
2
3
4
5
6
7
<% if (!index && post.comments && (config.valine_shortname || theme.valine_shortname)){ %>
<section id="comments">
<div id="valine_thread">
<div class="comment"></div>
</div>
</section>
<% } %>

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

 上一篇

rutorrent 盒子