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
配置
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
配置
plugins:{
'@vuepress/back-to-top':true
}
}
last-updated
名称：@vuepress/plugin-last-updated
效果：⽂章的末尾会⾃动显⽰⽂章的更新⽇期
⾃带主题不⽤安装
配置
plugins:{
'@vuepress/last-updated':true
}
}
默认情况下，本插件为每个页⾯⽣成⼀个 13 位的时间戳，你可以传⼊⼀个 transformer 将其转换为你想要的任何格式。
例⼦：
const moment =require('moment');
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 :::
配置
plugins:{
'@vuepress/nprogress':false//默认为true，设置为false可以关闭进度条
}
}
全局搜索
名称：@vuepress/plugin-search
效果：在导航栏进⾏全局搜索
安装
git使用详解默认主题⾃带不⽤安装
yarn add -D @vuepress/plugin-search
# OR npm install -D @vuepress/plugin-search
配置
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
配置
'@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
配置
'@vuepress/pwa':{
serviceWorker:true,
updatePopup:{
message:"有新的内容更新",
buttonText:"刷新"
}
}
}
::: tip
为了让你的⽹站完全地兼容 PWA，你需要:
在 .vuepress/public 提供 Manifest 和 icons
在 .vuepress/config.js 添加正確的 head links(参见下⾯例⼦).
:
::
这是⼀个在VuePress中完全地兼容 PWA 的例⼦：
//head中href的根路径就是.vuepress下的public
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":"le/store/apps/details?id=cheeaun.hackerweb"
},
{
"platform":"play",
"url":"le/store/apps/details?id=cheeaun.hackerweb"
}
]
}
::: warning
需要本地按照vuepress
需要build后放到tomcat容器才能⽣效
更新内容必须重新build重新部署。重新加载页⾯就会出现刷新按钮提⽰。
只有localhost或者https的⽹站才能⽤PWA功能
:::
欢迎⼤家来博客了解更多内容：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。