为Hexo博客添加LiveRe评论系统

注: 本文首发于 My 公众号 CodeSheep ,可 长按扫描 下面的 当心心 来订阅 ↓ ↓ ↓javascript

CodeSheep · 程序羊



最近有些网友问我,个人我的博客中的评论系统是怎么添加的,说实话我都有点忘了,毕竟搞了有好长一段时间了,唉不得不说这个遗忘得真是很快。 今天正好有时间,我就把如何为本身的Hexo博客添加评论系统写一篇水文好了。java

相信你们看过不少我的博客,用Hexo搭建的博客应该说很流行了,既方便又极具性价比,适合你们本身来动手DIY。hexo

咱们都但愿本身的博客具备一个评论系统,一方面用于收集你们的意见来更好的改进,另外一方面评论系统也提供了一个读者与做者之间交流的平台。async

评论系统能够说五花八门啦,用得多的好比:畅言、Gitment、Gitalk、LiveRe、Disqus、友言 等等:post

畅言:网站

畅言评论系统

Gitment:ui

Gitment评论系统

Gitalk:code

Gitalk评论系统

LiveRe:cdn

LiveRe评论系统

友言:ip

友言评论系统

本文接下来主要阐述如何添加LiveRe做为博客的评论系统


首先注册并登陆LiveRe

LiveRe注册地址:https://livere.me/register?lang=zh-cn

LiveRe注册表单

注册之后登陆进去,选择City版进行安装,City版是免费的,对咱们这种我的博客而言彻底足够了

选择City版本的LiveRe

接下来须要填写一些关于你想将LiveRe用于的博客的一些信息:

信息填写

填完以后,申请获取代码,此时其将会给你一段代码,该段代码等下须要加到你的我的博客的页面中,咱们能够先将其复制并保存起来:

LiveRe代码

在我的博客中加入LiveRe代码

首先去如路径:hexo_bolg/themes/your-theme/layout/_partial/post下建立livere.ejs代码。livere.ejs的内容就是上一步中获取的代码:

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8zMzM5MC85OTQ2">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

而后修改路径:hexo_bolg/themes/your-theme/layout/_partial下的article.ejs文件,在<% if (!index && post.comments){ %> 代码块下添加以下代码:

<% if (!index){ %>
  <% if (post.comments){ %>
  <%- partial('post/livere') %>
  <% } else { %>
    <div class="lv-container"></div>
  <% } %>
<% } %>

我再来配一张图给大家看一下:

在article.ejs中添加一段代码

此时LiveRe已经添加OK了,从新部署你的博客而后刷新页面就能够看到博客中添加好了LiveRe评论系统(好比个人博客:http://www.hansonwang99.com.cn/):

LiveRe评论系统添加完成

如何自定义LiveRe的样式

LiveRe支持多重方式进行登陆,并且其样式也是能够自定义的: LiveRe的登陆方式和样式

能够去LiveRe的网站的管理页面中进行设置:

LiveRe管理页面

更多好玩的东西你能够尽情探索,找到你本身喜欢的样式就能够啦

相关文章
相关标签/搜索