vuepress-plugin-vdoing-comment

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 [email protected] or open an issue

Features

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

Usage

Install

With npm:

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

With yarn:

yarn add vuepress-plugin-vdoing-comment -D

With cnpm:

cnpm i --save vuepress-plugin-vdoing-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-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.

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.

Use in Valine

The options is exactly the same as Valine configuration.

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.

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 %>'
                }
            }
        ]
    ]
}

Use in Artalk

The options is different from Gitalk configuration.

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

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.