Vuepress-comment-plugin-plus
English]
说明文档 - [中文 |Vuepress评论插件,当前支持Waline(推荐)、Gitalk、Valine
特征
- 支持Waline
- 支持Gitalk, Valine
- 动态导入
- 响应路由改变并自动刷新
- 用户可以使用文章中的
$frontmatter
使用
安装
npm
:
npm install --save vuepress-plugin-comment-plus
yarn
:
yarn add vuepress-plugin-comment-plus -D
cnpm
:
cnpm i --save vuepress-plugin-comment-plus
⚠️ 路由对象属性
不要使用window
对象直接去获取路由信息.
在frontmatter.to
和frontmatter.from
对象中,插件已经注册了路由信息. 所有的属性信息和vue-router的路由对象属性一致.
使用Waline
-
安装Waline(点击查看安装说明)
-
引入Waline(点击查看说明)
-
options
设置的参数和Waline官方配置一致。
module.exports = {
plugins: [
[
'vuepress-plugin-comment-plus',
{
choosen: 'waline',
// options选项中的所有参数,会传给Waline的配置
options: {
el: '#valine-vuepress-comment',
serverURL: 'your serverURL', // 例如 "https://***.vercel.app/"
path: '<%- frontmatter.commentid || frontmatter.permalink %>'
}
}
]
]
}
使用Gitalk
- 安装Gitalk
npm i --save gitalk
-
options
设置的参数和Gitalk官方配置一致
module.exports = {
plugins: [
[
'vuepress-plugin-comment-plus',
{
choosen: 'gitalk',
options: {
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
distractionFreeMode: false
}
}
]
]
}
如果想获取参数,如$frontmatter
和window
, 请使用EJS脚本语言
module.exports = {
plugins: [
[
'vuepress-plugin-comment-plus',
{
choosen: 'gitalk',
options: {
id: '<%- frontmatter.commentid || frontmatter.permalink %>',
title: '「Comment」<%- frontmatter.title %>',
body: '<%- frontmatter.title %>:<%-window.location.origin %><%- frontmatter.to.path || window.location.pathname %>',
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
distractionFreeMode: false,
}
}
]
]
}
注意: vuepress会过滤调插件配置,所以不要在配置中使用回调函数。请使用EJS脚本语言。
使用Valine
-
安装Valine(点击查看安装说明)
-
options
设置的参数和Valine官方配置一致
module.exports = {
plugins: [
[
'vuepress-plugin-comment-plus',
{
choosen: 'valine',
options: {
el: '#valine-vuepress-comment',
appId: 'Your own appId',
appKey: 'Your own appKey'
}
}
]
]
}
如果想获取参数,如$frontmatter
和window
, 请使用EJS脚本语言
module.exports = {
plugins: [
[
'vuepress-plugin-comment-plus',
{
choosen: 'valine',
options: {
el: '#valine-vuepress-comment',
appId: 'Your own appId',
appKey: 'Your own appKey',
path: '<%- frontmatter.commentid || frontmatter.permalink %>'
}
}
]
]
}
隐藏评论栏
你如果想在指定页面隐藏评论栏,设置$frontmatter.comment
或者$frontmatter.comments
为false
。
例如:
---
comment: false
# comments: false
---
这样一来,文章页面就不会出现评论栏。
设置详解
变量名 | 类型 | 备注 | 说明 |
---|---|---|---|
choosen | string | 必须 | |
options | object | 必须 | 对应使用的评论插件的配置 |
container | string | 可选,默认是'main.page'
|
包含评论插件的dom选择器 |