前言

《一篇带你用 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、私有服务器等平台。本篇为第 25 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog

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

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。

VuePress 博客优化之增加 Valine 评论功能的更多相关文章

  1. VuePress 博客优化之增加 Vssue 评论功能

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  2. VuePress 博客优化之开启 Algolia 全文搜索

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 由于 V ...

  3. VuePress 博客之 SEO 优化(五)添加 JSON-LD 数据

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲 ...

  4. VuePress 博客之 SEO 优化(二)重定向

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  5. VuePress 博客之 SEO 优化(三)标题、链接优化

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  6. Django之博客系统:增加评论

    3既然是博客,那肯定就有留言评论系统.在这一章就来建立一个评论系统. 1 创建一个模型来保存评论 2 创建一个表单来提交评论并且验证输入的数据 3 添加一个视图函数来处理表单和保存新的评论到数据库 4 ...

  7. VuePress博客美化之reco主题

    vuepress博客主题-vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题.它既可以成为简洁而又不失美观的主题,又可以书写你的项目文档,看起来更有逼格. ...

  8. 2022 年了,还不了解 PWA ? 教你 VuePress 博客如何快速兼容 PWA

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇我们 ...

  9. 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法

    title: 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法 toc: false date: 2018-04-16 22:57:50 cat ...

随机推荐

  1. Java注解和注解处理器使用方法

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11492274.html 准备材料: 实体类: PrintDemo 注解类: PrintName ...

  2. finally块

    /* finally 块: finally块的 使用前提是必须要存在try块才能使用. finally块的代码在任何情况下都会执行的,除了jvm退出的情况. finally非常适合做资源释放的工作,这 ...

  3. LVS-DR群集

    LVS-DR群集 目录 LVS-DR群集 一.LVS-DR的工作原理 1. LVS-DR数据包流向分析 2. IP包头及数据帧头信息的变化 3. DR模式的特点 4.LVS-DR中的ARP问题 (1) ...

  4. Shell编程之循环语句与echo的用法

    Shell编程之循环语句与echo的用法 目录 Shell编程之循环语句与echo的用法 一.echo用法 1. echo常用选项 2. 常用的转义字符 3. 特殊符号%.#的用法 二.循环语句 1. ...

  5. python的namespace的理解

    Python命名空间的本质   python中的名称空间是名称(标识符)到对象的映射. 具体来说,python为模块.函数.类.对象保存一个字典(__dict__),里面就是重名称到对象的映射. -- ...

  6. Maven依赖,去哪儿找

    1. 前言 maven是作为Javer日常开发中必不可少的工具,但是很多人对于它的使用也只是仅限于的几个功能. 前几天在使用一个依赖总是说找不到该依赖,但是在中央仓库中的确存在该构建.这个问题让我很困 ...

  7. [技术干货-算子使用] mindspore.scipy 入门使用指导

    1. MindSpore框架的SciPy模块 SciPy 是基于NumPy实现的科学计算库,主要用于数学.物理学.生物学等科学以及工程学领域.诸如高阶迭代,线性代数求解等都会需要用到SicPy.Sci ...

  8. C++ 反汇编:关于函数调用约定

    函数是任何一门高级语言中必须要存在的,使用函数式编程可以让程序可读性更高,充分发挥了模块化设计思想的精髓,今天我将带大家一起来探索函数的实现机理,探索编译器到底是如何对函数这个关键字进行实现的,并使用 ...

  9. opencv笔记---contours

    一 Contour Finding Contours使用 STL-style vector<> 表示,如 vector<cv::Point>, vector<cv::Po ...

  10. SpringBoot自定义classloader加密保护class文件

    背景 最近针对公司框架进行关键业务代码进行加密处理,防止通过jd-gui等反编译工具能够轻松还原工程代码,相关混淆方案配置使用比较复杂且针对springboot项目问题较多,所以针对class文件加密 ...