Jekyll博客添加评论区

2020-12-16

技术分享

做了好长时间时间的博客，用的是Github上的Jekyll博客，Coding进行仓库托管。勉强访问速度很好。

之前逛论坛，偶然发现了关于写个人博客的一些言论：

刚开始搞博客，就一心想着花里胡哨了。用自己服务器搭建，自己的域名，那叫一个狂。
之后，感觉服务器经常得管，也就掏点钱买个虚拟主机来玩玩。
在之后，不知道啥时候才能产出一篇，便放在免费的托管平台上了。

讲真的，个人写博客追求的稳定。纵观现在的博客托管平台，CSDN、博客园等，在提供便利的同时，也有着广告的输出。

前言

本篇简单介绍一下，在Jekyll博客添加Valine评论区，实现文章的评论功能。具体功能可以翻阅到文章底部的评论区查看。

话不多说，直接上硬菜。

Valine 插件 – 一款快速、简洁且高效的无后端评论系统。

传送门：点击前往

官方简述

Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

Valine 可以依托于免费的 LeanCloud 来实现评论的存储。

个人感觉，这样的插件确实，相当的实用。

当然，对于实用Html的页面，也可以添加该评论系统。

操作流程以及思路迁移

官方案例DEMO

根据官方的案例，来取得评论插件的条件。并因此来扩展

<head>
    ..
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    ...
</head>
<body>
    ...
    <div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: 'Your appId',
            appKey: 'Your appKey'
        })
    </script>
</body>

根据代码，我们可以知道，首先必须引入 Valine.min.js 。然后，在页面中，添加 div ，并用script 进行初始化数据。

简单点想，就是先引入插件，在加入div位置，并且初始化参数。

好的，这就是 Valine 插件的引入思路。

引入到 Jekyll博客的文章页面

Jekyll博客是属于静态博客的一种，使用脚本来实现数据的读取。

首先，我们找到文章页的代码：

_layouts/post.html是本博客加载处理文章的页面，因此，我们可以在这个页面上添加评论区。

引入 Valine.min.js

在head.html内添加js 链接

然后，在 _layouts/post.html 的后部分，添加代码。

至此，引入Valine 评论区结束。

准备以及存储解决办法

Valine 可以依托于免费的 LeanCloud 来实现评论的存储。

因此，我们简单的谈一下 LeanCloud 的注册。

文章内容篇幅有点长，另开最新一篇文章介绍 LeanCloud 的注册。