Comment Function

Mr.Hope ... 2020-1-29 Feature
  • Comment
  • Feature
About 3 min

vuepress-theme-hope implements the comment feature with built-in vuepress-plugin-comment1 (opens new window).

# Enable Support page config

Comment feature is enabled globally by default, the configuration key is comment.

Tips

For the complete config item of the plugin ,please see vuepress-plugin-comment1 plugin documentation (opens new window).

# Comment Provider

You can choose from 3 comment service provider: Waline, Vssue and Valine.

Comparison between services

  • Waline uses a backend server to support comment and pageview statistics, and you can comment without logging in to any account. It needs extra configuration on backend, and you can deploy on vercel for free.
  • Vssue uses the issue panel of the code platform repo and requires the user to login or register the corresponding platform account.
  • Valine uses leancloud to support pageview statistics, and you can comment without logging in to any account

If your site is for the general public rather than programmers, Waline is recommended.

# Waline

# Get APP_ID and APP_Key

Sign in (opens new window) or sign up (opens new window) leancloud. Then create new application in Leancloud, and you will get APP ID / APP Key / APP Master Key.

After that, create a vercel app using the below button.

Vercel (opens new window)

Then input your new GitHub repo name and set LEAN_ID, LEAN_KEY and LEAN_MASTER_KEY environment variables in the "Environment Variables" column. APP ID is the value of LEAN_ID, and APP Key to LEAN_KEY, Master Key to LEAN_MASTER_KEY.

Click Deploy button to deploy. It will show you deploy successfully after a minitues time. Then config the vercel link in your themeConfig:

Tips

Config will be listed on Plugin Config (opens new window).

For more details, please see Waline Docs (opens new window)

# Vssue

# Choose a platform to use

Vssue can enable comments for your static pages via the Issue System of GitHub, Gitlab, Bitbucket or Gitee, and you can choose one of those platforms.

Go to Supported Platforms - Set up OAuth App (opens new window) for detailed instructions.

After this step, you will get client id and client secret of your OAuth App, which will be used for Vssue options:

  • owner: the account / group that owns the repository
  • repo: the name of the repository to store comments
  • clientId: the client id of your oauth app
  • clientSecret: the client secret of your oauth app (only required for some of the platforms)

# Use the plugin

Tips

The only difference is that, you should set platform rather than the api package itself.

@vssue/vuepress-plugin-vssue will auto resolve the corresponding API package according to the value of platform:

  • Platform github - @vssue/api-github-v3 API package
  • Platform github-v4 - @vssue/api-github-v4 API package
  • Platform gitlab - @vssue/api-gitlab-v4 API package
  • Platform bitbucket - @vssue/api-bitbucket-v2 API package
  • Platform gitee - @vssue/api-gitee-v5 API package
  • Platform gitea - @vssue/api-gitea-v1 API package

Tips

You can go to the repository meteorlxy/vssue-demo (opens new window) to get the demo code.

# Valine

# Get APP_ID and APP_Key

Click here (opens new window) to register or login in leancloud.

Create new application in Leancloud, and you will get APP ID / APP Key.

Config will be listed on Config (opens new window).

Fill in the corresponding APP ID and APP Key, then Valine will be well configured.

Tips

For Valine config and usage, please see Valine Docs (opens new window)

Last update: June 4, 2022 13:16
Contributors: Mr.Hope , Mr.Hope