Support popluar comment plugins in Vuepress, sucn as Gitalk, Valine, Disqus.
- Support Gitalk, Valine
- Dynamic Import
- Response router change and refresh automatic
- User can use passage's
$frontmatter
With npm:
npm install --save vuepress-plugin-comment
With yarn:
yarn add vuepress-plugin-comment -D
With cnpm:
cnpm i --save vuepress-plugin-comment
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.
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.
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 %>' } } ] ] }
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.
-
choosen
stringRequired.
-
options
objectRequired. The options of choosen comment plugin.
-
container
stringOptional, default as
'main.page'. The dom selector that contains choosen comment plugin.
- Support Disqus
- 中文说明