From 21f0c227b49f0b617ce8492f13074ffcecd99355 Mon Sep 17 00:00:00 2001
From: MikyMing <18988774300@163.com>
Date: Wed, 22 Apr 2020 13:02:37 +0800
Subject: [PATCH] docs: Add demo link & modify the doc of pwa (#57)
---
README.md | 1 +
README_en-US.md | 1 +
docs/zh-CN/advanced/third-part.md | 74 ++++++++++++++++++++-----------
3 files changed, 50 insertions(+), 26 deletions(-)
diff --git a/README.md b/README.md
index cb69de9..e2144b5 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@
- [峡州仙士之页](https://cjh0613.gitee.io/blog/)
- [Cheeks's Blog](http://www.cheeks.top/)
- [lingan1996's Blog](https://www.lingan1996.top)
+- [MikyMing's Blog](https://mikyming.online/)
如果你正在使用 Stun 主题，并希望展示在这里，你只需修改 [README](https://github.com/liuyib/hexo-theme-stun/edit/master/README.md) 填入你的网站，然后提交 PR 即可。
diff --git a/README_en-US.md b/README_en-US.md
index 89bf6c5..653df20 100644
--- a/README_en-US.md
+++ b/README_en-US.md
@@ -40,6 +40,7 @@
- [峡州仙士之页](https://cjh0613.gitee.io/blog/)
- [Cheeks's Blog](http://www.cheeks.top/)
- [lingan1996's Blog](https://www.lingan1996.top)
+- [MikyMing's Blog](https://mikyming.online/)
If you are using the `Stun` theme and want to show it here, you just need to modify the [README_en-US](https://github.com/liuyib/hexo-theme-stun/edit/master/README_en-US.md) to fill in your website and submit PR.
diff --git a/docs/zh-CN/advanced/third-part.md b/docs/zh-CN/advanced/third-part.md
index 2b8b01d..2b6d120 100644
--- a/docs/zh-CN/advanced/third-part.md
+++ b/docs/zh-CN/advanced/third-part.md
@@ -2,11 +2,15 @@
## PWA
-如果你想要使网站支持 PWA 特性，需要安装插件 [hexo-pwa](https://github.com/lavas-project/hexo-pwa)，该插件可以使你的网站具有以下功能：
+如果你想要使网站支持 PWA 特性，需要安装插件 [hexo-pwa](https://github.com/lavas-project/hexo-pwa)。该插件可以使你的网站具有以下功能：
- [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) - 用户可以将您的站点添加到桌面上。
- [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) - 让您的网站中，已访问过的页面离线可用。
+::: warning
+您的博客必须全站支持 HTTPS，这是使用 PWA 的前提条件。
+:::
+
使用步骤如下：
1. 安装插件
@@ -51,38 +55,34 @@
priority: 5
```
- 有关插件的详尽信息，请查看插件的[文档](https://github.com/lavas-project/hexo-pwa)。
+ 上面的配置中，引用了 `manifest.json` 和 `sw.js` 文件。其中 `sw.js` 文件是 `hexo-pwa` 插件自动生成的。`manifest.json` 文件需要用户手动创建。
-3. 修改主题配置文件
+3. 创建 `manifest.json` 文件
- ``` yaml
- pwa:
- enable: true
- # manifest 文件的路径
- manifest: /manifest.json
- # 浏览器导航栏的背景颜色
- theme_color: "#54bcff"
- ```
-
-4. 创建 `manifest.json` 文件
-
- 你可以通过 [Web App Manifest](https://app-manifest.firebaseapp.com/) 网站来快速生成 `manifest.json` 文件。`manifest.json` 文件的内容如下：
+ 你可以借助 [Web App Manifest](https://app-manifest.firebaseapp.com/) 网站来快速生成 `manifest.json` 文件，生成的文件内容如下所示：
``` json
{
- "name": "xxx", // 应用全称。例如：liuyib's blog
- "short_name": "xxx", // 应用简称。例如：liuyib
- "theme_color": "#ffffff", // 匹配浏览器的地址栏颜色
- "background_color": "#ffffff", // 加载应用时的背景色
- "display": "standalone", // 首选显示模式。其他选项有：fullscreen, minimal-ui, browser
+ // 应用全称。例如：liuyib's blog
+ "name": "xxx",
+ // 应用简称。例如：liuyib
+ "short_name": "xxx",
+ // 匹配浏览器的地址栏颜色
+ "theme_color": "#ffffff",
+ // 加载应用时的背景色
+ "background_color": "#ffffff",
+ // 首选显示模式。其他选项有：fullscreen, minimal-ui, browser
+ "display": "standalone",
"scope": "/",
"start_url": "/",
- // 该数组指定图标参数，用来适配不同设备（格式为 png，至少包含一个 192px*192px 的图标）
+ // 指定图标参数，用来适配不同设备（格式为 png，至少包含一个 192*192px 的图标）
"icons": [
{
- // 图标文件的路径，需在 source/ 目录下自行创建所需的文件或文件夹
+ // 图片路径（你需要将图片放在网站根目录中的 source 目录下）
"src": "images/icons/favicon-48x48.png",
+ // 图片尺寸
"sizes": "48x48",
+ // 图片类型
"type": "image/png"
},
{
@@ -106,15 +106,37 @@
"type": "image/png"
}
],
- "splash_pages": null // 配置自定义启动动画。
+ // 配置自定义启动动画
+ "splash_pages": null
}
```
+ 你需要将 `manifest.json` 文件放在 Hexo 根目录下的 source 文件夹中。
+
+4. 修改主题配置文件
+
+ ```yaml
+ pwa:
+ enable: true
+ # manifest 文件的路径
+ manifest: /manifest.json
+ # 浏览器导航栏的背景颜色（只在安装的 PWA 离线应用中生效）
+ theme_color: '#ffffff'
+ ```
+
5. 重启 Hexo 服务器
- ``` bash
- $ hexo clean && hexo s
- ```
+ ```bash
+ $ hexo clean && hexo s
+ ```
+
+::: warning
+如果你不想使用 `hexo-pwa` 插件，那么你需要自己编写 `sw.js` 文件的相关代码，并在主题的模板文件（`.pug`）中，所有的页面里引入你的 `sw.js` 文件。`manifest.json` 文件的创建方法和放置位置同上。
+:::
+
+::: danger
+`hexo-pwa` 插件的 `0.1.3` 及以下的版本，不兼容 Hexo `4.2.0` 版本。因此如果你使用了该插件，并且 Hexo 版本升级到了 `v4.2.0`，会遇到启动 Hexo 服务时报错的问题。目前 `hexo-pwa` 插件的作者正在积极解决该问题。
+:::
## 启用 Quicklink
--
GitLab