CMINI777

# VuePress使用插件

TIP

在希望中欢呼，在苦难中坚持

Rejoicing in Hope, Patient in Tribulation

# 一、 PWA插件

# 1. 安装

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

# 2. 部署一个 manifest

head: [
  ['link', {rel: 'manifest', href: '/js/manifest.json'}]
]
1
2
3

manifest 范例

{
  "name": "CMINI777",
  "short_name": "CMINI777",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "人皆可以为尧舜",
  "icons": [{
    "src": "/img/logo.png",
    "sizes": "149x149",
    "type": "image/png"
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3. 使用

更新弹出窗口

 











 
 
 
 
 
 
 
 
 


// - 是要删除的代码，高亮行是需要增加的
module.exports = {
- serviceWorker: true,
  themeConfig: {
-   serviceWorker: {
-     updatePopup: {
-        message: "New content is available.",
-        buttonText: "Refresh"
-     }
-   }
  },

  plugins: {
    '@vuepress/pwa': {
      serviceWorker: true,
      updatePopup: {
        message: "有新的内容",
        buttonText: "更新"
      }
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

该功能并未实现

service-worker.js在build后并未生成

# 二、 回到顶部插件

# 1. 安装

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

# 2. 使用

module.exports = {
  plugins: {
    '@vuepress/back-to-top': true
  }
}
1
2
3
4
5

该功能并未实现

back-to-top不生效

注意：.io 的项目只有在 master 分支 pages 才可以生效

← 有点追求不好吗？ →