ljj17173

Hexo的个人博客网站的搭建历程(三)—评论系统
开头说到建立博客,除了分享自己的一些文章,记录自己的足迹以外,还有一个乐趣那就是建立一个博客评论系统了,当看到有小...
扫描右侧二维码阅读全文
11
2019/01

Hexo的个人博客网站的搭建历程(三)—评论系统

开头

说到建立博客,除了分享自己的一些文章,记录自己的足迹以外,还有一个乐趣那就是建立一个博客评论系统了,当看到有小伙伴在你的博客下留言的时候,你的心情一定会无比的开心

那么,如何开启或者说建立博客的评论系统呢?

•第一种方法:HEXO原生支持GitHub的免费评论系统Gitment,你可以直接在github上找到这个功能并进行申请,在博客的配置文件种填入相关的配置即可使用了,网上教程页很多

•第二种:自己建评论系统,网上开源的评论系统有很多,不过都需要你有自己的服务器进行部署才能使用,很多小伙伴可能还没有自己的服务器就没办法用这个方法了

•第三种:使用他人搭建好的评论服务器,本文正是重点介绍这个

评论系统的选择

网上有很多第三方的评论系统,但你也就只能部署一个在你的博客上,什么样的评论系统比较好呢?当然是越大的评论系统,功能越完善的越好,比如畅言,多说(貌似即将关闭了),网易云评论系统等,那我们直接就选用这种咯?

不是这样的,很多评论系统的注册是有门槛的,比如畅言,多说等都需要你的网站有了备案以后才能使用,如果你的网站已经有了备案呢,选择他们就没错了。
那没有备案又想要用评论系统怎么办呢?我们只能选择一些不用备案的,或者说规模小一些的第三方评论系统了。比较有名的有Disqus,valine等网上教程很多了可以直接百度到使用这些评论系统的教程。

<font color=#ff00>如果你选择了上述评论系统,你可以直接百度添加的方法。下面的内容是介绍需要手动添加的第三方评论系统。</font>

如何手动添加评论系统

如果你选择了一个适合你的评论系统,正在开心的想要添加到你的HEX O博客中,这时你才发现,你的博客原生并没有支持这个评论系统,又该如何添加到自己的博客中去呢?

下面以一个“云评论系统”http://cs.occamx.com/ 为例子来介绍如何添加未原生支持的评论系统到你的博客中

首先,在评论系统中注册一个账号,登陆管理系统,你将会看到这样的信息:
信息
一般评论系统的文档页面都会告诉你,你需要把这段代码添加到你的博客页面中。。。。底下还会有一些说明

思考

首先,我们要思考一个问题,博客评论系统有什么特点?

    <font color=#ff00>
    **1.它一般出现在文章的末尾
    2.不同的文章显示的是相应文章的评论内容**
    </font>

想到这些,我们首先就是要让评论框出现在我们的文章末尾,那么我们就要把代码添加到我们的文章页面处

分析

从HEXO官方文档中得知,我们的文章之所以都是同样的页面,显示不同的文章内容,是因为有文章模板这个文件的存在,我们需要找到这个文件

在进行了一通查找之后,我们就找到了

HEXO文件夹\themes\你使用的主题\layout\_partial\article.ejs

这个路径的文件(没有使用主题的路径是:HEXO文件夹themeslandscapelayout_partialarticle.ejs)

打开这个文件,你会看到很多代码,不要紧张,往下面仔细查找你会发现这么一堆代码:

其中你就会看到comments(评论)字样,还有各种主题原生支持的一些评论系统的关键字,比如多说,网易云评论啊,gitment等等,这就是文章模板中插入评论系统的代码了。

编写代码

第一次编写代码

<font color=#ff00>❌🚫(这一小节所示的代码有一些BUG,不过也记录下来,正确的代码在"第二次编写")</font>

对插入的结构进行分析,就会发现,就是IF的判断这么简单,如果(if)开启评论系统,则插入xxxxx页面,再定义了一些所需的变量,今次而已,那么,我们也依葫芦画瓢添加一个判断,最终就写出了下面的代码:

  <% if (theme.yunping){ %>
  <%- partial('post/yunping', {
      key: theme.yunping_sid,
      title: post._id
    }) %>
  <% } %>

如果,theme.yunping这个参数为ture则运行下面的代码,插入页面post/yunping.ejs,带入两个变量(key,和title)

theme.yunping_sid 是_config.yml的自建参数,你可以在_config.yml添加这一项并将ID写入
post._id 是HEXO文章的文章变量,官方文档并没有注明,在对源代码进行一顿分析之后才发现的这个变量,因为示例所使用的评论系统[pid]只能是数字和英文,所以只能用id作为变量,有些评论系统是用文章标题作为识别的则你需要是用post.title作为变量。全局变量直接查阅官方文档直接使用即可

这段写完了,那么,插入页面的代码写在哪里?就是在post/yunping.ejs里,你会在artucle.ejs目录发现一个post文件夹,在文件夹中新建一个yunping.ejs(文件名按照所写的代码来)文件
目录结构是这样:
目录结构
打开yunping.ejs,按照评论系统网站上要求插入的代码进行插入,最终写了如下代码:

<div class="yunping">
    <!-- 引入云评论系统css代码 -->
    <link rel="stylesheet" href="//c.fansx.com/tc.css"/>
    <!-- 云评论框 start -->
        <div id="tc_s<%=key%>p<%=title%>"></div>

    <!-- 云评论框 end -->
    <!-- 云公共JS代码 start (一个网页只需插入一次) -->
    <script src="//c.fansx.com/?m=c1&sid=<%=key%>&pid=<%=title%>"></script>
    <!-- 云公共JS代码 end -->
</div>

其中,[sid]和[pid]由<%=key%>和<%=title%>这两个变量来替换就好了。

到这里一切问题看似都解决了,但是出现了一些意外的BUG,评论代码中要求的 [pid] 使用的是 post._id 进行id的获取的,但是,这个 post._id 有点问题,在每一次的 HEXO generate中,获取到的文章ID都不一样,导致评论丢失。这可咋办勒。。😭

第二次编写代码

🉑
为了解决 ID 的问题,首先我就想到了 post.date变量,因为文章的创建时间实际上也可以作为唯一标识来使用。

post.date变量不仅有数字还有空格还有英文字符还有特殊符号,不符合 [pid] 的纯数字或者带英文字符的要求
经过几个小时的查找资料,最后还是在官方文档中找到了解决办法
🔆在HEXO文档中有一节叫 辅助函数(Helpers)

里面写到:

日期与时间

date
插入格式化的日期。date 可以是 UNIX 时间、ISO 字符串、Date 对象或 Moment.js 对象。format 默认为 date_format 配置信息。

  <%- date(date, [format]) %>

示例:

  <%- date(Date.now()) %>

// 2013-01-01

  <%- date(Date.now(), 'YYYY/M/D') %>

// Jan 1 2013
date_xml
插入 XML 格式的日期。date 可以是 UNIX 时间、ISO 字符串、Date 对象或 Moment.js 对象。

  <%- date_xml(date) %>

示例:

  <%- date_xml(Date.now()) %>

// 2013-01-01T00:00:00.000Z
time
插入格式化的时间。date 可以是 UNIX 时间、ISO 字符串、Date 对象或 Moment.js 对象。format 默认为 time_format 配置信息。

  <%- time(date, [format]) %>

示例:

  <%- time(Date.now()) %>

// 13:05:12

  <%- time(Date.now(), 'h:mm:ss a') %>

// 1:05:12 pm

根据文档里的说法,我们就可以依葫芦画瓢把post.date变量格式化为我们需要的字段了。
下面是相关的代码

文件:"article.ejs"
//中的插入代码修改成了这样(title参数不要了,在yunping.ejs中直接获取好了)
-----------------------------------------------------------------------------
  <% if (theme.yunping){ %>
  <%- partial('post/yunping', {
      key: theme.yunping_sid,
    }) %>
  <% } %>
文件:"yunping.ejs"
//中的插入代码修改成了这样(title参数不要了,在yunping.ejs中直接获取好了)
-----------------------------------------------------------------------------
<div class="yunping">
    <!-- 引入云评论系统css代码 -->
    <link rel="stylesheet" href="//c.fansx.com/tc.css"/>
    <!-- 云评论框 start -->
        <div id="tc_s<%=key%>p<%- date(post.date, 'YYYYMDhmmss') %>"></div>
    <!-- 云评论框 end -->
    <!-- 云公共JS代码 start (一个网页只需插入一次) -->
    <script src="//c.fansx.com/?m=c1&sid=<%=key%>&pid=<%- date(post.date, 'YYYYMDhmmss') %>"></script>
    <!-- 云公共JS代码 end -->
</div>

经过这一顿折腾,文章评论的[pid]算是正常了。

成果的检验

现在执行hexo server 预览一下,如果没问题的话,评论应该就会显示在你的文章底部了

发布

测试成功之后,就可以对评论系统的样式进行一下修改,最后就可以发布页面了。看,你的博客的评论页面就这样搭好了,是不是很简单呢?🙃(逃

Tip.修改了网页的样式,必须要先hexo clean再生成网页文件再进行发布啊。

Last modification:January 24th, 2019 at 10:29 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment