自从多说停止运营以后，我尝试过使用 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_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 = '
(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_id 和 app_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>
<% } %>
|
改好后重新生成静态文件即可。
