Vuepress Plugin Qrcode

English| 简体中文

Introduction

Vuepress Plugin Qrcode is a Vuepress plugin that displays the QR code of the current URL for mobile devices to scan.

⭐Just wanting a star😆

Documentation

• Official Demo
• Community case

Installation

yarn add -D vuepress-plugin-qrcode
# OR npm install -D vuepress-plugin-qrcode

Usage

• Case One: Use without configuration

// .vuepress/config.js
module.exports = {
  plugins: ['qrcode']
}

• Case Two: set optional configuration,displayed text and QR code size

// .vuepress/config.js
module.exports = {
  plugins: [
    ['qrcode',{
        labelText:'Mobile Read', // displayed text
        size:'small' // QR code size
    }]
  ]
}

• Case Three: Multi-language configuration

// .vuepress/config.js
module.exports = {
  plugins: [
    ['qrcode',{
        // "/" and "/zh/" correspond to the path set by locales
        labelText: {
          "/": "QRCode", 
          "/zh/": "二维码",
        },
        size:'small' // QR code size
    }]
  ]
}

• Case Four: Adding parameters to the address, the mark comes from the QR code

// .vuepress/config.js
module.exports = {
  plugins: [
    ['qrcode',{
        channel:true, //Add mark
    }]
  ]
}

Configuration(optional)

labelText

• Type: string

• Default: Mobile Read
  Click the button to pop up the QR code, the text of the button.

  • Directly set labelText as a string, for example:

  labelText:'QRCode'

  • Or configure different displays according to the site's multi-language configuration, such as:

  labelText: {
    "/": "QRCode",
    "/zh/": "二维码",
  }

  Refer to Vuepress Internationalization

size

• Type: string | number

• Default: small
  Set the size of the QR code.

  • Can be a string, possible values are:

    • small: stands for 100px * 100px
    • medium: stands for 150px * 150px
    • big: stands for 200px * 200px

    such as:

    size:'big'

  • Or set the specific value you think is appropriate, the recommended values are:

    • 80: stands for 80px * 80px
    • 120: stands for 120px * 120px

    such as:

    size: 120

channel

• Type: boolean
• Default: false
  Whether to add a parameter at the end of the QR code address to mark that the access comes from the QR code, so as to facilitate statistics on the access effect of mobile phone scanning, such as:

  channel:true

Sponsor

If you think this project is useful or inspiring for you, you can buy the author a glass of juice:

• Paypal me
• Buy me a coffee

And contact the author to add to the sponsors list: [email protected]

Sponsors List

• Dushusir

Resources

• vuepress
• vuepress plugins