vuepress入门详解（六）vuepress 实用插件

vuepress 实用插件

这些插件都是官方提供的，有些在我们实用默认主题的时候已经安装了，不需要再单独安装，有些插件需要我们单独安装。具体请看下面的介绍

默认主题自带的插件

• @vuepress/plugin-active-header-links
• @vuepress/plugin-nprogress
• @vuepress/plugin-search
• vuepress-plugin-container
• vuepress-plugin-smooth-scroll
• @vuepress/plugin-last-updated
• @vuepress/plugin-register-components

::: warning
默认主题自带的插件，可以直接配置使用，如果没有使用默认主题，需要自行下载安装。
:::

菜单高亮

名称：@vuepress/plugin-active-header-links
效果：页面滚动时自动激活侧边栏链接的插件，效果就是右边内容滚动的时候，看到哪里了，左侧菜单会自动高亮显示当前看的目录。

安装

自带主题不用安装

yarn add -D @vuepress/plugin-active-header-links
# OR npm install -D @vuepress/plugin-active-header-links

配置

module.exports = {
    plugins: {
        '@vuepress/active-header-links':{
            sidebarLinkSelector: '.sidebar-link',
            headerAnchorSelector: '.header-anchor'
        }
    }
}

back-to-top

名称：@vuepress/plugin-back-to-top
效果：文章看到下面的时候，点击一个图标会回到顶部

安装

自带主题不用安装

yarn add -D @vuepress/plugin-back-to-top
# OR npm install -D @vuepress/plugin-back-to-top

配置

module.exports = {
    plugins: {
        '@vuepress/back-to-top': true
    }
}

last-updated

名称：@vuepress/plugin-last-updated
效果：文章的末尾会自动显示文章的更新日期
自带主题不用安装

配置

module.exports = {
    plugins: {
        '@vuepress/last-updated': true
    }
}

默认情况下，本插件为每个页面生成一个 13 位的时间戳，你可以传入一个 transformer 将其转换为你想要的任何格式。
例子：

const moment = require('moment');

module.exports = {
  plugins: {
      '@vuepress/last-updated':{
        transformer: (timestamp, lang) => {
          // 不要忘了安装 moment
          const moment = require('moment')
          moment.locale(lang)
          return moment(timestamp).fromNow()
        }
      }
  }
}

::: warning
由于 lastUpdated 是基于 git 的, 所以你只能在一个基于 git 的项目中启用它。此外，由于使用的时间戳来自 git commit，因此它将
仅在给定页的第一次提交之后显示，并且仅在该页面后续提交更改时更新。（我的项目没有基于git，所以没有使用这个工程）
:::

进度条

名称：@vuepress/nprogress
效果：打开新页面的时候有进度条显示
::: tip
默认主题自带不用安装，默认配置是true，如果想要进度条功能，不用做任何操作就可以了。如果想关闭进度条功能，就需要设置为false
:::

配置

 module.exports = {
   plugins: {
        '@vuepress/nprogress':false //默认为true，设置为false可以关闭进度条
   }
 }

全局搜索

名称：@vuepress/plugin-search
效果：在导航栏进行全局搜索

安装

默认主题自带不用安装

yarn add -D @vuepress/plugin-search
# OR npm install -D @vuepress/plugin-search

配置

module.exports = {
  plugins: {
    '@vuepress/search': {
        search: true, //默认false
        searchMaxSuggestions: 10 // 默认是5
    }
  }
}

• search：开启搜索功能，默认false
• searchMaxSuggestions： 显示条数，最大是10，默认是5

Google analytics 插件

名称：@vuepress/plugin-google-analytics
效果：帮我们统计网站的流量和分析网站的一些功能
::: warning
要使用这个功能，必须有谷歌账号，然后创建一个Google analytics

如果你的项目正在使用 Google analytics 插件，推荐使用 Yarn 而不是 npm 来安装所有依赖。因为在这种情形下，npm 会生成错误的依赖树。
:::

安装

需要单独安装

yarn add -D @vuepress/plugin-google-analytics

配置

module.exports = {
    '@vuepress/google-analytics': {
        'ga': 'UA-166594741-1' // UA-00000000-0
    },
}

PWA

什么是PWA

PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。
主要特点：

• 离线可用
• 可以把web应用安装到桌面，手机端也可以安装到桌面

名称：@vuepress/plugin-pwa

效果：网页内容有更新的时候有刷新按钮。可以把网页保存到桌面，当一个app一样。具体看

安装

需要单独安装

yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa

配置

module.exports = {
     '@vuepress/pwa': {
            serviceWorker: true,
            updatePopup: {
                message: "有新的内容更新",
                buttonText: "刷新"
            }
        }
}

::: tip
为了让你的网站完全地兼容 PWA，你需要:

• 在 .vuepress/public 提供 Manifest 和 icons
• 在 .vuepress/config.js 添加正確的 head links(参见下面例子).
  :::

这是一个在VuePress中完全地兼容 PWA 的例子：

//head中href的根路径就是.vuepress下的public
module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ],
  plugins: {
    '@vuepress/pwa': {
           serviceWorker: true,
           updatePopup: {
               message: "有新的内容更新",
               buttonText: "刷新"
           }
       },
  }
}

之前测试用的manifest.json文件模板如下：

{
  "name": "牛魔王",
  "short_name": "牛魔王",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#3711f3",
  "description": "牛魔王个人主页",
  "theme_color": "red",
  "icons": [
    {
      "src": "./image/pwalogo.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

::: warning

• 需要本地按照vuepress
• 需要build后放到tomcat容器才能生效
• 更新内容必须重新build重新部署。重新加载页面就会出现刷新按钮提示。
• 只有localhost或者https的网站才能用PWA功能
  :::

🍉🍉🍉 欢迎大家来博客了解更多内容：java乐园 🍉🍉🍉

vuepress入门详解（一）vuepress介绍
vuepress入门详解（二）vuepress 快速搭建
vuepress入门详解（三） vuepress 目录结构
vuepress入门详解（四）vuepress 基本配置
vuepress入门详解（五）vuepress Markdown详解
vuepress入门详解（六）vuepress 实用插件
vuepress入门详解（七）vuepress如何添加评论功能