Vuepress基于Valine的评论功能

本文最后更新于:1 个月前

安装插件

如果使用 npm

1
npm install --save vuepress-plugin-comment

如果使用 yarn:

1
yarn add vuepress-plugin-comment -D

配置插件

vuepress项目引用

vuepress-plugin-comment 添加到vuepress项目的插件配置中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
plugins: [
[
'vuepress-plugin-comment',
{
choosen: 'valine',
// options选项中的所有参数,会传给Valine的配置
options: {
el: '#valine-vuepress-comment',
appId: 'Your own appId',
appKey: 'Your own appKey'
}
}
]
]
}

获取appId和appKey

请先登录注册 LeanCloud, 进入控制台后点击左下角创建应用

img

应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP IDAPP Key了:

img

把获取到的appId和appKey填入vuepress的插件配置当中,就可以使用评论功能了。

更多配置项

el

  • 类型:String
  • 默认值:null
  • 必要性:true

Valine 的初始化挂载器。可以是一个CSS 选择器,也可以是一个实际的HTML元素

appId

  • 类型:String
  • 默认值:null
  • 必要性:true

LeanCloud的应用中得到的appId.

获取appId 和 appKey

appKey

  • 类型:String
  • 默认值:null
  • 必要性:true

LeanCloud的应用中得到的appKey.

获取appId 和 appKey

placeholder

  • 类型:String
  • 默认值:Just go go
  • 必要性:false

评论框占位提示符

path

  • 类型:String
  • 默认值:window.location.pathname
  • 必要性:false

当前文章页路径,用于区分不同的文章页,以保证正确读取该文章页下的评论列表。
可选值:

  • window.location.pathname (默认值,推荐)
  • window.location.href
  • 自定义
  • I. 请保证每个文章页路径的唯一性,否则可能会出现不同文章页下加载相同评论列表的情况。
  • II. 如果值为window.location.href,可能会出现随便加不同参数进入该页面,而被判断成新页面的情况。

avatar

  • 类型:String
  • 默认值:mm
  • 必要性:false

Gravatar 头像展示方式。

可选值:

  • ''(空字符串)
  • mp
  • identicon
  • monsterid
  • wavatar
  • retro
  • robohash
  • hide

更多信息,请查看头像配置

meta

  • 类型:Array
  • 默认值:['nick','mail','link']
  • 必要性:false

评论者相关属性。

pageSize

  • 类型:Number
  • 默认值:10
  • 必要性:false

评论列表分页,每页条数。

lang

  • 类型:String
  • 默认值:zh-CN
  • 必要性:false

多语言支持。

可选值:

  • zh-CN
  • zh-TW
  • en
  • ja

如需自定义语言,请参考i18n

visitor

  • 类型:Boolean
  • 默认值:false
  • 必要性:false

文章访问量统计

highlight

  • 类型:Boolean
  • 默认值: true
  • 必要性: false

代码高亮,默认开启,若不需要,请手动关闭

avatarForce

  • 类型: Boolean
  • 默认值: false
  • 必要性: false

每次访问强制拉取最新的评论列表头像

不推荐设置为true,目前的评论列表头像会自动带上Valine的版本号

recordIP

  • 类型: Boolean
  • 默认值: false
  • 必要性: false

是否记录评论者IP

1
v1.3.5+

serverURLs

  • 类型: String
  • 默认值: http[s]://[tab/us].avoscloud.com
  • 必要性: false

⚠️ 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) v1.3.10+

emojiCDN

  • 类型: String
  • 默认值: ``
  • 必要性: false

设置表情包CDN,参考自定义表情

1
v1.4.5+

emojiMaps

  • 类型: Object
  • 默认值: null
  • 必要性: false

设置表情包映射,参考自定义表情

1
v1.4.5+

enableQQ

  • 类型: Boolean
  • 默认值: false
  • 必要性: false

是否启用昵称框自动获取QQ昵称QQ头像, 默认关闭,需博/网站主主动启用

1
v1.4.6+

requiredFields

  • 类型: Array
  • 默认值: []
  • 必要性: false

设置必填项,默认匿名,可选值:

  • ['nick']
  • ['nick','mail']
1
v1.4.6+

扩展功能

头像配置邮件提醒多语言支持文章阅读量统计自定义表情

其中,邮件提醒有几个小问题

  1. 国内版的绑定域名貌似需要备案

  2. LeanCloud休眠调整,定时任务self_wake无法唤醒 => 解决办法可以参考小康博客

    我的解决办法是利用我windows服务器自带的计划任务定时访问评论后台达到唤醒效果:

    首先新建一个bat文件(效果大概是自动打开IE浏览器访问指定网页,30秒后关闭浏览器)

    建好bat文件之后最好先自己访问一遍确定IE浏览器访问的时候能正常访问到网页

    如果访问速度较慢,建议把30秒调成更长的时间来保证稳定

    1
    2
    3
    explorer.exe open=你的评论后台地址
    Ping -n 30 127.1>nul
    Taskkill /f /im "iexplore.exe"

    image-20200613101522289

    image-20200613101209202

    image-20200613101238985

    image-20200613101304356

  3. Valine的管理员账户(部署后/sign-up页面出现Not Found)

    1
    2
    3
    4
    5
    LeanCloud结构化数据里_User表添加一行
    必备三个字段email(此 email 必须为配置中的 SMTP_USER 或 TO_EMAIL)、username、password
    然后进入到评论管理后台
    账号为email字段输入的信息
    密码为password字段输入的信息

::: tip
部分文字整理自Valine官网Valine-Admin及其他相关网页
:::


Vuepress基于Valine的评论功能
https://www.chanx.tech/2020/c2085db159da/
作者
ischanx
发布于
2020年6月8日
更新于
2022年6月12日
许可协议