Hexo评论系统

发表于   |   分类于

今天闲的没事，又想搞一搞这个博客。然后就想添加一个评论系统，这样就能和小伙伴们一起交流学习了。

曲折的道路

这个评论系统之前我记得有一个多说，今天查看已经关闭了，网站都上不去了。然后继续在网上看看还有什么其他的。

然后就发现有个网易云跟贴，然而，好像也关闭了。看论坛里好多在说，刚转过去就毙了，一个月都不到。

然后还有一个畅言，兴致勃勃的去注册，发现还需要备案，果断放弃，太麻烦了。那个Disqus是国外的，似乎得翻墙。我是个好学生，翻墙什么的都不会呢。

最后看到友言，这个小家伙挺好，国内的而且不需要备案。就你了。然后自己就看怎么去接这个东西呢？

找了找资料，照着那个做了一遍，似乎并不难。做完一遍以后，我好像大概也明白Hexo是怎样的逻辑体系了。

准备工作

首先呢，你需要去注册一个友言的账号，会得到一个ID，以及一段代码。

代码

找到主题下面放置组件的目录，并创建一个脚本

1
F:\Project_Git\newbolg\themes\next\layout\_scripts\comments

我的这个目录下面放了一个多说的组件脚本，以及Disqus的脚本，这是Next主题里自带的评论组件。

我参照多说的脚本自己写了友言的脚本

1
2
3
4
5
6
7
8
9
10
11
12
{% if theme.youyan_enable %}
{% if theme.youyan_uid %}
{% set uid = theme.youyan_uid %}
{% endif %}
{% if page.comments %}
	<!-- UY BEGIN -->
	<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid={{uid}}"></script>
	<!-- UY END -->
{% endif %}
{% endif %}

判断是否开启友言组件，然后获取友言的ID，然后是那段友言里的代码。

接着就是添加引用，以及显示代码了。找到下面这个文件

1
F:\Project_Git\newbolg\themes\next\layout\\_layout.swig

在里面添加引用

1
{% include '_scripts/comments/youyan.swig' %}

具体是在那个位置，我不能明确告诉你，每个主题文件结构都不同。然后这个评论在哪儿显示呢？

还是在这个文件里，找到page.comments关键字，添加下面代码，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if page.comments %}
  <div class="comments" id="comments">
    {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
    {% elseif theme.disqus_shortname %}
      <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      </div>
	{#--下面是新添加的--#}
	{% elseif theme.youyan_enable %}			
		<div id="uyan_frame"></div>
    {% endif %}
  </div>
{% endif %}

然后在主题配置文件里，添加如下代码

1
2
3
# 友言评论
youyan_enable: true
youyan_uid: your id

大功告成，完事了。还写了来必力的，

最近比较焦躁，很迷茫。似乎不知道自己的方向在哪儿。但愿这一切都会过去。