admin 管理员组

文章数量: 1087649

VuePress插件分享

vuepress各种插件装饰

引入鼠标点击效果

在.vuepress\public\js文件夹下创建MouseClickEffect.js文件，填入以下代码

var a_idx = 0;function getRandom(max, min) {return Math.floor(Math.random() * (max - min + 1) + min);
}
jQuery(document).ready(function ($) {$("body").click(function (e) {var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");var $i = $("<span/>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": `rgb(${getRandom(255,0)},${getRandom(255,0)},${getRandom(255,0)})`,"user-select": 'none',"cursor": 'default'});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function () {$i.remove();});});
});

然后在主题配置文件config.js下的head引入以上js，这里的jquery必须引入，鼠标点击代码才能生效

head: [// 网页标签栏图标['link', { rel: 'icon', href: '/vuepress/favicon.ico' }],// 移动栏优化['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }],// 引入jquery["script", {"language": "javascript","type": "text/javascript","src": ".5.1/jquery.min.js"}],// 引入鼠标点击脚本["script", {"language": "javascript","type": "text/javascript","src": "/js/MouseClickEffect.js"}]
],

音乐插件

bgm-player (opens new window)，一款简洁易用的音乐插件，优势是好看（我用的这个）。

// 安装yarn add @vuepress-reco/vuepress-plugin-bgm-player -D
# or use npm
npm i @vuepress-reco/vuepress-plugin-bgm-player -D

['@vuepress-reco/vuepress-plugin-bgm-player',{audios: [// 本地文件示例{name: '장가갈 수 있을까',artist: '咖啡少年',url: '/bgm/1.mp3',cover: '/bgm/1.jpg'},// 网络文件示例{name: '강남역 4번 출구',artist: 'Plastic / Fallin` Dild',url: '.mp3',cover: '.jpg'},{name: '用胳膊当枕头',artist: '최낙타',url: '.mp3',cover: '.jpg'}] }]

music-bar (opens new window)，一个程序猿自己开发的插件，除本地，网络音频之外还支持从平台歌单获取链接(目前仅支持网易云音乐)

meting (opens new window)，在hexo上就一直用的插件，功能强大，配置丰富，目前应该最大强大的音乐插件了。

npm i vuepress-plugin-meting -D

1

<Meting server="netease"type="playlist"mid="2539599584":lrc-type="3"/>

趣味标题插件

主要在标签栏当时选中和离开页面时会有变化

npm i vuepress-plugin-dynamic-title -D

1

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

复制弹窗插件

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

1

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

live2d

npm install -D vuepress-plugin-helper-live2d

['vuepress-plugin-helper-live2d', {// 是否开启控制台日志打印(default: false)log: false,live2d: {// 是否启用(关闭请设置为false)(default: true)enable: true,// 模型名称(default: hibiki)>>>取值请参考：// : 'koharu',display: {position: "right", // 显示位置：left/right(default: 'right')width: 135, // 模型的长度(default: 135)height: 300, // 模型的高度(default: 300)hOffset: 65, //  水平偏移(default: 65)vOffset: 0, //  垂直偏移(default: 0)},mobile: {show: false // 是否在移动设备上显示(default: false)},react: {opacity: 0.8 // 模型透明度(default: 0.8)}}}]

拼音路由插件

npm i vuepress-plugin-permalink-pinyin --save-dev
# or
yarn add vuepress-plugin-permalink-pinyin --dev

plugins: {'permalink-pinyin': {lowercase: true, // Converted into lowercase, default: trueseparator: '-' // Separator of the slug, default: '-'}
}

评论插件Valine

请先登录或注册LeanCloud (opens new window), 进入控制台后点击左下角创建应用：

themeConfig: {valineConfig: {appId: '...',// your appIdappKey: '...', // your appKey}}

Vssue

themeConfig: {vssueConfig: {platform: 'github',owner: 'OWNER_OF_REPO',repo: 'NAME_OF_REPO',clientId: 'YOUR_CLIENT_ID',clientSecret: 'YOUR_CLIENT_SECRET',}}

options 详解：

  • title: 在这里设置当前页面的 Issue 标题
  • platform: 支持的代码托管平台
  • owner: 对应 repository 的拥有者帐号或者团队
  • repo: 用来存储评论的 repository
  • clientId: OAuth App 的 client id
  • clientSecret: OAuth App 的 client secret（只有在使用某些平台时需要）

本文标签： VuePress插件分享

版权声明：本文标题：VuePress插件分享 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700299486a386208.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。