To build a VuePress blog, some plugins you may use

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

In order to enrich the functions of the site, we can directly use some existing plug-ins. In this article, we will talk about some commonly used plug-ins.

1. Bulletin board pop-up window

Plugin address: https://vuepress-theme-reco.recoluan.com/views/plugins/bulletinPopover.html

Install:

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

use:

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

Screenshot of the effect:

Precautions:

Looking at the plug-in source code, you can see that the bulletin bar pop-up window is displayed with the frequency controlled by sessionStorage . During local testing, if it is closed, it can be displayed again by clearing sessionStorage .

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

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

2. Code Copy

Plugin address: https://www.npmjs.com/package/vuepress-plugin-nuggets-style-copy

Install:

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

use:

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

The effect is similar to the code copy of Nuggets:

Other styles of code duplication plugins include:

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

3. Add copyright information

Use vuepress-plugin-copyright to disable text copying or add copyright information when copying.

Plugin address: https://vuepress-community.netlify.app/zh/plugins/copyright

Install:

yarn add vuepress-plugin-copyright -D

use:

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

When you copy more than 30 characters, it will appear:

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

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

4. Background music

Plugin address: https://vuepress-theme-reco.recoluan.com/views/plugins/bgmPlayer.html

Install:

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

use:

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

Screenshot of the effect:

Other music plugins:

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

5. Kanban Girl

Plugin address: https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html

Install:

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

use:

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

Screenshot of the effect:

Other Kanbangirl plugins:

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

6. Modify the cursor effect

Plugin address: https://github.com/moefyit/vuepress-plugin-cursor-effects

Install:

yarn add vuepress-plugin-cursor-effects -D

use:

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

Screenshot of the effect:

7. Dynamic title display

Plugin address: https://github.com/moefyit/vuepress-plugin-dynamic-title

Install:

yarn add vuepress-plugin-cursor-effects -D

use:

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

Screenshot of the effect:

8. Optimize code display

Plugin address: https://vuepress-theme-reco.recoluan.com/views/plugins/extractCode.html

Install:

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

use:

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

Screenshot of the effect:

When you need to display the code in this way, you need to add in the md file:

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

Among them, @ represents the alias of the current project directory, that is, the root directory of the source code, not docs or .vuepress

Find more plugins

1. https://github.com/vuepress/awesome-vuepress
2. https://vuepress-community.netlify.app/zh/
3. https://vuepress-theme-reco.recoluan.com/views/plugins/
4. https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-active-header-links.html
5. npm search vuepress-plugin keywords
6. github search vuepress-plugin keywords

series of articles

Blog building series, explain how to use VuePress to build, optimize blog, and deploy to GitHub, Gitee, private server and other platforms. The series is expected to be about 20 articles, this article is the 21st article, the address of the whole series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add Yu Yu's friends, and join a magical front-end learning and exchange group.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.