vuepress-plugin-comment-plus

1.1.0 • Public • Published

Vuepress-comment-plugin-plus

说明文档 - [中文 | English]

version visitors

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.tofrontmatter.from对象中,插件已经注册了路由信息. 所有的属性信息和vue-router的路由对象属性一致.

使用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
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 
        }
      }
    ]
  ]
}

如果想获取参数,如$frontmatterwindow, 请使用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

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment-plus',
      {
        choosen: 'valine', 
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey'
        }
      }
    ]
  ]
}

如果想获取参数,如$frontmatterwindow, 请使用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.commentsfalse

例如:

---
comment: false 
# comments: false 
---

这样一来,文章页面就不会出现评论栏。

设置详解

变量名 类型 备注 说明
choosen string 必须
options object 必须 对应使用的评论插件的配置
container string 可选,默认是'main.page' 包含评论插件的dom选择器

Package Sidebar

Install

npm i vuepress-plugin-comment-plus

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

18.3 kB

Total Files

7

Last publish

Collaborators

  • sivanlaai