VuePress 博客优化之增加 Valine 评论功能

简介: 在 《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。本篇讲讲如何使用 Valine 快速的实现评论功能。

0.png


前言


《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档


本篇讲讲如何使用 Valine 快速的实现评论功能。


主题内置


因为我用的是 vuepress-theme-reco 主题,主题内置评论插件 @vuepress-reco/vuepress-plugin-comments,可以根据自己的喜好选择 Valine 或者 Vssue。本篇讲讲使用 Valine 实现评论功能的全过程。


Valine


官网:valine.js.org/


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


特点是安全、快速、支持 Emoji、无后端实现、MarkDown 全语法支持、轻量易用等。


LeanCloud


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


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


1.png


开始


有了一个基本的了解,我们开始吧。


1. 注册


注册 LeanCloud:leancloud.cn/dashboard/l…


注意要使用 LeanCloud 的服务,需要完成实名认证,在填写完姓名和身份证号后,需要使用对应名字的支付宝账号扫码进行认证,扫码完后即可完成实名认证。


2. 创建应用


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


3.png


创建应用里,这里我们选择开发版,开发版有用量限制,比如 API 请求 3W 次每天,数据存储空间 1GB,对于个人项目是够用的:


4.png


3. 查看应用凭证


创建完后,点击进入应用的管理后台,选择 「设置 」- 「应用凭证」,然后就能看到你的 APP ID 和 APP Key了:


5.png


4. VuePress 引入


修改 config.js:


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


5. 效果展示


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


6.png


6. 不展示评论


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


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


更多的配置和注意细节,参考:


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


系列文章


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


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


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



目录
相关文章
|
机器学习/深度学习 存储 编解码
Open3d系列 | 3. Open3d实现点云上采样、点云聚类、点云分割以及点云重建
Open3d系列 | 3. Open3d实现点云上采样、点云聚类、点云分割以及点云重建
14078 1
Open3d系列 | 3. Open3d实现点云上采样、点云聚类、点云分割以及点云重建
从零开始学习 Java:简单易懂的入门指南之正则表达式(十五)
从零开始学习 Java:简单易懂的入门指南之正则表达式(十五)
|
存储 JavaScript 前端开发
node静态文件加与不加虚拟路径
本文介绍了在Node.js中设置静态资源服务时,如何配置虚拟路径前缀。通过使用`express.static`中间件,可以指定一个虚拟前缀,使得访问静态文件时需要通过这个前缀来访问。
106 3
node静态文件加与不加虚拟路径
|
移动开发
USB-TTL连接ESP8266不识别串口/串口助手回复乱码
【11月更文挑战第14天】当USB-TTL连接ESP8266出现不识别串口或乱码问题时,应检查硬件连接(线路、电源)、串口设置(驱动、串口选择、数据位等)及软件固件(AT指令、固件版本、串口助手)。确保所有设置正确无误。
1475 0
|
Java
Java栈(Stack)深度解析与实现
Java栈(Stack)深度解析与实现
507 1
|
存储 Java 数据处理
【JavaSE专栏25】进制转换的那些事,十进制转R进制、R进制转十进制是什么操作?
【JavaSE专栏25】进制转换的那些事,十进制转R进制、R进制转十进制是什么操作?
269 0
LeetCode 172. 阶乘后的零
给定一个整数 n,返回 n! 结果尾数中零的数量。
161 0
|
存储 SQL Oracle
Mysql的前世今生,Hello,Mysql
1.什么是数据库? 数据库(Database)是按照数据结构来组织、存储和管理数据的仓库。 每个数据库都有一个或多个不同的 API 用于创建,访问,管理,搜索和复制所保存的数据。 我们也可以将数据存储在文件中,但是在文件中读写数据速度相对较慢。
166 0
Mysql的前世今生,Hello,Mysql
|
Scala 开发者
CRM 项目-实现主菜单显示和退出 | 学习笔记
快速学习 CRM 项目-实现主菜单显示和退出
CRM 项目-实现主菜单显示和退出 | 学习笔记
|
开发工具 git
fatal: The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly
304 0