关于javascript:搭建-VuePress-博客你可能会用到的一些插件

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。

为了丰盛站点的性能，咱们能够间接应用一些现有的插件，本篇咱们讲讲一些罕用的插件。

1. 公告栏弹窗

插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/bulletinPopover.html

装置：

yarn add @vuepress-reco/vuepress-plugin-bulletin-popover -D

应用：

plugins: [
  ['@vuepress-reco/vuepress-plugin-bulletin-popover', {
    width: '300px', // 默认 260px
    title: '音讯提醒',
    body: [
      {
        type: 'title',
        content: '增加冴羽好友入前端交换群',
        style: 'text-aligin: center;'
      },
      {
        type: 'image',
        src: 'https://cdn.jsdelivr.net/gh/mqyqingfeng/picture/IMG_3516.JPG'
      }
    ],
    footer: [
      {
        type: 'button',
        text: '打赏',
        link: '/donate'
      } 
    ]
  }]
]

成果截图：

注意事项：

查看插件源码能够得悉，公告栏弹窗是应用 sessionStorage 管制的展现频次，在本地测试时，如果敞开了，能够通过革除 sessionStorage 再次展现进去。

// 所在目录：node_modules/@vuepress-reco/vuepress-plugin-bulletin-popover/bin/Bulletin.vue

mounted () {
    const closeNote = sessionStorage.getItem('closeNote')
    this.visible = closeNote !== 'true'
}

2. 代码复制

插件地址：https://www.npmjs.com/package/vuepress-plugin-nuggets-style-copy

装置：

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

应用：

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

成果相似于掘金的代码复制：

其余款式的代码复制插件还有：

https://github.com/znicholasbrown/vuepress-plugin-code-copy
https://snippetors.github.io/plugins/vuepress-plugin-code-copy.html

3. 增加著作权信息

应用 vuepress-plugin-copyright能够禁用文字复制或者在复制时增加著作权信息。

插件地址：https://vuepress-community.netlify.app/zh/plugins/copyright

装置：

yarn add vuepress-plugin-copyright -D

应用：

plugins: [
  [
    'copyright',
    {
      authorName: '冴羽', // 选中的文字将无奈被复制
      minLength: 30, // 如果长度超过  30 个字符
    },
  ]
]

当你复制超过 30 个字符的时候，就会呈现：

著作权归冴羽所有。
链接：http://localhost:8080/learn-typescript/handbook/Basic.html

JavaScript 的每个值执行不同的操作时会有不同的行为。这听起来有点形象，所以让咱们举个例子，假如咱们有一个名为 message 的变量，试想咱们能够做哪些操作：

4. 背景音乐

插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/bgmPlayer.html

装置：

yarn add @vuepress-reco/vuepress-plugin-bgm-player -D

应用：

plugins: [
  [
    '@vuepress-reco/vuepress-plugin-bgm-player',
    {
      audios: [
        {
          name: 'LOSER',
          artist: '米津玄師',
          url: 'https://www.ytmp3.cn/down/73654.mp3',
          cover: 'https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200'
        }
      ] ,
      // 是否默认放大
      autoShrink: true ,
      // 放大时缩为哪种模式
      shrinkMode: 'float',
      // 悬浮窗款式
      floatStyle:{ bottom: '10px', 'z-index': '999999' }
    }
  ]
]

成果截图：

其余音乐插件：

https://github.com/moefyit/vuepress-plugin-meting
https://juejin.cn/post/7045944008190722079

5. 看板娘

插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html

装置：

yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang -D

应用：

plugins: [
  [
    '@vuepress-reco/vuepress-plugin-kan-ban-niang',
    {
      theme: ['blackCat', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'miku', 'z16']
    }
  ]
]

成果截图：

其余看板娘插件：

https://github.com/yanjun0501/vuepress-plugin-live2d

6. 批改光标成果

插件地址：https://github.com/moefyit/vuepress-plugin-cursor-effects

装置：

yarn add vuepress-plugin-cursor-effects -D

应用：

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
    }]
]

成果截图：

7. 动静题目展现

插件地址：https://github.com/moefyit/vuepress-plugin-dynamic-title

装置：

yarn add vuepress-plugin-cursor-effects -D

应用：

plugins: [
  ['dynamic-title', {
     showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
     showText: '客官欢送回来~',
     hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
     hideText: '客官不要走嘛~',
     recoverTime: 2000,
    }]
]

成果截图：

8. 优化代码展现

插件地址：https://vuepress-theme-reco.recoluan.com/views/plugins/extractCode.html

装置：

yarn add @vuepress-reco/vuepress-plugin-extract-code -D

应用：

plugins: [
    '@vuepress-reco/extract-code'
  ]

成果截图：

当你须要应用这种形式展现代码的时候，你须要在 md 文件中增加：

<RecoDemo :collapse="true">
  <template slot="code-bash">
    <<< @/docs/handbook/demo/index.sh
  </template>
  <template slot="code-js">
    <<< @/docs/handbook/demo/index.js
  </template>
  <img src="./demo/index.gif" slot="demo" />
</RecoDemo>

其中的@示意以后我的项目目录的别名，即源码的根目录，而非docs或者 .vuepress

系列文章

博客搭建系列，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。系列预计 20 篇左右，本篇为第 21 篇，全系列文章地址：https://github.com/mqyqingfen…

微信：「mqyqingfeng」，加冴羽好友，进一个神奇的前端学习交换群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。

关于javascript:搭建-VuePress-博客你可能会用到的一些插件

前言

1. 公告栏弹窗

2. 代码复制

3. 增加著作权信息

4. 背景音乐

5. 看板娘

6. 批改光标成果

7. 动静题目展现

8. 优化代码展现

更多插件寻找

系列文章

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:搭建-VuePress-博客你可能会用到的一些插件

前言

1. 公告栏弹窗

2. 代码复制

3. 增加著作权信息

4. 背景音乐

5. 看板娘

6. 批改光标成果

7. 动静题目展现

8. 优化代码展现

更多插件寻找

系列文章

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复