&00.上文回顧
在上文 VuePress博客搭建筆記(一)簡單上手
中,我簡單闡述了VuePress博客搭建的過程,並對其中的一些問題進行分析記錄,
包括首頁,側邊欄,導航欄,瀏覽器書籤引入,掛載githubPage等等。
本文將圍繞着博客的個性化配置作一個整理。
首先引用官網的原文重申一次VuePress博客搭建的過程:
Start
As Easy as 1, 2, 3
# install
yarn global add vuepress@next
# OR npm install -g vuepress@next
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build
&01.版本推薦
VuePress的官網目前是存在兩個版本的,分別爲0.x版本和最新的1.x的alpha版本。
在實際開發中,我經常因爲混淆版本而導致一些插件不能正常引入,當然這也是因爲我對VuePress的使用還不熟練。
打開VuePress的官網,如果有下面綠色的Notice彈出,說明是1.x版本。
- 0.x 的文檔: v0.vuepress.vuejs.org
- 1.x 的文檔: v1.alpha.vuepress.vuejs.org
如果是開發者,建議安裝最新版VuePress,體驗最新的輪子~
yarn add vuepress -D # Install 0.x.x.
yarn add vuepress@next -D # Install next.
&03.Github鏈接
與github關聯的頁腳鏈接和導航欄鏈接,
/**
* config.js
* @type {{themeConfig: {lastUpdated: string, repoLabel: string,
* docsDir: string, repo: string, editLinkText: string,
* docsRepo: string, editLinks: boolean, docsBranch: string}}}
*/
module.exports = {
// ...
themeConfig: {
// 假定是 GitHub. 同時也可以是一個完整的 GitLab URL
repo: 'https://github.com/Mulander-J/Wiki1001Pro.git',
// 自定義倉庫鏈接文字。默認從 `themeConfig.repo` 中自動推斷爲
// "GitHub"/"GitLab"/"Bitbucket" 其中之一,或是 "Source"。
repoLabel: 'GitHub',
// 以下爲可選的編輯鏈接選項
// 假如你的文檔倉庫和項目本身不在一個倉庫:
docsRepo: 'https://github.com/Mulander-J/Wiki1001Dev',
// 假如文檔不是放在倉庫的根目錄下:
docsDir: 'docs',
// 假如文檔放在一個特定的分支下:
docsBranch: 'master',
// 默認是 false, 設置爲 true 來啓用
editLinks: true,
// 默認爲 "Edit this page"
editLinkText: '博主通道__GitHub Private Repo !',
// 文檔更新時間:每個文件git最後提交的時間,
lastUpdated: 'Last Updated' ,
}
}
&04.個性化主題
主題修改
- 下載默認主題
npm install @vuepress/theme-default@next
- 替換
##複製node_modules/@vuepress/theme-default 文件夾
##粘貼至.vuepress/ 下並更名爲theme
Dev
├─── docs
│ └── .vuepress // 配置目錄
│ │ ├── public // 靜態資源
│ │ ├── theme // 主題
│ │ │ ├── components // 組件
│ │ │ ├── global-components // 全局組件
│ │ │ ├── global-components // 全局組件
│ │ │ ├── layouts // 佈局(包括首頁在內)
│ │ │ ├── styles // 樣式
│ │ │ ├── util // 工具
│ │ │ ├── index.js // 入口配置
│ │ │ ├── noopModule.js // 依賴注入
│ │ │ ├── package.json // 主題依賴
│ │ │ ├── README.md // 主題說明
│ │ └── config.js
│ ├── FAQ // 求索模塊
│ ├── Store // 倉庫模塊
│ ├── Thought // 隨筆模塊
│ └── README.md // 博客首頁
└── package.json
- 運行
npm run dev
關注控制檯輸出
tip Apply theme located at G:\WorkSpace\WebStormWS\Wiki1001\Dev\docs\.vuepress\theme...
若果控制檯能看到上面這句話或者頁面能正常渲染的話,就表示主題引入成功
"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run dev --scripts-prepend-node-path=auto
> [email protected] dev G:\WorkSpace\WebStormWS\Wiki1001\Dev
> vuepress dev docs
wait Extracting site metadata...
tip Apply theme located at G:\WorkSpace\WebStormWS\Wiki1001\Dev\docs\.vuepress\theme...
接下來就可以對這份theme項目作修改了,
它就是載負你的博客的一個簡單的VUe單頁面項目。
滾動條樣式
設置頁面滾動條爲漸變色&圓角樣式
參考
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width: 8px;
height: 8px;
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 10px;
/* 線性漸變 */
background-image: -webkit-gradient(linear,
left bottom, left top,
color-stop(0.44, rgb(60,186,146)),
color-stop(0.72, rgb(253,187,45)),
color-stop(0.86, rgb(253,187,45)));
transition: 0.3s ease-in-out;
}
/*定義滑塊懸浮樣式*/
::-webkit-scrollbar-thumb:hover{
background-image: -webkit-gradient(linear,
left bottom, left top,
color-stop(0.44, rgb(253,187,45)),
olor-stop(0.72, rgb(253,187,45)),
color-stop(0.86, rgb(60,186,146)));
transition: 0.3s ease-in-out;
}
漸變色標題
h1{
background-image: -webkit-linear-gradient(left,
#22c1c3, #fdbb2d 25%, #22c1c3 50%, #fdbb2d 75%, #22c1c3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: myGradientChange 4s infinite linear;
animation: myGradientChange 4s infinite linear;
}
.description,.card h2{
background-image: -webkit-linear-gradient(left,
#fdbb2d, #22c1c3 25%, #fdbb2d 50%, #22c1c3 75%, #fdbb2d);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: myGradientChange 4s infinite linear;
animation: myGradientChange 4s infinite linear;
}
@keyframes myGradientChange {
0%{ background-position: 0 0;}
100% { background-position: -100% 0;}
}
GoToEnd
- 下載官方組件BackToTop
npm install @vuepress/plugin-back-top@next
- 本地化BackToTop組件至Layout.vue中,包括首頁在內都會生產該組件
// 複製node_modules/@vuepress/plugin-back-top/BackToTop.vue
// 粘貼至.vuepress/theme/components
<template>
<div>
<BackToTop></BackToTop>
</div>
</template>
<script>
import BackToTop from '../components/BackToTop.vue'
export default {
components: { BackToTop},
}
</script>
- 修改Back To Top 組件
複製一個Back To Top DOM節點同時修改 transition 爲 transition-group
<template>
<transition-group name="fade">
<svg
v-if="topShow"
class="go-to-top"
key="goTop"
@click="scrollToTop"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"
>
<g transform="translate(-229 -126.358)">
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
</g>
</svg>
<svg
v-if="endShow"
class="go-to-top go-to-end"
@click="scrollToEnd"
key="goEnd"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"
>
<g transform="translate(-229 -126.358)">
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
<rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
</g>
</svg>
</transition-group>
</template>
增加 變量 scrollEnd , endShow
方法 getScrollEnd() ,scrollToEnd()
<script>
import debounce from 'lodash.debounce'
export default {
props: {
threshold: {
type: Number,
default: 300
}
},
data () {
return {
scrollTop: null,
scrollEnd: null
}
},
mounted () {
this.scrollTop = this.getScrollTop()
this.scrollEnd = this.getScrollEnd()
window.addEventListener('scroll', debounce(() => {
this.scrollTop = this.getScrollTop()
this.scrollEnd = this.getScrollEnd()
}, 100))
},
methods: {
getScrollTop () {
return window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0
},
getScrollEnd () {
return document.documentElement.scrollHeight ||
document.body.scrollHeight || this.threshold
},
scrollToTop () {
window.scrollTo({ top: 0, behavior: 'smooth' })
this.scrollTop = 0
},
scrollToEnd () {
window.scrollTo({ top: this.scrollEnd, behavior: 'smooth' })
this.scrollTop = this.scrollEnd
}
},
computed: {
topShow () {
return this.scrollTop > this.threshold
},
endShow () {
return (this.scrollEnd - this.scrollTop) > 3*this.threshold
}
}
}
</script>
增加置底按鈕樣式,z軸旋轉180度
<style lang='stylus' scoped>
.go-to-top {
cursor: pointer;
position: fixed;
bottom: 5rem;
right: 2.5rem;
width: 2rem;
color: $accentColor;
z-index: 1;
}
.go-to-end{
bottom: 2rem;
transform: rotateZ(180deg);
}
.go-to-top:hover {
color: lighten($accentColor, 30%);
}
@media (max-width: 959px) {
.go-to-top {
display: none;
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
&05.插件-PWA
yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa
//config,js
module.exports = {
// ...
plugins: [
['@vuepress/pwa', {
serviceWorker: true,
//指向自定義組件
popupComponent: 'MySWUpdatePopup',
updatePopup: {
message: "新的風暴已經出現",
buttonText: "盤他"
}
}]
]
}
serviceWorker的作用大致就頁面首次加載時會請求本地的serviceWorker.js去比對各個文件的版本號
如果不一致則提示用戶拉取更新
不過這個popup的默認樣式很醜😨,所以官方也提供了自定義popup的接口和教程
默認樣式,這是原始的...eh
這是官網給的模板 = = 阿咧?
這是我的...emmm..可還行呢,湊合用了。這個vue的logo還會動的,不算侵權吧😱...@Vue??
P.S.這個popup 的內容是我自定義寫的,不是官方在皮啊
參考
注意v-if="enabled"
// 添加這一段指令,否則popup無法消失
<SWUpdatePopup>
<div v-if="enabled"
slot-scope="{ enabled, reload, message, buttonText }"
class="my-sw-update-popup">
{{ message }}<br>
<button @click="reload">{{ buttonText }}</button>
</div>
</SWUpdatePopup>
&06.插件-google-analytics
首先你要有一個谷歌賬號,然後有一個 google analytics(GA)賬戶然後...不用麻煩了不用麻煩了不用麻煩 不用麻煩了 不用麻煩了你們一起上 我在趕時間- 如何註冊並設置google analytics(GA)賬戶
- GA-ID ゲットだゼーツ!
- 安裝並使用 google_analysis
yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics
//config.js
module.exports = {
...
plugins: [
['@vuepress/google-analytics', {
ga: '*********'//你的Google Analytics ID
}],
]
}
google_analysis 會實時監控你的url,倘若一個頁面有多個h2,h3標題,滑動滾動條導致url的變化也會被捕捉到。
&07.評論系統-Valine
參考
- 獲取APP ID 和 APP Key,請先登錄或註冊 LeanCloud, 進入控制檯後點擊左下角創建應用
- 安裝並使用 Valine
# Install leancloud's js-sdk
npm install leancloud-storage --save
# Install valine
npm install valine --save
// Register AV objects to the global
window.AV = require('leancloud-storage');
// Use import
import Valine from 'valine';
// or Use require
const Valine = require('valine');
new Valine({
el:'#vcomments',
// other config
})
//Page.vue
<script>
export default {
mounted: function(){
// require window
const Valine = require('valine');
if (typeof window !== 'undefined') {
this.window = window
window.AV = require('leancloud-storage')
}
new Valine({
el: '#vcomments' ,
appId: '',// your appId
appKey: '', // your appKey
notify:false, //郵箱通知,可關閉
verify:false, //反人類的算術驗證碼,建議關閉
avatar:'mm', //頭像,默認即可
visitor: true,//訪問計數
placeholder: 'just go go'
});
}
}
</script>
Issue
不管地址欄怎麼變化,不管怎麼切頁面,評論內容不會隨地址欄變化而變化,即無法同步。
Valine實例與leancloud-storage實例 在每次頁面加載時會向服務器發起
帶當前url參數的請求以獲取評論數據,而這個url參數每次都是一樣。
首先Valine 實例與 leancloud-storage 實例都在 mounted 鉤子中初始化或掛載至 window 對象上了,
當頁面 url 變化時,Page.vue 本身並沒有變化,只是它身上的<Content/>
內容變了,mounted沒有重新觸發,上面兩個實例也沒有改變。
P.S.血的教訓
不要在 md 文件中直接寫<Content/>
,請用其他格式編譯它,否則會被vuepress識別爲組件而不斷加載陷入死循環。
[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
warn @ vue.runtime.esm.js?2b0e:601
vue.runtime.esm.js?2b0e:1832 RangeError: Maximum call stack size exceeded
Exp:
只是它身上的<Content/>內容變了,
只是它身上的`<Content/>`內容變了,
-
如果重新 init 兩個實例呢?
- 通過 watch $route 重新 new 兩個實例也不行。
- 在每個頁面單獨寫入 帶 Valine 的.vue組件也不行。
暫時無法解決...emmm,欲知後事如何,請聽下回分解..
欸,應該沒有(三)了,等解決了直接寫在評論裏吧。