vuepress主題改造-主題的繼承(1)

大家好，我叫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主題改造-標籤雲的改造(2)