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小时内删除。