Overview

Article comments are powered by @vuepress/plugin-comment.

The theme has built-in plugin support, so you can use it without reinstalling.

In this theme, configure through the following fields:

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    comment: {
      // Comment service
      provider: '', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
      // Whether comments are enabled by default
      comment: true,

      // Other configurations based on the comment service
      // ...
    }
  })
})

Comment Services

@vuepress/plugin-comment supports various comment services such as "Artalk" | "Giscus" | "Twikoo" | "Waline".

You can configure based on your requirements.

• Giscus is a comment service based on GitHub Discussions, easy to set up. View documentation
• Waline is a comment service that requires a backend, offering higher security. View documentation
• Twikoo is a concise, secure, free static website comment service based on Tencent Cloud Base. View documentation
• Artalk is a concise self-hosted comment service that you can easily deploy on your server and embed in frontend pages. View documentation

Recommended Comment Services

• For programmers and developers: Giscus
• For the general public: Waline

Note

Examples are forked from @vuepress/plugin-comment, following the MIT license.

Comment Service Limitations at a Glance

The limitations differ significantly between comment services — check this table before choosing:

Comment Service	Backend required	Storage	Main limitations
Giscus	No	GitHub Discussions	Requires GitHub account login; may be unstable in mainland China; content is publicly visible
Waline	Yes	Vercel (or self-hosted)	You must deploy and keep the server running; anonymous comments need configuration
Twikoo	No	Tencent CloudBase	Depends on the Tencent Cloud environment; free quota is limited
Artalk	Yes	SQLite / PostgreSQL / MySQL	You must deploy the server yourself

The comment feature must be enabled explicitly

Comments are disabled by default and must be turned on via the comment field. Additionally:

• comment is a global-only field — placing it inside locales is silently ignored (see Theme Configuration > locales)
• Some comment services (Waline, Artalk) have client scripts that are not part of the theme's default dependencies and must be installed separately per their documentation
• Comment behaviour on encrypted pages is undefined; do not rely on comments in encrypted articles

Giscus

Giscus is a comment system based on GitHub Discussions, easy to set up.

Prerequisites

1. You need to create a public repository and enable Discussions to serve as the location for storing comments.

2. You need to install the Giscus App to grant it permission to access the corresponding repository.

3. After completing the above steps, go to the Giscus page to get your settings.

   You only need to fill in the repository and Discussion category, then scroll to the "Enable giscus" section at the bottom of the page to obtain the four attributes: data-repo, data-repo-id, data-category, and data-category-id.

Configuration

Set provider: 'Giscus' and pass data-repo, data-repo-id, data-category, and data-category-id as plugin options to repo, repoId, category, and categoryId.

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    comment: {
      provider: 'Giscus', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
      comment: true,
      repo: 'Your_Repo', 
      repoId: 'Your_RepoId', 
      category: 'Your_Category', 
      categoryId: 'Your_CategoryId', 
    }
  })
})

Themes

By default, Giscus uses light or dark themes (based on the dark mode state).

If you want to customize themes for light and dark modes, you can set the lightTheme and darkTheme options using built-in theme keywords or custom CSS links starting with https://.

Waline

A secure comment service with a backend.

Installation

If you want to use Waline in the theme, you need to install @waline/client first.

npm

npm i @waline/client

pnpm

pnpm add @waline/client

yarn

yarn add @waline/client

LeanCloud Setup (Database)

LeanCloud International Edition is expected to discontinue its services on January 12, 2027, and is not recommended for use.

1. Login or Register for LeanCloud International and enter the Console

2. Click Create Application in the upper left corner and choose a name you like (please select the free development plan):

   

3. Enter the application, select Settings > Application Keys in the lower left corner. You can see your APP ID, APP Key, and Master Key. Please record them for later use.

   

Domestic version requires ICP filing

If you are using the LeanCloud domestic version (leancloud.cn), we recommend switching to the international version (leancloud.app). Otherwise, you need to bind an already ICP-filed domain to the application, purchase an independent IP, and complete the ICP filing process:

• Log in to the domestic version and enter the application you need to use
• Select Settings > Domain Binding > API Access Domain > Bind New Domain > Enter domain > OK.
• Follow the instructions on the page to complete the CNAME resolution in DNS as required.
• Purchase an independent IP and submit a work order to complete the ICP filing. (The current price for an independent IP is ¥50/month)

Vercel Deployment (Server)

1. Click the button above to jump to Vercel for server-side deployment.

   Note

   If you are not logged in, Vercel will prompt you to register or log in. Please use your GitHub account for quick login.

2. Enter a Vercel project name you like and click Create to continue:

   

3. At this point, Vercel will help you create and initialize a repository based on the Waline template, with the repository name being the project name you entered earlier.

   

   After a minute or two, a full screen of fireworks will celebrate your successful deployment. Click Go to Dashboard to jump to the application's console.

   

4. Click Settings at the top - Environment Variables to enter the environment variable configuration page, and configure the three environment variables LEAN_ID, LEAN_KEY, and LEAN_MASTER_KEY. Their values correspond to the APP ID, APP KEY, and Master Key obtained from LeanCloud in the previous step, respectively.

   

   Note

   If you are using the LeanCloud domestic version, please additionally configure the LEAN_SERVER environment variable with the value of your bound domain.

5. After configuring the environment variables, click Deployments at the top, then click the Redeploy button on the right side of the latest deployment to redeploy. This step is to make the environment variables you just set take effect.

   

6. At this point, it will jump to the Overview interface to start deployment. Wait a moment until the STATUS becomes Ready. Then click Visit to jump to the deployed website address, which is your server address.

   

Domain Binding (Optional)

1. Click Settings - Domains at the top to enter the domain configuration page.

2. Enter the domain you want to bind and click Add.

   

3. Add a new CNAME record at your domain DNS provider.

   Type	Name	Value
   CNAME	example	cname.vercel-dns.com

4. Wait for it to take effect. You can now access it via your own domain 🎉

   • Comment service: example.your-domain.com
   • Comment management: example.your-domain.com/ui

   

Client

Configuration

Set provider: "Waline" in the plugin options, and set the server address serverURL to the value obtained in the previous step.

After configuration, the theme will automatically render the comment component at the bottom of article pages — no need to manually import or place <CommentService>.

Tips

You can also pass other options supported by Waline (except el). For details, see Waline Configuration.

Comment Management (Admin Panel)

1. After deployment is complete, please visit <serverURL>/ui/register to register. The first person to register will be set as the administrator.

2. After logging in as an administrator, you can see the comment management interface. Here you can modify, mark, or delete comments.

3. Users can also register accounts through the comment box. After logging in, they will be redirected to their own profile page.

Twikoo

Twikoo is a concise, secure, free static website comment service based on Tencent Cloud Base.

The minimal usable configuration requires setting envId (the Tencent Cloud environment ID; if deployed on Vercel, it is the deployment address):

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    comment: {
      provider: 'Twikoo',
      envId: 'your-env-id', 
    },
  }),
})

For deployment methods and the full configuration, see the Twikoo documentation.

Artalk

Artalk is a concise self-hosted comment service that you can easily deploy on your server and embed in frontend pages.

The minimal usable configuration requires setting server (the Artalk server address):

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    comment: {
      provider: 'Artalk',
      server: 'https://artalk.example.com', 
    },
  }),
})

For deployment methods and the full configuration, see the Artalk documentation.

Contributors

pengzhanbo

Changelog

10/13/26, 3:56 PM

View All Changelog

• e4dae-docs: improve docs (#1071)on 10/13/26
• 60619-docs: improve docs (#1069)on 10/11/26
• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageImage Preview

Next pageBulletin