插件的使用

搭建博客的过程中使用插件可以帮助我们很好的美化或优化代码。可以从官网上 (opens new window)使用也可以从插件商店 (opens new window)上使用。

简单介绍看板娘 (opens new window)这个插件是如何安装使用的，使用其他插件可以根据参数配置

第一步安装插件

  npm i @vuepress-reco/kan-ban-niang

第二部配置

在config.js配置

切记一定要在最外层配置，和themeConfig(主题)配置同级

Attributes参数配置

我的配置

  // 插件
  plugins: [
     // 看板娘
     [
      '@vuepress-reco/vuepress-plugin-kan-ban-niang',
      {
        theme: ['haruto'],
        clean: false,
        messages: {
          welcome: '欢迎来到我的博客',
          home: '心里的花，我想要带你回家。',
          theme: '好吧，希望你能喜欢我的其他小伙伴。',
          close: '你不喜欢我了吗？痴痴地望着你。',
        },
        messageStyle: { right: '68px', bottom: '290px' },
        width: 250,
        height: 320,
      },
    ],
    // 背景彩条
    [
      'ribbon',
      {
        size: 90, // width of the ribbon, default: 90
        opacity: 0.8, // opacity of the ribbon, default: 0.3
        zIndex: -1, // z-index property of the background, default: -1
      },
    ],
    // 可以复制代码
    [
      'vuepress-plugin-nuggets-style-copy',
      {
        copyText: '复制代码',
        tip: {
          content: '复制成功',
        },
      },
    ],
    // 添加著作权信息
    [
      'copyright',
      {
        authorName: '曦杨', // 选中的文字将无法被复制
        minLength: 30, // 如果长度超过  30 个字符
      },
    ],
    // 背景音乐
    [
      '@vuepress-reco/vuepress-plugin-bgm-player',
      {
        audios: [
          {
            name: '不浪漫罪名',
            artist: '王杰',
            cover:
              'https://y.gtimg.cn/music/photo_new/T002R300x300M00000358tyA4TxXpk.jpg',
            url: 'http://ws.stream.qqmusic.qq.com/C400002koa9T1SLwku.m4a?guid=296847286&vkey=B673E7BEDF9518162212268530DA01A46F36B5FE1B8FC45FCD96EE48A03E95E745D567351F3F16FB0972C36C588737B08A9B09B073020E94&uin=&fromtag=120032',
          },
          {
            name: '每当我',
            artist: '刘诗人',
            cover:
              'https://y.gtimg.cn/music/photo_new/T002R300x300M0000047cVhS1LhLO7.jpg',
            url: 'http://ws.stream.qqmusic.qq.com/C400001t7xa208YSVH.m4a?guid=180774535&vkey=98BDD03D19ED0DAF7BCC9D4B5C93E7F991BDEAA0EBF0BA1C34AC87AC374E92F9EB308C4724BAADA28DB850214EE284205B3AC3951EF4EB43&uin=&fromtag=120032',
          },
        ],
        // 是否默认缩小
        autoShrink: true,
        // 缩小时缩为哪种模式
        shrinkMode: 'float',
        // 悬浮窗样式
        floatStyle: { bottom: '10px', 'z-index': '999999' },
      },
    ],
    //动态标题展示
    [
      '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,
      },
    ],
  ],