前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。为了丰富网站的功能，我们可以直接使用一些已有的插件。在这篇文章中，我们将讨论一些常用的插件。1.公告板弹窗插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/bulletinPopover.html安装：yarnadd@vuepress-reco/vuepress-plugin-bulletin-popover-D使用:plugins:[['@vuepress-reco/vuepress-plugin-bulletin-popover',{width:'300px',//默认260pxtitle:'MessagePrompt',body:[{type:'title',content:'将SaeYu好友加入前端交流群',style:'text-align:center;'},{type:'图片',src:'https://cdn.jsdelivr.net/gh/mqyqingfeng/picture/IMG_3516.JPG'}],footer:[{type:'button',text:'reward',link:'/donate'}]}]]效果截图：注：查看插件源码即可知,并且会弹出公告板是sessionStorage控制的显示频率。在本地测试时，如果关闭了，可以通过清空sessionStorage重新显示。//目录：node_modules/@vuepress-reco/vuepress-plugin-bulletin-popover/bin/Bulletin.vuemounted(){constcloseNote=sessionStorage.getItem('closeNote')this.visible=closeNote!=='true'}2.代码拷贝插件地址：https://www.npmjs.com/package/vuepress-plugin-nuggets-style-copy安装：yarnaddvuepress-plugin-nuggets-style-copy-D用法：plugins:[["vuepress-plugin-nuggets-style-copy",{copyText:"Copycode",tip:{content:"Copysuccessful"}}]]效果类似于掘金的代码拷贝：其他风格的代码拷贝插件也可以:https://github.com/znicholasbrown/vuepress-plugin-code-copyhttps://snippetors.github.io/plugins/vuepress-plugin-code-copy.html3.添加版权信息可以使用vuepress-plugin禁用-copyright复制文字或在复制时添加版权信息。插件地址：https://vuepress-community.netlify.app/zh/plugins/copyright安装：yarnaddvuepress-plugin-copyright-D使用：plugins:[['copyright',{authorName:'决羽',//选中的文字不会被复制minLength:30,//如果长度超过30个字符},]]复制超过30个字符时会出现：版权属于SaeYu。链接：http://localhost:8080/learn-typescript/handbook/Basic.htmlJavaScript的每个值在执行不同的操作时表现不同。这听起来有点抽象，那么我们来举个例子，假设我们有一个名为message的变量，想象一下我们可以做什么：4.背景音乐插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/bgmPlayer.html安装：yarnadd@vuepress-reco/vuepress-plugin-bgm-player-D使用：plugins:[['@vuepress-reco/vuepress-plugin-bgm-player',{audios:[{name:'LOSER',artist:'YonezuKenshi',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:'10px','z-index':'999999'}}]]效果截图：其他音乐插件：https://github.com/moefyit/vuepress-plugin-metinghttps://juejin.cn/post/70459440081907220795.看板娘插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html安装：yarn添加@vuepress-reco/vuepress-plugin-kan-ban-niang-D使用：plugins:[['@vuepress-reco/vuepress-plugin-kan-ban-niang',{主题:['blackCat','whiteCat','haru1','haru2','haruto','koharu','izumi','shizuku','wanko','miku','z16']}]]效果截图：其他看板少女插件：https://github.com/yanjun0501/vuepress-plugin-live2d6。修改光标效果插件地址：https://github.com/moefyit/vuepress-plugin-cursor-effects安装：yarnaddvuepress-plugin-cursor-effects-D使用：plugins:[['cursor-effects',{size:2,//粒子大小，默认：2shape:'star',//['star'|'circle'],//粒子的形状，默认：'star'zIndex:999999999,//画布的z-index属性，默认：999999999}]]效果截图：7.动态标题显示插件地址：https://github.com/moefyit/vuepress-plugin-dynamic-title安装：yarnaddvuepress-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,}]]效果截图：8.优化代码展示插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/extractCode.html安装：yarnadd@vuepress-reco/vuepress-plugin-extract-code-D使用：plugins:['@vuepress-reco/extract-code']效果截图：当需要在这显示代码way这时候需要在md文件中添加：
