Ghost-Docker（三）增加评论留言

最新推荐文章于 2023-01-10 00:52:27 发布

Liangda Y.

最新推荐文章于 2023-01-10 00:52:27 发布

阅读量465

点赞数

分类专栏： Ghost-Docker 博客网站文章标签： html5

本文链接：https://blog.csdn.net/weixin_50455548/article/details/114658305

版权

Ghost-Docker 博客网站专栏收录该内容

5 篇文章 3 订阅

订阅专栏

基于 Valine 的 LeanCloud 免费云服务，为 Ghost 增加评论留言和邮件提醒的功能。

博客怎么能可以没有评论、留言的功能呢，不过 GHost 自身是没有的，需要自己添加第三方评论功能，或者开发。

为了达到快速搭建使用的目的，我们选择第三方工具。在云云工具中，选择了 Valine ，因为自身也没有什么经验，见到很多人推荐就用了，重要的是免费，并且可以延申更多的功能，使用之后便会明白它的强大之处。

一、注册、配置 Valine

1.1 要使用 Valine 的前提就是注册账号，因为 Valine 提供了免费的个人云存储服务 LeanCloud，也要求我们进行简单的实名验证。

1.2 注册完进入到控制台，这时我们需要创建一个开发版的应用，免费。
在这里插入图片描述

1.3 在应用设置–>应用 Keys 中可以看到我们待会需要用到的 AppID、AppKey。

1.4 在设置–>应用中心打开需要用到服务开关。

1.5 在设置–>安全中心设置 Web 安全域名，这样做是为了只有在这个域名和端口才能使用 LeanCloud 上的服务，避免遭到居心不安的人使用你的资源。GHost 在服务器上的便填写访问的域名:端口，本地的就是 http://localhost:端口 。
在这里插入图片描述

二、修改主题模板

配置好 LeanCloud 后便是在主题模板中添加我们评论模块所必要的代码，和引入相关JS、CSS。在这里参考了 Deserts 和一光年的博客文章。想了解更多的可以查阅 Valine 官方文档。

2.1 我这里使用的是 Ghost 的默认主题，从 Ghost 后台下载到本地电脑修改，想在远程服务器上修改的，请自行找到 Ghost 主题存放的位置，并在特定文件修改。
在这里插入图片描述
2.2 文本编辑打开 default.hbs 文件，在 <head> ...... </heda> 标签之间引入相关 js 文件。

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

在这里插入图片描述
2.3 在 default.hbs 文件的 <body> </body> 之间添加以下 js 代码。

<script>
    new Valine({
        el: '#vcomments', // #vcomments：评论模块 div 的class
        appId: 'LeanCloud 应用的 AppID',
        appKey: 'LeanCloud 应用的 AppKey',
        visitor: true, // 阅读量统计
        avatar: 'wavatar', // (''/mp/identicon/monsterid/wavatar/robohash/retro/hide) 评论者头像生产方式
        placeholder: '有话请说~' // 评论输入框中显示的内容
    })
</script>

在这里插入图片描述
2.4 文本编辑打开 post.hbs 文件，在 <section class="post-full-content"> ...... </section> 标签之间添加评论框的代码。

<section class="post-full-content">
    <div class="post-content">
        {{content}}
    </div>

    {{!--评论模块--}}
    <div id="vcomments"></div>
    <script>
        Valine({
            appId: 'LeanCloud 应用的 AppID',
            appKey: 'LeanCloud 应用的 AppKey',
            visitor: true // 阅读量统计

        })
    </script>

</section>

在这里插入图片描述
2.5 打包压缩主题文件，从 Ghost 后台上传到 Ghost，然后重启 Ghost 的 Docker 容器，评论留言模块就会生效了。

三、文章阅读量统计

在上面中已经启用了 Valine 的阅读量统计功能，剩下的就是添加触发、显示文章阅读量的代码了。

3.1 文本编辑打开主题 post.hbs 文件，在 <time class="byline-meta-date" ...> ...... </time> 标签中插入添加触发、显示文章阅读量的代码，这个位置完全是个人喜欢。

<div class="byline-meta-content">
    <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="YYYY年MM月DD日HH:mm"}}</time>
    <span class="byline-reading-time"><span class="bull">
        {{!--&bull;</span> {{reading_time minute="1分钟读完" minutes="大约%分钟读完"}}</span>--}}

    <!-- id 将作为查询条件 -->
    <span class="bull">&bull;</span>
    <span id="{{url}}" class="leancloud_visitors" data-flag-title="{{title}}">
        <em class="post-meta-item-text">阅读量 </em>
        <i class="leancloud-visitors-count"></i>
    </span>
</div>

在这里插入图片描述
3.2 文本编辑打开主题 post.hbs 文件，在 <div class="read-next-card-meta" > ...... </div> 标签中插入添加触发、显示文章阅读量的代码。

<div class="read-next-card-meta">
    <p><time datetime="{{date format="YYYY-MM-DD HH:mm"}}">{{date format="YYYY年MM月DD日HH:mm"}}</time>
        {{!--– {{reading_time minute="1分钟读完" minutes="大约%分钟读完"}}--}}

        <!-- id 将作为查询条件 -->
        <span> - </span>
        <span id="{{url}}" class="leancloud_visitors" data-flag-title="{{title}}">
            <em class="post-meta-item-text">阅读量 </em>
            <i class="leancloud-visitors-count"></i>
        </span>

    </p>
</div>