关于 VuePress 的插件

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

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

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

vuepress-plugin-code-copy​​

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

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

安装:

js 复制代码
npm i vuepress-plugin-code-copy

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

js 复制代码
module.exports = {
    .....
  themeConfig: {
    ....
  },

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

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

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

reading-progress​​

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

安装:

js 复制代码
npm i vuepress-plugin-reading-progress

在 config.js 里配置

js 复制代码
 plugins: [

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

  ]

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

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

cursor-effects​​

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

安装:

js 复制代码
npm i vuepress-plugin-cursor-effects

配置:

js 复制代码
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
      }
    ],
  ]

效果:

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

vuepress-plugin-dynamic-title

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

安装:

js 复制代码
npm i vuepress-plugin-dynamic-title

配置:

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


  ]

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

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

更多插件

还有很多插件,例如:

关于本博客的所有插件和插件的配置,你可以在 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

获取源码

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

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

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

  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

相关推荐
水w4 天前
VuePress v2 快速搭建属于自己的个人博客网站
开发语言·前端·vue·vuepress
寒山李白2 个月前
VuePress搭建文档网站/个人博客(详细配置)主题配置-侧边栏配置
前端·vue.js·vue·博客·vuepress·网站
张飞的猪3 个月前
一分钟搭建Ghost个人网站博客系统
博客搭建·ghost·个人网站搭建
bokequ3 个月前
站长为什么要搭建个人博客网站
博客搭建·博客网站·博客趣
星石传说4 个月前
vuepress搭建个人文档
项目·vuepress·个人文档
xrl20124 个月前
vuepress 配置文件分类管理
vuepress
PeterJXL4 个月前
自建搜索引擎-基于美丽云
搜索引擎·博客·博客搭建·vuepress·美丽云
PeterJXL5 个月前
VuePress 的更多配置
博客·博客搭建·vuepress
PeterJXL5 个月前
VuePress日常使用
vue.js·博客·博客搭建