关于javascript:VuePress-博客优化之增加-Valine-评论功能

10次阅读

共计 1473 个字符,预计需要花费 4 分钟才能阅读完成。

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中,咱们应用 VuePress 搭建了一个博客,最终的成果查看:TypeScript 中文文档。

本篇讲讲如何应用 Valine 疾速的实现评论性能。

主题内置

因为我用的是 vuepress-theme-reco 主题,主题内置评论插件 @vuepress-reco/vuepress-plugin-comments,能够依据本人的爱好抉择 Valine 或者 Vssue。本篇讲讲应用 Valine 实现评论性能的全过程。

Valine

官网:https://valine.js.org/

Valine 诞生于 2017 年 8 月 7 日,是一款基于 LeanCloud 的疾速、简洁且高效的无后端评论零碎。

特点是平安、疾速、反对 Emoji、无后端实现、MarkDown 全语法反对、轻量易用等。

LeanCloud

Valine 是基于 LeanCloud 的,LeanCloud 官网:https://www.leancloud.cn/

LeanCloud 是一种 Serverless 云服务,提供了一站式的后端服务,如数据存储、即时通讯等等,简略的来说,比方我要实现一个数据存储性能,我只用在 LeanCloud 注册一个账号,取得对应的 App ID 和 App Key,而后调用提供的 API 即可进行数据存储,以下是一个应用 JavaScript 语法的形式:

开始

有了一个根本的理解,咱们开始吧。

1. 注册

注册 LeanCloud:https://leancloud.cn/dashboard/login.html#/signup

留神要应用 LeanCloud 的服务,须要实现实名认证,在填写完姓名和身份证号后,须要应用对应名字的支付宝账号扫码进行认证,扫码完后即可实现实名认证。

2. 创立利用

登录后, 进入控制台后点击左下角「创立利用」:

创立利用里,这里咱们抉择开发版,开发版有用量限度,比方 API 申请 3W 次每天,数据存储空间 1GB,对于集体我的项目是够用的:

3. 查看利用凭证

创立完后,点击进入利用的治理后盾,抉择「设置」-「利用凭证」,而后就能看到你的 APP ID 和 APP Key 了:

4. VuePress 引入

批改 config.js:

module.exports = {
  theme: 'reco',
  themeConfig: {
    valineConfig: {
      appId: '...',// your appId
      appKey: '...', // your appKey
    }
  }  
}

5. 成果展现

在每篇文章的底部就会呈现一个评论栏:

6. 不展现评论

如果你想默认不加载评论,而只在某些页面显示评论性能,能够在 valineConfigvssueConfig 中设置 showComment: false,并在须要展现评论的页面 设置 isShowComments: true

如果仅是某篇文章不想设置开启评论性能,能够在 front-matter 设置 isShowComments: false

更多的配置和留神细节,参考:

  1. vuepress-theme-reco 评论性能
  2. Valine 配置项

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程,预计 20 篇左右,解说如何应用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 23 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog

微信:「mqyqingfeng」,加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央,请务必给予斧正,非常感激。如果喜爱或者有所启发,欢送 star,对作者也是一种激励。

正文完
 0