VuePress修改主題

前言

博客作為一個記錄與分享工具是十分必要的，當前各大博客網站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組件（此組件需去官方網站注冊，作用是提供全文搜索）， 第二部分是默認的搜索組件， 第三部分是目錄組件-->

資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

繼承主題

文件目錄

先新建文件及文件夾，以下是最簡單的繼承目錄

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說明繼承成功。