一步步搭建 VuePress 及優化【外掛系列】

Yarn(包管理器) Git SSL協議 · 發表 2019-04-01 10:48:45

摘要：在之前為了搭建 VuePress 的文件，順帶製作了視訊教程，如今準備再次搭建一個 VuePress 的專案，一看自己的視訊竟然有五個小時，天吶，我只是需要過一遍而已，所以重新整理成文件吧，萬一將來又要用呢…… 當然，如果您覺得文字版不夠直觀，可以前往觀看視訊版：【☛ 視訊地址 ☚】，...

在之前為了搭建 VuePress 的文件，順帶製作了視訊教程，如今準備再次搭建一個 VuePress 的專案，一看自己的視訊竟然有五個小時，天吶，我只是需要過一遍而已，所以重新整理成文件吧，萬一將來又要用呢……

當然，如果您覺得文字版不夠直觀，可以前往觀看視訊版：【☛ 視訊地址 ☚】，當時錄製完本地測試後覺得聲音大小還可以，結果一套錄完了才發現聲音很小，所以推薦帶上耳機。

VuePress 文件示例

外掛列表

為了方便的統一管理 plugin，需要對 docs/.vuepress/config.js 進行配置：

// docs/.vuepress/config.js
const pluginConf = require('../../config/pluginConf.js');

module.exports = {
plugins: pluginConf,
}
複製程式碼

外掛的很多服務都需要對 head 標籤進行修改：

// docs/.vuepress/config.js
const headConf = require('../../config/headConf.js');

module.exports = {
head: headConf,
}
複製程式碼

之後就可以去修改 config/pluginConf.js 和 config/headConf.js 檔案了。

1. PWA

具體的 PWA 配置介紹可以看官方文件，對應的視訊（8:20）。

VuePress 的版本會導致使用方式不一致，此處僅介紹 1.x 版本：

安裝：

yarn add -D @vuepress/plugin-pwa@next
# OR npm install -D @vuepress/plugin-pwa@next
複製程式碼

使用：

module.exports = {
'@vuepress/pwa': {
serviceWorker: true,
updatePopup: {
message: "發現新內容可用.",
buttonText: "重新整理",
// 自定義彈窗
// popupComponent: 'MySWUpdatePopup',
}
},
};
複製程式碼

PWA NOTES：

serviceWorker 選項僅僅用來控制 service worker，為了讓你的網站完全地相容 PWA，你需要在 .vuepress/public 提供 Manifest 和 icons，更多細節，請參見 MDN docs about the Web App Manifest . 此外，只有您能夠使用 SSL 部署您的站點時才能啟用此功能，因為 service worker 只能在 HTTPs 的 URL 下注冊。

-- VuePress 官網

因為使用的 Github Pages 服務，所以即使使用 CNAME 後也依然保持 SSL 狀態。

Manifest 第六個視訊其實存在一些問題，在第九個視訊中解決了，利用 App Manifest Generator 直接生成即可。

參考示例：

{
"name": "飛躍高山與大洋的魚",
"short_name": "山與海",
"description": "飛躍高山與大洋的魚的文件",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"start_url": "index.html",
"icons": [
{
"src": "/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
複製程式碼

還需要獲取一下favicons 等：

// config/headConf.js

module.exports = [
['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
['link', { rel: 'icon', href: '/favicon-32x32.png' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#ffffff' }],
];
複製程式碼

2. 評論（待修改）

評論需要按照你的需求來：如果你希望所有評論可以在 Github 可見，那麼使用Gitalk 吧，正好有一篇新鮮出爐的文章；如果你想要所有非 Github 使用者也可以評論的話可以使用Valine，視訊地址。

這邊利用的其實主題的繼承，通過修改 VuePress 的預設主題來實現需要的功能，在製作視訊的時候官網還沒有對這個詳細的描述，這次更新發現有了新的介紹，由於時間關係及下一個專案不需要評論所以暫時延期處理：

首先修改預設主題下的 Page 元件（這意味著你不能隨便使用 npm install 了）：

<!-- node_modules/@vuepress/theme-default/components/Page.vue-->

</p>
</div>

<slot name="bottom"/>
<Valine></Valine>
</main>
</template>
複製程式碼

接著建立 Valine 元件，對於評論元件有以下要求：

README.md

<!-- docs/.vuepress/components/Valine.vue -->

<template>
<div class="ValineComment" v-if="comment">
<hr>
<span :id="page.path" class="leancloud-visitors" :data-flag-title="page.title">
<em class="post-meta-item-text">文章閱讀量 </em>
<i class="leancloud-visitors-count">1000000+</i>
</span>
<div id="vcomments"></div>
</div>
</template>

<script>
export default {
computed: {
comment: function () {
let { comment } = this.$frontmatter;
if (typeof comment === 'undefined') {
return true;
}
return comment;
},
page: function () {
let { path = '/', title = '首頁' } = this.$page;
return { path, title };
}
},
mounted() {
this.renderValine()
},
watch: {
'$route': {
handler: function (to, from) {
if (to.path !== from.path) {
this.$nextTick(() => {
this.renderValine();
})
}
}
}
},
methods: {
renderValine() {
if (typeof window !== 'undefined') {
this.window = window;
window.AV = require('leancloud-storage');
}
const secretKeyConf = require('../../../config/secretKeyConf.js');
const Valine = require('valine');
new Valine({
el: '#vcomments' ,
appId: secretKeyConf.appId,
appKey: secretKeyConf.appKey,
notify:false,
verify:false,
avatar:'retro',
path: window.location.pathname,
meta: ['nick','mail','link'],
pageSize: 10,
visitor: true,
placeholder: '歡迎留言...' 
});
}
}
}
</script>

<style lang="stylus" scoped>
.ValineComment {
padding 0 2rem;
}
.leancloud-visitors {
display inline-block
margin-bottom 1rem;
}
</style>
複製程式碼

3. Back-to-top

具體的 Back-to-top 配置介紹可以看官方文件，對應的視訊。

安裝：

yarn add -D @vuepress/plugin-back-to-top@next
# OR npm install -D @vuepress/plugin-back-to-top@next
複製程式碼

使用：

// config/pluginConf.js

module.exports = {
'@vuepress/back-to-top': true,
};
複製程式碼

效果圖：

4. google-analytics

具體的 google-analytics 配置介紹可以看官方文件，對應的視訊。

你需要去 Google 獲取對應的key 。

安裝：

yarn add -D @vuepress/plugin-google-analytics@next
# OR npm install -D @vuepress/plugin-google-analytics@next
複製程式碼

使用：

// config/pluginConf.js
// 此處引申出的隱私問題在最後有說明

const secretKeyConf = require('./secretKeyConf.js');

module.exports = {
'@vuepress/google-analytics': {
'ga': secretKeyConf.ga
}
};
複製程式碼

效果：

0. 隱藏私密資訊

按理說，會了 git 基本上都知道這個功能，然而依然有很多人把自己的私密資訊（如密碼）上傳到 Github 倉庫，對應視訊（29:00）。

主要是使用 .gitignore 檔案來忽略你要上傳的檔案，舉個例子：

// config/secretKeyConf.js

module.exports = secretKeyConf = {
appId: 'xxxxxx',
appKey: 'xxxxxx',
ga: 'xxxxxx',
googleSearchConsole: 'xxxxxx',
}
複製程式碼

將 config/secretKeyConf.js 追加到 .gitignore 檔案中

# secretKeyConf
secretKeyConf.js
複製程式碼