vuepress（二）：插件

前言

在上一篇文章 vuepress（一）：搭建个人博客 已经完成了博客的搭建，这篇文章介绍一些常用的插件，通过插件让博客变得与众不同。

插件的使用

基础用法

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

Babel 式

module.exports = {
  plugins: [
    [
      'vuepress-plugin-xxx',
      { /* options */ }
    ]
  ]
}

对象式

module.exports = {
  plugins: {
    'xxx': { /* options */ }
  }
}

禁用插件

//Babel 式
module.exports = {
  plugins: [
    [ 'xxx', false ] // disabled.
  ]
}

//对象式
module.exports = {
  plugins: {
    'xxx': false // disabled.
  }
}

active-header-links

功能： 页面滚动时自动激活侧边栏链接的插件

安装

npm install -D @vuepress/plugin-active-header-links

使用

  plugins: [
    [
      "@vuepress/active-header-links",
      {
        sidebarLinkSelector: ".sidebar-link",
        headerAnchorSelector: ".header-anchor",
      },
    ],
  ],

效果

nprogress

功能： 一个基于 nprogress (opens new window)的进度条插件。

安装

npm install -D @vuepress/plugin-nprogress

使用

["@vuepress/nprogress"],

效果
这里会出现一个加载的进度条

看板娘

具体看官方文档，这里只列举常用属性

看板娘插件

安装

npm install @vuepress-reco/vuepress-plugin-kan-ban-niang -D

使用

[
    '@vuepress-reco/vuepress-plugin-kan-ban-niang',
    {
      theme: ['blackCat', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'miku', 'z16']
    }
  ]

效果

按钮

配置项

clean
是否开启clean模式(隐藏所有按钮)。默认false，当值为true时会隐藏所有按钮

messages

按钮提示语

 {
   welcome: '欢迎来到 ' + 您的站点名称（$site.title）,
   home: '心里的花，我想要带你回家。',
   theme: '好吧，希望你能喜欢我的其他小伙伴。',
   close: '你知道我喜欢吃什么吗？痴痴地望着你。'
 }

其他略

公告栏弹窗

安装

npm install @vuepress-reco/vuepress-plugin-bulletin-popover -D

使用

[
      "@vuepress-reco/vuepress-plugin-bulletin-popover",
      {
        width: "300px", // 默认 260px
        title: "消息提示",
        body: [
          {
            type: "title",
            content: "欢迎加入QQ交流群 🎉🎉🎉",
            style: "text-aligin: center;",
          },
          {
            type: "image",
            src: "/logo.png",
            style: "width:100px;height:100px;border-radius:50%;",
          },
        ],
        footer: [
          {
            type: "button",
            text: "打赏",
            link: "/",
          },
        ],
      },
    ],

效果

参数

具体参数见：公告栏参数

代码复制

安装

npm install vuepress-plugin-nuggets-style-copy -D

使用

 [
    "vuepress-plugin-nuggets-style-copy",
    {
      copyText: "复制代码",
      tip: {
        content: "复制成功",
      },
    },
  ],

效果

添加著作权信息

功能： 就像csdn博客一样，复制时会将作者的信息一块绘制过去

安装

npm install vuepress-plugin-copyright -D

使用

[
    'copyright',
    {
      authorName: 'onion', // 选中的文字将无法被复制
      minLength: 30, // 如果长度超过  30 个字符
    },
  ]

背景音乐

官方文档

背景音乐

安装

npm install @vuepress-reco/vuepress-plugin-bgm-player -D

使用

 [
   "@vuepress-reco/vuepress-plugin-bgm-player",
   {
     audios: [
       //本地歌曲
       {
         //名字
         name: "我从人间走过",
         //作者
         artist: "瞳荧/十八薰",
         //地址
         url: "/wcjrzg.m4a",
         //封面图片
         cover: "/wcrjzg.png",
       },
       //网络歌曲
       {
         //名字
         name: "LOSER",
         //作者
         artist: "米津玄師",
         //地址
         url: "https://www.ytmp3.cn/down/73654.mp3",
         //封面图片
         cover:
           "https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200",
       },
     ],
     // 是否默认缩小
     autoShrink: true,
     // 缩小时缩为哪种模式
     shrinkMode: "float",
     // 悬浮窗样式
     floatStyle: { bottom: "30px", "z-index": "999999" },
   },
 ],

效果

修改光标效果

安装

vuepress-plugin-cursor-effects -D

使用

plugins: [
  ['cursor-effects', {
    size: 2, // size of the particle, default: 2
    shape: 'star', // ['star' | 'circle'], // shape of the particle, default: 'star'
    zIndex: 999999999, // z-index property of the canvas, default: 999999999
	}]
]

动态标题展示

安装

npm install vuepress-plugin-cursor-effects -D

使用

plugins: [
  ['dynamic-title', {
     showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
     showText: '客官欢迎回来~',
     hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
     hideText: '客官不要走嘛~',
     recoverTime: 2000,
	}]
]