This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022.

preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

In order to enrich your site, you can use some existing plug-ins directly. In this article, we’ll talk about some common plug-ins.

1. Pop-up of the bulletin board

Plug-in address: vuepress-theme-reco.recoluan.com/views/plugi…

Installation:

yarn add @vuepress-reco/vuepress-plugin-bulletin-popover -D
Copy the code

Use:

plugins: [
  ['@vuepress-reco/vuepress-plugin-bulletin-popover', {
    width: '300px'./ / the default 260 px
    title: 'Message prompt'.body: [{type: 'title'.content: 'Add Yui Friends to the front end network'.style: 'text-aligin: center; '
      },
      {
        type: 'image'.src: 'https://cdn.jsdelivr.net/gh/mqyqingfeng/picture/IMG_3516.JPG'}].footer: [{type: 'button'.text: 'exceptional'.link: '/donate'}}]]]Copy the code

Effect screenshot:

Matters needing attention:

View the plugin source code can be learned that the bulletin board pop-up is using the sessionStorage control display frequency, in the local test, if closed, can be displayed by clearing the sessionStorage again.

// Directory: node_modules/@vuepress-reco/vuepress-plugin-bulletin-popover/bin/ bulletin.vue

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

2. Code replication

Plug-in address: www.npmjs.com/package/vue…

Installation:

yarn add vuepress-plugin-nuggets-style-copy -D
Copy the code

Use:

plugins: [
	["vuepress-plugin-nuggets-style-copy", {
      copyText: "Copy code".tip: {
          content: "Copy successful"}}]]Copy the code

The effect is similar to code copy for digging gold:

Other types of code copying plug-ins include:

  1. Github.com/znicholasbr…
  2. Snippetors. Making. IO/plugins/vue…

3. Add copyright information

Using vuepress-plugin-copyright, you can disable text copying or add copyright information while copying.

Plug-in address: vuepress-community.net lify. App/useful/plugins /…

Installation:

yarn add vuepress-plugin-copyright -D
Copy the code

Use:

plugins: [
  [
    'copyright',
    {
      authorName: '冴 feather'.// The selected text cannot be copied
      minLength: 30.// If the length exceeds 30 characters},]]Copy the code

When you copy more than 30 characters, it appears:

The copyright is owned by Hu Yu. Link: http://localhost:8080/learn-typescript/handbook/Basic.html JavaScript each value show different behaviors when they perform different operations. This sounds a bit abstract, so let's take an example. Suppose we had a variable named message and imagine what we could do:Copy the code

4. Background music

Plug-in address: vuepress-theme-reco.recoluan.com/views/plugi…

Installation:

yarn add @vuepress-reco/vuepress-plugin-bgm-player -D
Copy the code

Use:

plugins: [
  [
    '@vuepress-reco/vuepress-plugin-bgm-player',
    {
      audios: [{name: 'LOSER'.artist: 'Master Mizu'.url: 'https://www.ytmp3.cn/down/73654.mp3'.cover: 'https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200'}].// Whether to shrink by default
      autoShrink: true ,
      // Which mode to shrink to
      shrinkMode: 'float'.// Hover window style
      floatStyle: {bottom: '10px'.'z-index': '999999'}}]]Copy the code

Effect screenshot:

Other music plugins:

  1. Github.com/moefyit/vue…
  2. Juejin. Cn/post / 704594…

5. Kanban musume

Plug-in address: vuepress-theme-reco.recoluan.com/views/plugi…

Installation:

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

Use:

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

Effect screenshot:

Other Kanban niang plug-ins:

  1. Github.com/yanjun0501/…

6. Modify the cursor effect

Plugin address: github.com/moefyit/vue…

Installation:

yarn add vuepress-plugin-cursor-effects -D
Copy the code

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}]]Copy the code

Effect screenshot:

7. Dynamic title display

Plugin address: github.com/moefyit/vue…

Installation:

yarn add vuepress-plugin-cursor-effects -D
Copy the code

Use:

plugins: [
  ['dynamic-title', {
     showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae'.showText: 'Welcome back, guest officer.'.hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae'.hideText: 'Guest officer don't go ~'.recoverTime: 2000,}]]Copy the code

Effect screenshot:

8. Optimize your code presentation

Plug-in address: vuepress-theme-reco.recoluan.com/views/plugi…

Installation:

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

Use:

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

Effect screenshot:

When you need to display code in this way, you need to add the following to 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>
Copy the code

The @ represents an alias for the current project directory, the source code root, not docs or.vuepress

More plug-ins to find

  1. Github.com/vuepress/aw…
  2. vuepress-community.netlify.app/zh/
  3. Vuepress-theme-reco.recoluan.com/views/plugi…
  4. V1.vuepress.vuejs.org/zh/plugin/o…
  5. NPM Searches for the vuepress-plugin keyword
  6. Github search for vuepress-plugin

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 21st article in a series at github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.