清香雨工作室

我的个人博客

快速上手 →

简洁至上0

以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

Vue驱动

享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。

高性能

VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

高性能2

VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

高性能3

VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

export default{
    data(){
        return {
            msg:'Highlighted!'
        }
    }
}

1
2
3
4
5
6
7

vuepress默认支持PWA,配置方法如下： config.js 文件中增加

head: [ // 注入到当前页面的 HTML <head> 中的标签
  ['link', { rel: 'manifest', href: '/photo.jpg' }],
  ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],
],
serviceWorker: true // 是否开启 PWA

1
2
3
4
5

public 文件夹下新建 manifest.json 文件，添加

{
  "name": "张三",
  "short_name": "张三",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "张三的个人主页",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./photo.jpg",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

最后在 iPhone 的 safrai 浏览器中打开本网站，点击 +添加到主屏幕就能在桌面看到一个像原生 App 一样的图标（感觉自己写了一个 App 有木有 smile）

提示

this is a tip

注意

this is a tip

警告

this is a tip

🎉 💯 🎍 💝 🔥 💰