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选择器

    Install

    npm i vuepress-plugin-comment-plus

    DownloadsWeekly Downloads

    10

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • sivanlaai