说明文档 - [中文 | English]
Vuepress评论插件，当前支持Waline（推荐）、Gitalk、Valine
- 支持Waline
- 支持Gitalk, Valine
- 动态导入
- 响应路由改变并自动刷新
- 用户可以使用文章中的
$frontmatter
npm:
npm install --save vuepress-plugin-comment-plusyarn:
yarn add vuepress-plugin-comment-plus -Dcnpm:
cnpm i --save vuepress-plugin-comment-plus不要使用window对象直接去获取路由信息.
在frontmatter.to和frontmatter.from对象中，插件已经注册了路由信息. 所有的属性信息和vue-router的路由对象属性一致.
-
安装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
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（点击查看安装说明）
-
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选择器 |