关于 VuePress 的插件

插件就好比第三方功能,例如增加一个阅读进度条、增加光标效果等。VuePress 官网对插件的介绍:插件通常会为 VuePress 添加全局功能。

这里简单介绍几个本站用的插件吧!

插件就好比第三方功能,例如增加一个阅读进度条、增加光标效果等,VuePress 官网对插件的介绍:插件通常会为 VuePress 添加全局功能。

vuepress-plugin-code-copy​​

vuepress-plugin-code-copy ​插件用于给代码块增加复制按钮。

例如我们在 Markdown 文档里加一个代码块,非常简单,没有复制按钮:

安装:

npm i vuepress-plugin-code-copy

然后修改 config.js(这里忽略其他配置):

module.exports = {.....themeConfig: {....},plugins: [['vuepress-plugin-code-copy', true],  //复制代码块的插件]
}

运行后效果:当鼠标悬浮到代码块上,就会出现一个图标,点击该图标即可复制

官网:https://github.com/znicholasbrown/vuepress-plugin-code-copy

reading-progress​​

reading-progress ​是一个显示阅读进度条的插件。

安装:

npm i vuepress-plugin-reading-progress

在 config.js 里配置

 plugins: [['vuepress-plugin-code-copy', true],  //复制代码块的插件'reading-progress',]

效果:在页面顶部会有一个蓝色的进度条

官网:https://github.com/tolking/vuepress-plugin-reading-progress

cursor-effects​​

修改光标效果的插件。简单来说就是在鼠标单击的时候,加个烟花效果

安装:

npm i vuepress-plugin-cursor-effects

配置:

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

效果:

在这里插入图片描述

更堵配置参考官网:https://github.com/moefyit/vuepress-plugin-cursor-effects

vuepress-plugin-dynamic-title

当用户离开和进入你的网站时,浏览器标签页的图标会变化。

安装:

npm i vuepress-plugin-dynamic-title

配置:

  plugins: [//网站动态标题['dynamic-title', {// showIcon: '',showText: '欢迎回来  O(∩_∩)O~~',// hideIcon: '',hideText: '等等,你别走啊 ::>_<::',recoverTime: 2000,}],]

效果:当用户切换标签页时,网站标题会变化

官网:https://github.com/moefyit/vuepress-plugin-dynamic-title

更多插件

还有很多插件,例如:

  • 看板娘:VuePress 集成 Live2D 看板娘 预览:live2d 模型包展示,非常适合我这种一看到妹子就要调戏两下的人
  • vuepress-plugin-live2d​:也是一个看板娘,由于可能要科学上网才能显示(图片在 GitHub 上),因此本博客没有采用。
  • 彩虹带背景:https://github.com/moefyit/vuepress-plugin-ribbon
  • 禁止复制:vuepress-plugin-copyright
  • 另一个代码复制插件:https://github.com/vuepress/vuepress-plugin-copyright
  • go-top​ 回到顶部按钮–猫爪形状,可能会和主题自带的冲突,按需使用
  • 你可以在 https://github.com/vuepressjs/awesome-vuepress#plugins 中找到更多的插件。

关于本博客的所有插件和插件的配置,你可以在 Gitee 或 GitHub 上看 package.json:

https://gitee.com/peterjxl/vuepressblog/blob/master/package.json

https://gitee.com/peterjxl/vuepressblog/blob/master/docs/.vuepress/config/plugins.ts

获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee 和 GitHub 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​ (也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn
  4. 切换分支:git switch -c VuePressDemo4Plugin origin/VuePressDemo4Plugin
  5. 安装依赖:npm i
  6. 运行博客:npm run docs:dev

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/39690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何实现在短信链接中直接打开微信小程序

你是否有过这样的体验&#xff0c;收到一条短信&#xff0c;里面有一个链接&#xff0c;点击后就直接打开了微信&#xff0c;并且进入了一个小程序。这种神奇的功能是如何实现的呢&#xff1f;本文将为你揭晓答案。 利用微信URL Link 接口生成链接 要实现短信中的链接直接打开…

VSG虚拟同步发电机simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 VSG虚拟同步发电机simulink建模与仿真&#xff0c;虚拟同步发电机&#xff08;Virtual Synchronous Generator, VSG&#xff09;技术是电力电子领域的一项重要创新&#xff0c…

Golang 依赖注入设计哲学|12.6K 的依赖注入库 wire

一、前言 线上项目往往依赖非常多的具备特定能力的资源&#xff0c;如&#xff1a;DB、MQ、各种中间件&#xff0c;以及随着项目业务的复杂化&#xff0c;单一项目内&#xff0c;业务模块也逐渐增多&#xff0c;如何高效、整洁管理各种资源十分重要。 本文从“术”层面&#…

爆火AI惨遭阉割,1600万美国年轻人集体「失恋」? Character AI被爆资金断裂,00后炸了

【新智元导读】最近&#xff0c;在美国00后中爆火的Character AI&#xff0c;竟然把聊天机器人对话模型给「阉割」了&#xff1f;愤怒的年轻人们冲进社区&#xff0c;抱怨的声浪快要掀翻天了&#xff01;而这背后&#xff0c;似乎还有谷歌或Meta的授意。 美国当今最火爆的社交…

看个病都有大模型陪诊了!上海市第一人民医院主导,一手体验在此

现在看个病&#xff0c;都有大模型全程陪诊了。 这是上海市第一人民医院此时此时正在发生的事情—— AI就医助理&#xff0c;无需下载APP&#xff0c;打开支付宝就能用。 从诊前预约挂号、在线取号&#xff0c;到诊中院内导航、排队叫号、扫码支付&#xff0c;再到诊后的报告…

基于SpringBoot高校体育运动会管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

KVB交易平台 :市场迎来新热潮!铜价会持续上涨吗?

近期&#xff0c;全球铜价出现明显上涨趋势。韩国光阳LME仓库的铜库存显著下降&#xff0c;市场对即时需求的增加作出了积极反应。供应端的紧张和需求端的复苏共同推动了铜价的上涨。 KVB外汇 分析师们对未来铜价保持谨慎乐观态度&#xff0c;认为长期内铜价有望保持稳定甚至进…

【面试系列】UI设计师高频面试题及详细解答

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来&#xff1a;详细讲解AIGC的概念、核心技术、…

守望先锋2延迟高、卡顿、丢包的解决方法一览

守望先锋2/ow2是一款在全球范围内拥有超高热度的特殊游戏&#xff0c;因为该作在一定程度上是FPS游戏融合了MOBA元素&#xff0c;守望先锋2中的每一位英雄之间都有克制因素&#xff0c;使其技能点形成闭环逻辑&#xff0c;提升了游戏的可重复游戏性和趣味性。不过很多玩家在游玩…

三菱A系列网络连接

寄存器名 读写 寄存器类型 变量类型 寄存器范围 说明 X##1 R/W BIT I/O离散 0&#xff0d;7FF Input Y##1 R/W BIT I/O离散 0&#xff0d;7FF Output M##1 R/W BIT I/O离散 0&#xff0d;9255 Internal relay B##1 R/W BIT I/O离散 0&#xff0d;3FF Link relay F##1 R/W BIT I…

电子邮件OTP验证身份认证接口API服务商比较

电子邮件OTP验证身份认证接口API服务商如何正确选择&#xff1f; 电子邮件OTP验证是一种广泛应用且安全的身份认证方式。AokSend将比较几家主要的电子邮件OTP验证身份认证接口API服务商&#xff0c;帮助企业选择合适的解决方案。 电子邮件OTP&#xff1a;验证优势 可以为用户…

【硬件模块】SGP30气体传感器

SGP30 这是SGP30官方文档里开头的介绍&#xff0c;简单来说就是SGP30是一个数字多像素气体传感器&#xff0c;然后具有长期稳定性和低漂移。 这些我们都不用管&#xff0c;我们只需要知道SGP30是通过I2C来通信的&#xff0c;并且可以采集的数据有CO2和TVOC的含量。TVOC是“To…

RPM包管理-rpm命令管理

1.RPM包命令原则 所有的rpm包都在光盘中 例&#xff1a;httpd-2.2.15-15.e16.centos.1.i686.rpm httpd 软件包名 2.2.15 软件版本 15 软件发布的次数 e16.centos 适合的Linux平台 i686 适合的硬件平台…

【Git 学习笔记】1.3 Git 的三个阶段

1.3 Git 的三个阶段 由于远程代码库后续存在新的提交&#xff0c;因此实操过程中的结果与书中并不完全一致。根据书中 HEAD 指向的 SHA-1&#xff1a;34acc370b4d6ae53f051255680feaefaf7f7850d&#xff0c;可通过以下命令切换到对应版本&#xff0c;并新建一个 newdemo 分支来…

Linux——shell原理和文件权限

1.shell原理 在我们使用云服务器时&#xff0c;需要通过shell进行使用&#xff0c;而shell则是一种外壳程序。 我们提到过&#xff0c;大部分的指令实际上就是文件&#xff0c;当用户需要执行某种功能时&#xff0c;由于用户不擅长和操作系统直接交互&#xff08;操作复杂&…

度量监控平台,研发的助手

背景 指标度量遥测数据准确、多维度和可观测统一管控台入口(SLS/ARMS日志查询&#xff0c;OpenTelemetry/SkyWalking&#xff0c;Grafana)Trace、Metric、Log (链路、指标、日志) 目标 快速排障&#xff0c;解决问题的助手整体联动&#xff0c;降低使用成本梳理排查路径&…

「PAI-ArtLab100 AIGC」设计普惠计划发布!与 100+ 高校共同探索 AIGC 教育新路径

随着人工智能技术的迅猛发展所带来的全新设计理念和工具&#xff0c;设计艺术教育正面临一场变革。AIGC&#xff08;AI生成内容&#xff09;技术不仅推动了设计领域的技术革新&#xff0c;还在教育模式、学习方法和创意实践展开全新的重塑。 6月28日&#xff0c;D20全球设计院长…

视频批量剪辑一键垂直翻转,轻松转换格式为mov,视频制作从此事半功倍!

在视频制作的海洋中&#xff0c;我们时常需要面对各种挑战&#xff0c;其中之一就是视频的翻转与调整。不论是出于创意需求还是格式转换的需要&#xff0c;视频翻转都是一个不可或缺的功能。今天&#xff0c;我要向大家介绍一款真正的批量视频翻转神器——视频剪辑高手&#xf…

如何选择易用性高的项目管理软件?

随着项目管理在各行各业的广泛应用&#xff0c;选择一款易用性高的项目管理软件变得越来越重要。易用性高的软件可以帮助企业提高工作效率&#xff0c;降低管理成本&#xff0c;同时还能提升团队之间的协作能力。那么&#xff0c;如何选择一款易用性高的项目管理软件呢&#xf…

港股通权限开通要求,交易时间与申报方式,港股通手续费详情

港股通权限开通要求 已开通上海或深圳A股证券账户 在申请权限开通前20个交易日内&#xff0c;证券账户以及资金账户&#xff08;包括证券市值和资金可用余额&#xff0c;含融资融券净资产&#xff09;的日均资产不低于人民币50万元。 投资者需要完成风险测评问卷&#xff0c;且…