Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vuepress-plugin-comment with all npm packages installed. Try it out:

var vuepressPluginComment = require("vuepress-plugin-comment")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vuepress-plugin-comment v0.7.3

Comment plugin in vuepress, such as Gitalk, Valine...

Vuepress-comment-plugin

version

Support popluar comment plugins in Vuepress, sucn as Gitalk, Valine, Disqus.

Features

  • Support Gitalk, Valine
  • Dynamic Import
  • Response router change and refresh automatic
  • User can use passage's $frontmatter

Usage

Install

With npm:

npm install --save vuepress-plugin-comment

With yarn:

yarn add vuepress-plugin-comment -D

With cnpm:

cnpm i --save vuepress-plugin-comment

⚠️Route object properties

Don't use window object directly to get route information.

Plugin has registered correct route information in frontmatter.to object and frontmatter.from object. Their properties are the same as vue-router's route object.

Use in Gitalk

The options is exactly the same as Gitalk configuration.

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        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 
        }
      }
    ]
  ]
}

If you want to access variables, such as $frontmatter and window, please use EJS syntax.

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        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,
        }
      }
    ]
  ]
}

Note: Never use callback function in plugin configuration, that will be filtered by vuepress. So I have to support EJS syntax.

Use in Valine

The options is exactly the same as Valine configuration.

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

If you want to access variables, such as $frontmatter and window, please use EJS syntax.

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'valine', 
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey',
          path: '<%- frontmatter.commentid || frontmatter.permalink %>'
        }
      }
    ]
  ]
}

How to hide page comment

If you want to hide comment plugin in specified page, set $frontmatter.comment or $frontmatter.comments to false.

For example:

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

Comment won't appear in the page of this passage.

Options Detail

  • choosen string

    Required.

  • options object

    Required. The options of choosen comment plugin.

  • container string

    Optional, default as 'main.page'. The dom selector that contains choosen comment plugin.

Todo

  • Support Disqus
  • 中文说明
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free