vuepress（二）插件安装推荐

文章目录

• vuepress（二）插件安装推荐
• • 前言
  • 系列文章
  • 二、插件
  • • 1.back-to-top
    • 2.last-updated
    • 3.看板娘
    • 4.樱花插件
    • 5.代码复制
    • 6.添加著作权信息
    • 7.动态标题展示
    • 8.我的所有插件配置

前言

这里是一个关于vuepress搭建的系列教程，里面也包括了我自己对博客的一些优化和魔改

我的博客👉：一枚前端程序媛的blog

我的面筋小站👉：面筋小站

面筋小站是使用vuepress默认主题开发
我的博客使用gungnir主题开发

我在最开始时用的是 Hexo+butterfly搭建博客，但是后来发现，hexo的界面虽然很好看，但是自认为vuepress的文章分类更清楚，更适合于当做自己的笔记库（而本人就是想搭建一个自己的知识库）。

系列文章

vuepress博客搭建（一）导航栏与侧边栏

vuepress（二）插件安装推荐

vuepress（三）博客页面自定义布局

vuepress（四）给vuepress加入githubcalendar贡献日历

vuepress（五）部署到github.io

二、插件

插件配置在 config.js 文件中

"plugins"： [
	// 插件的配置
]

每个插件都是一个数组进行配置

1.back-to-top

文章看到下面的时候，点击一个图标会回到顶部

下载：yarn add -D @vuepress/plugin-back-to-top

"plugins"： [
	['@vuepress/back-to-top'],
]

2.last-updated

文章的末尾会自动显示文章的更新日期

这里的最后更新时间以通过git提交的时间为准，在本地修改文章，时间并不会改变

"plugins"： [
	['@vuepress/last-updated'],
]

3.看板娘

下载命令：

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

如果使用的是yarn，yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang -D

• 官方文档👉： kanbanniang

我的看板娘配置

    ['@vuepress-reco/vuepress-plugin-kan-ban-niang',{
      theme: ["blackCat"],
      clean: false,
      info: 'https://github.com/mengqiuleo',
      messages: {
        welcome: '',
        home: '心里的花，我想要带你回家',
        theme: '好吧，希望你能喜欢我的其他小伙伴。',
        close: '再见哦'
      }
    }],

4.樱花插件

只要把这个放进 config的plugins中就可以了

// 只要把这个放进 config的plugins中就可以了 
["sakura", {
    num: 20,  // 默认数量
    show: true, //  是否显示
    zIndex: -1,   // 层级
    img: {
      replace: false,  // false 默认图 true 换图 需要填写httpUrl地址
      httpUrl: '...'     // 绝对路径
    }     
}]

5.代码复制

下载：

yarn add vuepress-plugin-nuggets-style-copy -D

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

6.添加著作权信息

下载：npm install vuepress-plugin-copyright -D

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

7.动态标题展示

下载：npm i vuepress-plugin-dynamic-title -D

    ['dynamic-title',{
        // showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
        showText: '(/≧▽≦/)欢迎回来~',
        // hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
        hideText: '(●—●)bye bye~',
        recoverTime: 1000,
    }]

8.我的所有插件配置

  "plugins": [
    ['@vuepress/back-to-top'],
    ['@vuepress/last-updated'],
    ['@vuepress-reco/vuepress-plugin-kan-ban-niang',{
      theme: ["blackCat"],
      clean: false,
      info: 'https://github.com/mengqiuleo',
      messages: {
        welcome: '',
        home: '心里的花，我想要带你回家',
        theme: '好吧，希望你能喜欢我的其他小伙伴。',
        close: '再见哦'
      }
    }],
    ["sakura", {
      num: 30,  // 默认数量
      show: true, //  是否显示
      zIndex: -1,   // 层级
      img: {
        replace: false,  // false 默认图 true 换图 需要填写httpUrl地址
        httpUrl: '...'     // 绝对路径
      }     
    }],
    ["vuepress-plugin-nuggets-style-copy", {
      copyText: "复制代码",
      tip: {
          content: "复制成功"
      }
   }],
    ['copyright',{
        authorName: '小飞侠Pan', // 选中的文字将无法被复制
        minLength: 30, // 如果长度超过  30 个字符
    }],
    ['dynamic-title',{
        // showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
        showText: '(/≧▽≦/)欢迎回来~',
        // hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
        hideText: '(●—●)bye bye~',
        recoverTime: 1000,
    }]
  ]