Vuepress-comment-plugin-plus

说明文档 - [中文 | English]

Vuepress评论插件，当前支持Waline（推荐）、Gitalk、Valine

• 本项目基于dongyuanxin/vuepress-plugin-comment
• 特征
• 使用
  • 安装
  • ⚠️路由对象属性
  • 使用Gitalk
  • 使用Valine
  • 使用Waline
  • 隐藏评论栏
• 设置详解

特征

• 支持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选择器 |