插件大全

通过安装插件使我们的博客页面更加有逼格，炫酷。vuepress (opens new window)提供啦部分内置插件。下面列出我了解的一些插件

1.PWA插件

@vuepress/plugin-pwa 自动生成 Service Worker,生成一个刷新按钮，更新网站内容，也能离线访问。

• 安装命令 npm install -D @vuepress/plugin-pwa
• 插件配置：在config.js的 pulgin 选项中配置如下

module.exports = {
  plugins: [
    '@vuepress/pwa',
    {
      serviceWorker: true,
      updatePopup: {
        message: '发现新内容可用',
        buttonText: '刷新'
      }
    }
  ]
}

2、看板娘插件

@vuepress-reco/vuepress-plugin-kan-ban-niang (opens new window)看板娘

• 安装命令： npm install -D @vuepress-reco/vuepress-plugin-kan-ban-niang
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: [
    '@vuepress-reco/vuepress-plugin-kan-ban-niang',
    {
      theme: ['haru1', 'whiteCat', 'miku', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'blackCat', 'z16'],
      clean: false,
      messages: {
        welcome: '欢迎来到我的博客',
        home: '心里的花，我想要带你回家。',
        theme: '好吧，希望你能喜欢我的其他小伙伴。',
        close: '你不喜欢我了吗？痴痴地望着你。'
      },
      messageStyle: { right: '68px', bottom: '290px' },
      width: 250,
      height: 320
    }
  ]
}

3、公告插件

'@vuepress-reco/vuepress-plugin-bulletin-popover (opens new window) 公告插件

• 安装命令： npm install -D @vuepress-reco/vuepress-plugin-bulletin-popover
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: [
    '@vuepress-reco/vuepress-plugin-bulletin-popover',
    {
      title: '公告',
      body: [
        {
          type: 'title',
          content: '欢迎来到我的博客🎉🎉🎉',
          style: 'text-align: center;font-size: 15px;font-weight: bold;'
        },
        {
          type: 'text',
          content: '博客汇集了个人总结的资料文档，会不定期进行更新!',
          style: 'text-align: left;text-indent: 10px;font-size: 13px;'
        },
        {
          type: 'text',
          content: '博客中可能存在一些问题，欢迎小伙伴们给我留言.',
          style: 'text-align: left;text-indent: 10px;font-size: 13px;'
        },
        {
          type: 'text',
          content: '邮箱：874957743@qq.com',
          style: 'text-align: left;text-indent: 10px;font-size: 13px;'
        }
      ],
      footer: null
    }
  ]
}

4、音乐播放器插件

vuepress-plugin-meting (opens new window) 音乐播放插件

• 安装命令：npm i vuepress-plugin-meting -D
• 插件配置: 在config.js的 pulgin 选项中配置如下：

module.exports={
  plugins:[
      'meting',
      {
        meting: {
          // 歌单地址-> 如果输入可忽略server|type|mid
          auto: 'https://music.163.com/#/playlist?id=2974518382',
          // 当前服务为netease -> 网易
          server: "netease",
          // 类型为歌单
          type: "playlist",
          // 歌单id
          mid: "2974518382",
        },
        aplayer: {
          // 歌单为随机
          order: 'random',
          // 0为不显示歌词
          lrcType: 0,
          // 音量
          volume: 0.55,
          // 开启迷你模式
          mini: true,
          // 自动播放
          autoplay: true
        },
     },
  ]
}

5.页面彩带插件

ribbon-animation (opens new window) 首页气泡特效

• 安装命令： npm install -D vuepress-plugin-ribbon-animation
• 插件配置：在config.js的 pulgin 选项中配置如下

module.exports = {
  plugins: [
    'ribbon-animation',
    {
      size: 120, // 默认数据
      opacity: 0.3, //  透明度
      zIndex: -1, //  层级
      opt: {
        // 色带HSL饱和度
        colorSaturation: '80%',
        // 色带HSL亮度量
        colorBrightness: '60%',
        // 带状颜色不透明度
        colorAlpha: 0.65,
        // 在HSL颜色空间中循环显示颜色的速度有多快
        colorCycleSpeed: 6,
        // 从哪一侧开始Y轴 (top|min, middle|center, bottom|max, random)
        verticalPosition: 'max',
        // 到达屏幕另一侧的速度有多快
        horizontalSpeed: 200,
        // 在任何给定时间，屏幕上会保留多少条带
        ribbonCount: 2,
        // 添加笔划以及色带填充颜色
        strokeSize: 0,
        // 通过页面滚动上的因子垂直移动色带
        parallaxAmount: -0.5,
        // 随着时间的推移，为每个功能区添加动画效果
        animateSections: true
      },
      //  点击彩带  true显示  false为不显示
      ribbonShow: false,
      // 滑动彩带
      ribbonAnimationShow: true
    }
  ]
}

6、页面樱花插件

vuepress-plugin-sakura (opens new window) 页面樱花插件

• 安装命令： npm install vuepress-plugin-sakura -D
• 插件配置：在config.js的 pulgin 选项中配置如下

module.exports = {
  plugins: [
    'sakura',
    {
      // 默认数量
      num: 40,
      //是否显示
      show: true,
      // 层级
      zIndex: 100,
      img: {
        // false 默认图 true 换图 需要填写httpUrl地址
        replace: true,
        // 绝对路径
        httpUrl: ''
      }
    }
  ]
}

7、趣味动态标题插件

vuepress-plugin-dynamic-title (opens new window)趣味动态标题。

• 安装命令： npm i vuepress-plugin-dynamic-title -D
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: [
    'dynamic-title',
    {
      showIcon: '/favicon.ico',
      showText: '(/≧▽≦/)咦！又好了！',
      hideIcon: '/failure.ico',
      hideText: '(●—●)喔哟，崩溃啦！',
      recoverTime: 2000
    }
  ]
}

8、随机名言插件

vuepress-plugin-boxx (opens new window) 默认随机展示名人名句

• 安装命令： npm i vuepress-plugin-boxx -D
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: ['vuepress-plugin-boxx']
}

全局注册啦一个<BOXX/>使用效果如下

也可以自定义名言内容

<Boxx title='曦杨说：' content='这博客嘎嘎依嘎斯' />

9、代码块复制插件

vuepress-plugin-nuggets-style-copy (opens new window) 代码块复制插件

• 安装命令： npm i vuepress-plugin-nuggets-style-copy -D
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: [
    'vuepress-plugin-nuggets-style-copy',
    {
      copyText: '复制代码',
      tip: {
        content: '复制成功!'
      }
    }
  ]
}

10、鼠标点击特效插件

vuepress-plugin-cursor-effects (opens new window) 鼠标点击特效插件

• 安装命令： npm install -D vuepress-plugin-cursor-effects
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: [
    'vuepress-plugin-cursor-effects',
    {
      // size of the particle, default: 2
      size: 4,
      // shape of the particle, default: 'star'
      shape: 'star',
      // z-index property of the canvas, default: 999999999
      zIndex: 999999999
    }
  ]
}

11、自动侧边栏

vuepress-plugin-auto-sidebar (opens new window) 自动侧边栏

• 安装命令： npm i vuepress-plugin-auto-sidebar -D
• 插件配置：在config.js的 pulgin 选项中配置如下：

module.exports = {
  plugins: [
    ["vuepress-plugin-auto-sidebar", {
      // options
    }]
  ]
}

如何不想文章展示侧边栏那么可在Front Matter中添加 autoIgnore。