1.1.0 • Published 1 year ago

gatsby-plugin-valine-comment v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

gatsby-plugin-valine-comment

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

or

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 (
            <Layout>
                <Valine path={location.pathname} /*component options here*/ />
            </Layout>
        );
    }

    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

NameTypeDefaultDescription
appIdstringnullApplication appId from Leancloud
appKeystringnullApplication appKey from Leancloud
placeholderstringJust go goComment box placeholders
pathstringwindow.location.pathnameArticle path(just like duoshuo thread)
purebooleanfalseIf true, plugin will build valine without default styles
avatarstringmpAvatar, https://valine.js.org/en/avatar.html
metaarray['nick','mail','link']Reviewer attributes
pageSizebumber10Number of pages per page
langstringzh-CNMultilingual support
langModeobjectnullCustom language, https://valine.js.org/en/i18n.html
visitorbooleanfalseArticle reading statistics
highlightbooleantrueCode highlighting
avatarForcebooleanfalseEach time you access forced pulls the latest avatar
recordIPbooleanfalseRecord reviewer IP
serverURLsstringhttp[s]://[tab/us].avoscloud.comFor domestic custom domain name users
emojiCDNstringEmoji Pack CDN, https://valine.js.org/en/emoji.html
emojiMapsobjectnullEmoji Packet Mapping
enableQQbooleanfalseWhether to automatically get QQ Nickname and QQ Avatar
requiredFieldsarray[]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