你們好，我叫JSShou，讀作JS瘦或者技術瘦，靈感來至前輩技術胖(JSPang)，熱愛前端技術而人比較瘦，原名許中鵬，已在前端行業多年，希望能認識更多朋友。歡迎大家留言交流。
前言
博客作為一個記錄與分享工具是十分必要的，當前各大博客網站CSDN、簡書、掘金等每天都有大量的分享文章出來，當然我們可以把文章分享到這些平台，不過我認為擁有一個可控的、定制的個人博客網站才是一個更酷的事情，而vuepress是當前非常火熱的博客搭建框架。
vuepress1.0 到目前已經發布了 beta 版，其中最重要的修改是主題能夠實現繼承，再也不用 vuepress eject 把默認主題拉過來修改，更麻煩不說，也讓 vuepress 項目不容易升級，所以以下分析都是建立在 vuepress1.0 下。
默認主題源碼分析
安裝
# 安裝
yarn global add vuepress@next # 或者：npm install -g vuepress@next
# 新建項目文件夾
mkdir vuepress-test
# 進入項目
cd vuepress-test
# 創建docs文件夾
mkdir docs
# 新建一個 markdown 文件
echo '# Hello VuePress theme!' > docs/README.md
# 生成package.json文件
npm init
# 在package.json中添加腳本
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
# 運行
yarn docs:dev
源碼復制到項目
把默認主題復制到項目
vuepress eject
發現項目中出現了.vuepress文件夾，此文件夾下就是存放的默認主題，不過當前修改主題也不會有任何效果，復制過來只是方便查看
主要源碼分析
查看官方文檔發現Layout.vue文件是vuepress的入口，打開 theme/Layout.vue
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
<!-- 這塊代碼是主題的頭部，shouldShowNavbar是判斷是否顯示頭部
toggleSidebar是當屏幕出現在手機端目錄隱藏或顯示的判斷-->
<div class="sidebar-mask" @click="toggleSidebar(false)"></div>
<!-- 在移動端時點擊內容部分目錄會隱藏 -->
<Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">...</Sidebar>
<!-- 側邊欄 -->
<div class="custom-layout" v-if="$page.frontmatter.layout">
<component :is="$page.frontmatter.layout"/>
</div>
<!-- 內容顯示部分，可通過在md文件中使用layout: xxx.vue作為布局組件 -->
<Home v-else-if="$page.frontmatter.home"/>
<!-- 如果md文件中有 home:true 就使用該組件 -->
<Page v-else :sidebar-items="sidebarItems">
<slot name="page-top" slot="top"/>
<slot name="page-bottom" slot="bottom"/>
</Page>
<!-- 一般的md文件使用的組件 -->
這里主要是通過一些判斷加載對應的組件，Navbar是頭部顯示組件，Sidebar是側邊欄組件,Home為默認的主頁，Page為顯示文檔內容的組件
Navbar 組件分析
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
<!-- 適配移動端，展示隱藏目錄的按鈕，默認主題對移動端的適配下足了
功夫，這也是我改造默認主題而不是自定義主題的原因，自己寫主題當然也
能實現，但是無疑會花上加倍的時間，很多第三方主題都不支持移動端-->
<router-link :to="$localePath" class="home-link">...</router-link>
<!-- 左邊部分博客的標題的配置，這部分有title和logo，都是從config.js中讀取的 -->
<div class="links" :style="{
'max-width': linksWrapMaxWidth + 'px'
}">
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
<SearchBox v-else-if="$site.themeConfig.search !== false"/>
<NavLinks class="can-hide"/>
</div>
<!-- 這塊是目錄部分，共三個組件，第一個是配置文件配置了algolia的，使用algolia組件（此組件需去官方網站注冊，作用是提供全文搜索），
第二部分是默認的搜索組件，
第三部分是目錄組件-->
繼承主題
文件目錄
先新建文件及文件夾，以下是最簡單的繼承目錄
docs
|_.vuepress
|_theme
|_components
|_Navbar.vue
|_loyouts
|_Layout.vue
|_index.js
繼承主題的配置
在 theme 新建 index.js 文件，輸入以下內容
module.exports = {
extend: '@vuepress/theme-default'
}
這里有個坑，當時在官方文檔中怎么也找不到上面的代碼應該放到哪里，試了很久才發現應該放到theme目錄下，如果這里沒有配對，修改的樣式不僅可能不會生效頁面可能還會出現白屏
更改文件
在 theme 下新建 layouts 目錄，在 layouts 下新建 Layout.vue,修改 Layout.vue 文件，比如在頂部DOM中添加一個test，如果頁面出現這個test說明繼承成功。
好了，完成了繼承操作后，我們可以開始改造主題了，請看下一篇vuepress主題開發-標簽雲的改造