前言

在项目开发过程中，配置了侧边栏，默认展示带有侧边栏的页面，但是VuePress默认首页是与 .vuepress 同级目录下的 README.md 文件，在config.js 文件中配置了 logo 属性，但是每次点击logo跳转的就是当前的默认首页，基于此做了修改主题的配置

问题

点击 logo 跳转默认页面，期望跳转其他页面

主要源码分析

查看官方文档发现Layout.vue文件是vuepress的入口，打开 theme/Layout.vue

打开 theme/Layout.vue

<template>
 
<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文件使用的组件 -->

</template>

这里主要是通过一些判断加载对应的组件，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组件（此组件需去官方网站注册，作用是提供全文搜索），
第二部分是默认的搜索组件，
第三部分是目录组件-->

重新配置默认主题

先新建文件及文件夹，以下是最简单的继承目录，一定要与vuepress的目录结构一致，对应修改的文件应该放到theme目录下，如果这里没有配对，修改的样式不仅可能不会生效页面可能还会出现白屏

docs
  |_.vuepress
    |_theme
      |_components
        |_Navbar.vue
      |_loyouts
        |_Layout.vue
      |_index.js

配置步骤

1. 在.vuepress 目录下新建 theme 文件夹；
2. 在 theme 文件夹新建 components 文件夹；
3. 在 components 文件夹把原主题下的 Navbar.vue 粘贴过来，然后修改对应的配置；
4. 在 theme 文件夹新建 .js 文件，并在文件中输入一下内容

module.exports = {
  extend: '@vuepress/theme-default'
}

更改文件

原主题下的文件内容

修改之后的文件如下，页面可以成功跳转配置的链接，表明修改成功

总结

方法总比困难多，还有其他的需求需要修改原主题配置的，也可以按照这种方式来做修改调整，以期能实现业务需求。