Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


npm version

Yet another Gatsby plugin for Valine comment system.


✨ Features

This plugin help you use Valine comment system more easy in your website.

  • Pure wrapping of the latest Valine with React Hooks API
  • Support all options of Valine
  • Written in TypeScript

🚚 Installation

npm install gatsby-plugin-valine-comment


yarn add gatsby-plugin-valine-comment

This plugin requires React v16.8 or above.

🔦 Usage

  1. If you don’t have AppId and AppKey of LeanCloud, check this document here

  2. Enable the plugin in your gatsby-config.js

    // In your gatsby-config.js
    plugins: [
            resolve: `gatsby-plugin-valine-comment`,
            options: {
                // plugin options here
                appId: 'LEANCLOUD_APP_ID',
                appKey: 'LEANCLOUD_APP_KEY',
  3. Use <Valine /> component in your page code

    import React from 'react';
    import Valine from 'gatsby-plugin-valine-comment';
    export default function Page({location}) {
        return (
                <Valine path={location.pathname} /*component options here*/ />

    Plugin options and component options are same. You can put common options (e.g. appId, appKey, avatar) in plugin options, some options (e.g. path) that you want to set separately for certain pages can be placed in component options. The options will be merged and the options from the component will have higher priority.

After that, you should be able to add and see comments on your website.

🔧 Options

Name Type Default Description
appId string null Application appId from Leancloud
appKey string null Application appKey from Leancloud
placeholder string Just go go Comment box placeholders
path string window.location.pathname Article path(just like duoshuo thread)
pure boolean false If true, plugin will build valine without default styles
avatar string mp Avatar, https://valine.js.org/en/avatar.html
meta array ['nick','mail','link'] Reviewer attributes
pageSize bumber 10 Number of pages per page
lang string zh-CN Multilingual support
langMode object null Custom language, https://valine.js.org/en/i18n.html
visitor boolean false Article reading statistics
highlight boolean true Code highlighting
avatarForce boolean false Each time you access forced pulls the latest avatar
recordIP boolean false Record reviewer IP
serverURLs string http[s]://[tab/us].avoscloud.com For domestic custom domain name users
emojiCDN string Emoji Pack CDN, https://valine.js.org/en/emoji.html
emojiMaps object null Emoji Packet Mapping
enableQQ boolean false Whether to automatically get QQ Nickname and QQ Avatar
requiredFields array [] Set required fields, default anonymous

For more detail, see https://valine.js.org/en/configuration.html

💡 Why I write this plugin

  • Existing plugins are obsolete and no longer maintained
  • For fun
© 2023 Gatsby, Inc.