主题修改

想要自定义 vuepres，那就需要对默认主题的组件进行修改，本文将介绍如何覆盖默认主题的组件，这里以覆盖默认的 sidebar 组件为例。

修改配置文件

首先要在配置文件中指明要覆盖的组件名。

const { defaultTheme } = require('vuepress')

import { path } from '@vuepress/utils'

module.exports = {
    lang: 'zh-CN',
    title: 'EchoXu Note',
    description: 'ENote 是一个记录 IT 知识点的文档生成器。IT 知识，文档管理，文档记录，文档生成器',
    // base: '/v2/',  // 部署时如果地址是：https://192.168.1.20/v2  这里的路径就要写为 /v2/ 如果是 / 就需要注释此项。
    head: headConf,
    plugins: pluginConf,

    alias: {
        '@theme/Sidebar.vue': path.resolve(__dirname, './components/Sidebar.vue'),
    },
    theme: defaultTheme({
        ...
    })
}

编写组件

在 docs/.vuepress/components/Sidebar.vue 中添加如下代码，其功能就是点击按钮实现 显示/隐藏 sidebar 的功能：

点击查看详细代码

<script setup>
import NavbarItems from '@theme/NavbarItems.vue'
import SidebarItems from '@theme/SidebarItems.vue'

import { ref } from 'vue';

const isCollapsible = ref(false)

const collapse = () => {
//   console.log("你点击了按钮")
  isCollapsible.value = !isCollapsible.value
}
</script>

<template>
  
  <aside class="sidebar" :class="{ collapsible: isCollapsible }">
    <NavbarItems />
    <slot name="top" />
    <SidebarItems />
    <slot name="bottom" />
  </aside>
  <div class="toggle-sidebar-wrapper" @click="collapse" >
    <span class="arrow" ></span>
  </div>


</template>

<style lang="css">

.test {
  background-color: blue;
}
.toggle-sidebar-wrapper .arrow:hover {
  background-color: #f5f5f5;
  cursor: pointer;
  line-height: 30px;
}

.toggle-sidebar-wrapper {
  position: fixed;
  /* top: 5rem; */
  bottom: 3.75rem;
  left: 19rem;
  right: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: left .3s ease;
}

.toggle-sidebar-wrapper .arrow {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16' height='16' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 10.5H40' stroke='%23828282' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 19.5H40' stroke='%23828282' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 28.5H40' stroke='%23828282' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 37.5H40' stroke='%23828282' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 19L16 24L8 29V19Z' fill='none' stroke='%23828282' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  line-height: normal;
  transition: all .3s;
}

.collapsible {
  width: 0;
}


</style>

主题修改

修改配置文件

编写组件

FAQ