为Hexo博客添加LiveRe评论系统

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

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

相信大家看过很多个人博客,用Hexo搭建的博客应该说很流行了,既方便又极具性价比,适合大家自己来动手DIY。

我们都希望自己的博客具有一个评论系统,一方面用于收集大家的意见来更好的改进,另一方面评论系统也提供了一个读者与作者之间交流的平台。

评论系统可以说五花八门啦,用得多的比如:畅言、Gitment、Gitalk、LiveRe、Disqus、友言 等等

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


首先注册并登录LiveRe

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

注册以后登录进去,选择City版进行安装,City版是免费的,对我们这种个人博客而言完全足够了

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

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


在个人博客中加入LiveRe代码

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

123456789101112131415161718

<!-- 来必力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){ %> 代码块下添加如下代码:

1234567

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

我再来配一张图给你们看一下:

此时LiveRe已经添加OK了,重新部署你的博客然后刷新页面就可以看到博客中添加好了LiveRe评论系统(比如我的博客:http://www.hansonwang99.com.cn/):


如何自定义LiveRe的样式

LiveRe支持多重方式进行登录,而且其样式也是可以自定义的:

可以去LiveRe的网站的管理页面中进行设置:

更多好玩的东西你可以尽情探索,找到你自己喜欢的样式就可以啦

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

PHP调用Go服务的正确方式 - Unix Domain Sockets

作者:枕边书 链接:http://www.cnblogs.com/zhenbianshu/p/7265415.html 來源:博客园 问题 可能是由于经验太少,...

4079
来自专栏娱乐心理测试

微信小程序发送模版消息(事例)

4117
来自专栏FreeBuf

记一次利用BLIND OOB XXE漏洞获取文件系统访问权限的测试

今天,我要和大家分享的是,我在某个邀请漏洞测试项目中,发现Bind OOB XXE漏洞的方法。由于涉及隐私,以下文章中涉及网站域名的部分我已作了编辑隐藏,敬请见...

3075
来自专栏跟着阿笨一起玩NET

原创C# 各种通用类集合 终于出炉了,觉得有用尽管拿去吧

已经开源,欢迎 Fork    https://github.com/chrisyanghua/MyHelper.git

3282
来自专栏程序员宝库

从0开始发布一个无依赖、高质量的键盘npm包

没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西。甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应...

1261
来自专栏前端杂货铺

XSS分析及预防

XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容...

3387
来自专栏zingpLiu

tcpdump命令

  tcpdump是Linux下强大的抓包工具,不仅可以分析数据包流向,还可以对数据包内容进行监听。通过分析数据包流向,可以了解一条连接是如何建立双向连接的。 ...

1172
来自专栏Janti

记一次内存溢出的分析经历——thrift带给我的痛orz

说在前面的话 朋友,你经历过部署好的服务突然内存溢出吗? 你经历过没有看过Java虚拟机,来解决内存溢出的痛苦吗? 你经历过一个BUG,百思不得其解,头发一根一...

4688
来自专栏数据小魔方

异步加载的基本逻辑与浏览器抓包一般流程

本篇内容不涉及任何R语言或者Python代码实现,仅从异步加载的逻辑实现过程以及浏览器抓包分析的角度来给大家分享一下个人近期学习爬虫的一些心得。 涉及到的工具有...

3484
来自专栏较真的前端

[译] 调试 RxJS 第2部分: 日志篇

1794

扫码关注云+社区