Comment

reco_luan2021-11-06 23:41:31

Introduction

The theme built-in comment plugin @vuepress-reco/vuepress-plugin-comments, currently supports Valine, Walin, Giscus;

If you want to not load comments by default, but only display comments on certain pages, you can set hideComments: true in valineConfig, and set hideComments: false on pages that need to display comments.

If it is only a certain article that you don't want to enable comments, you can set hideComments: true in front-matter.

Option API

Valine

// .vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { recoTheme } from 'vuepress-theme-reco'

export default defineUserConfig({
  theme: recoTheme({
    commentConfig: {
      type: 'valine',
      options: {
        appId: '...', // your appId
        appKey: '...', // your appKey
        hideComments: true, // hide comments globally, default false
      },
    },
  }),
})

For other parameters, please refer to Valine official websiteopen in new window.

TIP

If valine's interface for getting comments reports a 404 error, don't worry, this is because you haven't added a comment, as long as there is 1 comment, no error will be reported, this is just the request processing operation of leanCloud;

Waline

// .vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { recoTheme } from 'vuepress-theme-reco'

export default defineUserConfig({
  theme: recoTheme({
    commentConfig: {
      type: 'waline',
      options: {
        serverURL: 'your serverURL',
        ...
        hideComments: true, // hide comments globally, default false
      },
    },
  }),
})

Refer to Waline official websiteopen in new window for the tutorial and other parameters of options.

Giscus

// .vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { recoTheme } from 'vuepress-theme-reco'

export default defineUserConfig({
  theme: recoTheme({
    commentConfig: {
      type: 'giscus',
      options: {
        repo: 'reco/blog-comments',
        repoId: 'R_kgDOxxxxxx',
        category: 'Announcements',
        categoryId: 'xxxxx',
        mapping: 'title',
        ...
        hideComments: true, // hide comments globally, default false
      },
    },
  }),
})

Refer to Giscusopen in new window for the tutorial and other parameters of options.