vuepress-plugin-vdoing-comment

!version

Support popular comment plugins in Vuepress, supports Gitalk, Valine, Artalk...

It is well-tested via vuepress-vdoing-theme

- vuepress-plugin-vdoing-comment
- Copyright
- FAQ
- Features
- Usage
- Install
- ⚠️Route object properties
- Use in Gitalk
- Use in Valine
- Use in Artalk
- How to hide page comment

Copyright

This project is a enhance version
of https://github.com/dongyuanxin/vuepress-plugin-comment

FAQ

1. Artalk server crash after post a comment?

it is a bug, already fixed in 1.0.2 .

2. Some times comment component not load?

Clear browser cache and reload page again.

3. Does dark mode or read mode look well?

Yes. After 1.0.4 it auto-fits and bundled , You DO NOT need to add any css code.

If you have other questions, please mail to youweics@163.com or open an issue

Features

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

Usage

$3

With npm:

``bash
npm install --save vuepress-plugin-vdoing-comment
`

With yarn:

`bash
yarn add vuepress-plugin-vdoing-comment -D
`

With cnpm:

`bash
cnpm i --save vuepress-plugin-vdoing-comment
`

$3

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.

$3

The options is exactly the same as Gitalk configuration.

`javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-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.

`javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-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.

$3

The options is exactly the same as Valine configuration.

`javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-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.

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

$3

The options is different from Gitalk configuration.

`javascript
module.exports = {
plugins: [
[
'vuepress-plugin-vdoing-comment',
{
choosen: 'artalk',
options: {
server: 'https://my-artalk-server', // （必填）
site: '站点名称', // （必填）
// disableEmotion: false, // 是否禁用表情（可选）
// disablePicture: true, // 是否禁用图片（可选）
// disablePreview: false // 是否禁用预览（可选）
}
}
]
]
}
`

$3

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

For example:

`yml
---
comment: false

comments: false

---
``

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