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说明继承成功。