Comment Service

About 3 min

vuepress-theme-hope implements the comment feature with built-in @vuepress/plugin-comment.

Info

vuepress-theme-hope passes plugins.comment in theme options as plugin options to @vuepress/plugin-comment.

Enable Support page config

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      comment: {
        // choose a comment provider
        provider: "Waline",

        // provider options
        serverURL: "...", // your serverURL
      },
    },
  }),
};

Comment feature is enabled globally by default, controlled by plugins.comment.comment options.

Tips

For the complete config item of the plugin, please see plugin documentation.

Comment Provider

Currently, you can choose from Giscus, Waline, Twikoo and Artalk.

Comment service selection

Giscus is recommended if your blog or documentation is primarily geared towards programmers.
If your blog or documentation is for the general public, Waline is recommended.

Giscus

Giscus is a GitHub Discussion based commenting system that is easy to start.

Preparation

You need to create a public repository and open discussion as a place to store comments
You need to install the Giscus App to have permission to access the corresponding repository.

After completing the above steps, please go to the Giscus page to get your settings. You just need to fill in the repository and Discussion categories, then scroll to the "Enable giscus" section at the bottom of the page and copy the data-repo, data-repo-id, data-category and data-category-id four items as they are required.

Config

Please pass data-repo, data-repo-id, data-category and data-category-id as plugin options as repo, repoId, category categoryId.

For other options, see Giscus Config.

Waline

pnpm

pnpm add -D @waline/client

yarn

yarn add -D @waline/client

npm

npm i -D @waline/client

Get APP_ID and APP_Key

Sign in or sign up 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.

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 some time. Then config the vercel link in your theme options:

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      comment: {
        provider: "Waline",
        serverURL: "YOUR_SERVER_URL", // your server url
      },
    },
  }),
};

Tips

Config will be listed on Waline Config.

For more details, please see Waline Docs。

Twikoo

pnpm

pnpm add -D twikoo

yarn

yarn add -D twikoo

npm

npm i -D twikoo

Vercel Deployment

Apply for MongoDB account
Create a free MongoDB database, the recommended region is AWS / N. Virginia (us-east-1)
Click CONNECT on the Clusters page, follow the steps to allow connections from all IP addresses (Why?), create Database user, and record the database connection string, please change the <password> in the connection string to the database password
Sign up for a Vercel account
Click the button below to deploy Twikoo to Vercel in one click
Vercel
Go to Settings - Environment Variables, add the environment variable MONGODB_URI, the value is the database connection string in step 3
Go to Overview, click the link under Domains, if the environment configuration is correct, you can see the prompt "Twikoo cloud function is running normally"
Vercel Domains (with https:// prefix, for example https://xxx.vercel.app) is your environment ID

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      comment: {
        provider: "Twikoo",
        envId: "YOUR_SERVER_URL", // your server url
      },
    },
  }),
};

Note

Click the "little gear" icon in the comment window to set the administrator password

Artalk

pnpm

pnpm add -D artalk

yarn

yarn add -D artalk

npm

npm i -D artalk

Deploy Artalk Server

See the Artalk documentation for deploying artalk server.

Artalk Configuration

Please set provider: "Artalk" and pass your server link to server in the plugin options.

For other configuration items, see Artalk Configuration.

Note

The plugin retains the el option and inserts Artalk itself on the page. At the same time, the plugin will automatically set the pageTitle, pageKey and site options for you according to the VuePress information.

Before VuePress2 provides client configuration, the two function options imgUploader and avatarURLBuilder are not supported.