README-zh.md

May 11, 2021 · View on GitHub

Vuepress Plugin Qrcode

npm download GitHub package.json version

简体中文 | English

介绍

Vuepress Plugin Qrcode是一个展示当前网址二维码供移动设备扫描的Vuepress插件

⭐求个小星星😆

文档

Demo

安装

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

使用

案例一：不加配置直接使用

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

案例二：设置可选配置，显示的文本和二维码大小

// .vuepress/config.js
module.exports = {
  plugins: [
    ['qrcode',{
        labelText:'Mobile Read', //显示的文本
        size:'small' // 二维码大小
    }]
  ]
}

案例三：多语言配置

// .vuepress/config.js
module.exports = {
  plugins: [
    ['qrcode',{
        // "/"和"/zh/"对应locales设置的路径
        labelText: {
          "/": "QRCode", 
          "/zh/": "二维码",
        },
        size:'small' // 二维码大小
    }]
  ]
}

案例四：地址添加参数，标记来自二维码

// .vuepress/config.js
module.exports = {
  plugins: [
    ['qrcode',{
        channel:true, //添加标记
    }]
  ]
}

配置(可选)

labelText

类型: string ｜ object
默认值: Mobile Read
点击按钮弹出二维码，按钮的文字。
- 可以直接labelText为一个字符串，比如：
```
labelText: '二维码'
```
- 或者根据站点多语言配置不同的显示，比如：
```
labelText: {
  "/": "QRCode", 
  "/zh/": "二维码",
}
```
参考 vuepress多语言支持

size

类型: string | number
默认值: small
设置二维码大小
- 可以为一个字符串，可能的值有：
  - small：代表100px * 100px
  - medium：代表150px * 150px
  - big：代表200px * 200px
  比如：
```
size:'big'
```
- 或者设定你认为合适的具体数值，推荐的值有：
  - 80：代表80px * 80px
  - 120：代表120px * 120px
  比如：
```
size: 120
```