VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Blog
  • Comment
    • Guide
    • Giscus
    • Waline
      • Waline
      • Waline Options
    • Artalk
    • Twikoo
  • Feed

Artalk

Artalk is a clean self-hosted commenting system that you can easily deploy on your server and integrate into your front-end pages.

Deploy the Artalk comment box on your blog or any other page to add rich social functionality.

Usage

npm i -D artalk

Set provider: "Artalk" and pass your server address to the server option:

.vuepress/config.ts
import { commentPlugin } from '@vuepress/plugin-comment'

export default {
  plugins: [
    commentPlugin({
      provider: 'Artalk',
      server: 'https://artalk.example.com',
    }),
  ],
}

Artalk options are inherited from Artalk Configuration. All serializable options can be set directly in the plugin options.

Deploy Server

See the Artalk documentation.

Dark Mode

To let Artalk apply the correct theme, pass a boolean to the darkmode prop of <CommentService />, indicating whether dark mode is currently enabled. The plugin forwards it to the Artalk darkMode option.

Options

The following options are reserved for the plugin and are automatically inferred from the VuePress context:

elmanaged-by: Pluginstring | HTMLElement

The container element, inferred from the VuePress config.

pageTitlemanaged-by: Pluginstring

The page title, inferred from the VuePress page.

pageKeymanaged-by: Pluginstring

The page key, inferred from the VuePress route.

sitemanaged-by: Pluginstring

The site name, inferred from the VuePress site config.

Tips

The two function options imgUploader and avatarURLBuilder can only be set in the client config.

Client Config

You can use the defineArtalkConfig function to customize Artalk:

.vuepress/client.ts
import { defineArtalkConfig } from '@vuepress/plugin-comment/client'
import { defineClientConfig } from 'vuepress/client'

defineArtalkConfig({
  // Artalk config
})
Edit this page on GitHub
Last Updated: 9/28/26, 4:40 AM
Contributors: Mister-Hope
Prev
Waline
Next
Twikoo