vuepress-plugin-reward

A vuepress plugin for reward component

Usage no npm install needed!

<script type="module">
  import vuepressPluginReward from 'https://cdn.skypack.dev/vuepress-plugin-reward';
</script>

README

vuepress-plugin-reward

A vuepress plugin for reward component

npm GitHub stars GitHub license

Install

# install dependencies
npm i vuepress-plugin-reward -D

# or use yarn
yarn add vuepress-plugin-reward -D

Show it like

vuepress-reward

vuepress-reward

Coloring scheme

The Button

$accentColor is taken from the configuration in .vuepress/styles/palette.styl

.demo {
  color: $accentColor;
  background-color: lighten($accentColor, 50%);
}

The Reward Container

$accentColor and $textColor is taken from the configuration in .vuepress/styles/palette.styl

.demo {
  color: $accentColor; // First reward text and closed icon color.
  color: $textColor; // Second reward text and container body text color.
  border-color: lighten($textColor, 30%);
  background-color: #fff;
}

Usage

Write vuepress config

module.exports = {
  plugins: ['reward']
}

Options

This plugin supports the following configurations.

module.exports = {
  plugins: ['reward', {
    btnText: '打赏', // reward button text.
    title: '给作者赏一杯咖啡吧', // First reward text.
    subTitle: '您的支持将是我继续更新下去的动力', // Second reward text.
    rewardOption: [ // your QR code image.
      {
        text: '微信',
        url: '/WeChat.png' // ddd your picture to docs/.vuepress/public
      },
      {
        text: '支付宝',
        url: '/Alipay.png' // ddd your picture to docs/.vuepress/public
      }
    ],
    showInMobile: false // whether to display on the mobile side, default: false.
  }]
}

License

MIT.