vuepress-plugin-format-url-button

👀 Add a link button in your vuepress page!

Dependencies vuepress version

vuepress version v2.0.0+

Install

yarn add vuepress-plugin-format-url-button -D
# or use npm
npm i vuepress-plugin-format-url-button -D

Usage

module.exports = {
   plugins: [
      'format-url-button',
      {
         devShow: false,
         regx: '/md-ppt/.*/*.html$',
         top: 50,
         right: 50,
         btnClassName: '',
         btnText: '演示模式',
         pathUrl: 'mdppt',
         parentClassId: '.theme-default-content',
      },
   ],
}

Options

配置示例及默认配置

module.exports = {
   plugins: [
      [
         'format-url-button',
         {
            /** 测试环境是否隐藏, 默认显示 */
            devShow: false,
            /** 匹配pathname URL规则: 默认以/md-ppt/开头，.html结尾 **/
            regx: '/md-ppt/.*/*.html$',
            /** 按钮距离父级容器top距离 **/
            top: 50,
            /** 按钮距离父级容器right距离 **/
            right: 50,
            /** 按钮的自定义class; 例如：btn-class **/
            btnClassName: '',
            /** 按钮的自定义文案 **/
            btnText: '演示模式',
            /** 目标目录 */
            pathUrl: 'mdppt',
            /** 需要插入父级的元素的class或者id;例如：.btn-class | #btn-id **/
            parentClassId: '.theme-default-content',
         },
      ],
   ],
}