搭建 VuePress 部落格，你可能會用到的一些外掛

冴羽發表於2022-02-16
Vue

前言

在 《一篇帶你用 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: "複製成功"
      }
   }]
]

效果類似於掘金的程式碼複製：

其他樣式的程式碼複製外掛還有：

  1. https://github.com/znicholasbrown/vuepress-plugin-code-copy
  2. 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' }
    }
  ]
]

效果截圖：

1.gif

其他音樂外掛：

  1. https://github.com/moefyit/vuepress-plugin-meting
  2. 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']
    }
  ]
]

效果截圖：

2.gif

其他看板娘外掛：

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

效果截圖：

3.gif

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

效果截圖：

4.gif

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

效果截圖：

5.gif

當你需要使用這種方式展示程式碼的時候，你需要在 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

更多外掛尋找

  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 搜 vuepress-plugin 關鍵字
  6. github 搜 vuepress-plugin 關鍵字

系列文章

部落格搭建系列，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。系列預計 20 篇左右，本篇為第 21 篇，全系列文章地址：https://github.com/mqyqingfen...

微信：「mqyqingfeng」，加冴羽好友，進一個神奇的前端學習交流群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章