自定义首页

首页样式的修改

如果我们需要自定义首页的css样式，我们需要在.vitepress/theme文件夹下创建两个文件：

• custom.css：编写css样式，可以覆盖原先默认的css样式，如：

  /* 调整 image 模块的样式 */
  .VPHomeHero .image {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      transition: transform 0.3s ease;
  }
  
  /* 调整 features 信息框的样式 */
  .VPHomeFeatures .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

• index.js：进行css文件的引入，和默认配置的覆盖（将自定义的css内容和系统默认的样式进行合并）

  import DefaultTheme from 'vitepress/theme'
  import './custom.css'
  
  export default {
    ...DefaultTheme,
  }

这样就可以对系统的默认样式进行自定义的修改，但是这种修改只局限于系统存在的模块组件

---

引入Vue进行模块的自定义

我们可以对VitePress项目的首页进行内容的自定义，可以使用前端框架Vue进行模块内容的编写，在此之前，我们需要进行全局的注册，同样在index.js文件上进行全局注册：

import DefaultTheme from 'vitepress/theme'
import './custom.css'
import HomeComponent from '../home.vue';

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // 注册全局组件
    app.component('HomeComponent', HomeComponent);
  },
}

注册完后，我们就可以在home.vue文件中进行自定义模块的编写