VitePress从零教会你搭建属于自己的博客

原创已于 2025-07-04 10:03:20 修改 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-07-04 00:03:37 首次发布

🟢VitePress

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了更好的开发体验、更好的生产性能、更精美的默认主题和更灵活的自定义 API。
VitePress官网
 VuePress官网

在这里插入图片描述
使用 markdown、HTML、CSS、JavaScript、Vue 编写搭建自己的知识库

使用 Markdown 轻松创建文档知识库
vite 即使预览，网页自动发生变化
内置代码高亮、实时编码等功能
使用 Windi Css 设置样式
使用 MDC 组件，用 vue 做出好看的效果
内置对 LaTex 数学公式的支持
能直接使用前端图标库
能够导出 PDF、静态 HTML 文件

🟢1、VitePress快速上手

vitepress 是一个静态站点生成器，英文名为 SSG (Static Site Generation)。与它类似的还有 yuepress、hexo，python 语言也有 shpinx、mkdocs 之类的工具，react 也有 docusaurus。这些工具找到一个适合自己的才是最好的！
但是在这么多的工具里面，vitepress 是上手成本最低的，也是配置最简单的(需要会JavaScript)，界面也很漂亮，有适配移动端。只要写 markdown 文件与 javascript 配置文件，就可以快速搭建器一个网站。
vitepress 考虑到用户可能会需要定制化，所以提供了很多的接口与插槽，如果会用 vue 开发项目，就可以自己改。并且可以使用tai1wind css、 elements-plus 等框架，使用起来非常方便。

1.1、项目创建

操作笔记参考官网文档:https://vitepress.dev/zh/guide/what-is-vitepress
创建目录

mkdir vitepress-tutorial
cd vitepress-tutoral

安装依赖

npm add -D vitepress
或者
yarn add -D vitepress

初始化项目

pnpm vitepress init
或者
yarn vitepress init

按照问题填一下即可

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config? 
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

项目目录结构


├─ docs
│  ├─ .vitepress # 当前目录所在的位置就是文档的根目录
│  │  └─ config.js # 项目的配置文件，最重要
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

在这里插入图片描述
运行启动脚本


npm run docs:dev
或
yarn docs:dev

打开本地
在这里插入图片描述

1.2、路由

VitePress 使用基于文件的路由，这意味着生成的 HTML 页面是从源 Markdown 文件的目录结构映射而来的。

.
├─ guide
│  ├─ getting-started.md
│  └─ index.md
├─ index.md
└─ prologue.md

生成的 HTML 页面会是这样：

.
index.md                  -->  /index.html (可以通过 / 访问)
prologue.md               -->  /prologue.html
guide/index.md            -->  /guide/index.html (可以通过 /guide/ 访问)
guide/getting-started.md  -->  /guide/getting-started.html

生成的 HTML 可以托管在任何支持静态文件的 Web 服务器上。

1.3、路由配置介绍

import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "My Awesome Project",  //项目标题
  description: "A VitePress Site", //项目描述
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    // 导航栏
    nav: [
      { text: '首页', link: '/' },
      { text: '笔记', link: '/notes/' },
      { text: 'examples', link: '/markdown-examples' }
    ],
    // 目录
    sidebar: 
      {
       '/notes': [
          { text: 'notes1', link: '/notes/notes1' },
          { text: 'notes2', link: '/notes/notes2' },
        ]
      }
    ,
    // sidebar: [
    //   {
    //     text: 'Examples',
    //     items: [
    //       { text: 'Markdown Examples', link: '/markdown-examples' },
    //       { text: 'Runtime API Examples', link: '/api-examples' }
    //     ]
    //   }
    // ],
    //社交链接
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})

2、VitePress 基本配置

在这里插入图片描述
docs 目录下的 .vitepress 目录是专门用来存放配置文件的，在里面新建一个 config.js 配置文件，结构如下

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json

config.js 导出一个 js 对象，用来配置项目当中的一些信息。

export default {
  title: "站点标题", // 站点标题
  description: "mate 标签 description，多用于搜索引擎抓取摘要记", // mate 标签 description，多用于搜索引擎抓取摘要
};

2.1、标题与图标

这时候左上角的图标和 tab 栏的标题都还是默认的 VitePress，我们需要改成我们自己的工程名
1、在根目录下创建 .vitepress 目录，然后创建 config.ts 文件，然后输入以下内容

export default {
  // ...
  themeConfig: {
    // 主题配置
    siteTitle: "站点首页标题", // 站点首页标题
    logo: "logo.svg", // 站点 logo
  },
};

2、每次改配置都需要重启工程
可以看到 tab 的标题，左上角标题都改成系统名了
修改首页展示的图片，其中 logo 的地址对应的是 public 下的图片，目录结构如下所示

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ public
│  │   └─ logo.svg
│  └─ index.md
└─ package.json

这里 logo 我是用了 svg 图标，此时页面效果为
在这里插入图片描述

2.2、导航栏

2.2.1、右侧导航

可以在 themeConfig.nav 配置右侧导航，并且点击可以跳转我们指定页面。

export default {
  title: "站点标题", // 站点标题
  description: "mate 标签 description，多用于搜索引擎抓取摘要", // mate 标签 description，多用于搜索引擎抓取摘要
  themeConfig: {
    // 主题配置
    // siteTitle: "站点首页标题", // 站点首页标题
    logo: "logo.svg", // 站点 logo
    nav: [
      { text: "导航1", link: "/nav1/" },
      { text: "导航2", link: "/nav2/" },

      { text: "gitee", link: "https://gitee.com/Tianci_sun" }, // 外链
    ], // 右上角头部导航栏
  },
};

同时在 docs 下新建 nav1/index.md 和 nav2/index.md
此时我们页面即可展示 nva 并且支持了跳转本地 markdown 文件以及外部链接
我们还可以这样嵌套配置，使得导航栏出现下拉选项

// 项目的配置文件目录
export default {
  themeConfig: {
    logo: "logo.svg", // 站点 logo
    nav: [
      { text: "博客", link: "/articles/组件库环境搭建" },
      { text: "Python", link: "/python/" },
      { text: "前端", link: "/frontend/" },
      { text: "gitee", link: "https://gitee.com/Tianci_sun" }, // 外链
      {
        // 右上角下拉导航栏
        text: "后端",
        items: [
          { text: "Linux", link: "/linux/" },
          { text: "Redis", link: "/redis/" },
          {
            // 带分割线的导航栏
            items: [
              { text: "MySql", link: "/mysql/" },
              { text: "sqlalchemy", link: "/sqlalchemy/" },
            ],
          },
          {
            items: [
              { text: "nginx", link: "/nginx/" },
              { text: "gunicorn", link: "/gunicorn/" },
            ],
          },
        ],
      },
    ], // 右上角头部导航栏
  },
};

2.3、侧边栏

侧边栏可以在 themeConfig.Sidebar 中配置，其实和 nav 配置差不多

sidebar: [
  {
    text: "前端",
    items: [
      {
        text: "前端基础",
        link: "/frontend/index.md",
      },
      { text: "HTML", link: "/frontend/HTML" },
      { text: "CSS", link: "/frontend/CSS" },
    ],
  },
  {
    text: "javascript",
    items: [
      { text: "js 基础", link: "/frontend/javascript" },
      { text: "js 进阶", link: "/frontend/javascript2" },
    ],
  },
]; // 侧边栏

不过一般不会使用这种方式配置侧边栏，因为这样每个页面都会有侧边栏。我们需要做到仅某些页面才会出现侧边栏。所以我们可以这样配置

sidebar: {
    "/frontend/"
:
    [
        {
            text: "前端",
            items: [
                {
                    text: "前端基础",
                    link: "/frontend/index.md",
                },
                {text: "HTML", link: "/frontend/HTML"},
                {text: "CSS", link: "/frontend/CSS"},
            ],
        },
        {
            text: "javascript",
            items: [
                {text: "js 基础", link: "/frontend/javascript",},
                {text: "js 进阶", link: "/frontend/javascript2",},
            ],
        },
    ],
}
, // 指定路径的侧边栏

2.4、社交链接

使用 themeConfig.socialLinks 可以配置社交链接，目前支持的有

type SocialLinkIcon =
  | 'discord'
  | 'facebook'
  | 'github'
  | 'instagram'
  | 'linkedin'
  | 'slack'
  | 'twitter'
  | 'youtube'
  | { svg: string }

配置如下

    // 社交链接
    socialLinks: [
            {
        icon: {
          svg: '<svg t="1751554893123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8012" width="200" height="200"><path d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m17.066667-413.525333c34.850133 4.352 68.778667 5.12 102.741333 2.0992 23.04-2.048 44.817067-8.362667 64.170667-21.9136 38.212267-26.794667 49.783467-85.1968 24.251733-123.050667-14.626133-21.7088-36.8128-30.344533-60.757333-35.498667-35.054933-7.543467-70.4512-5.751467-105.847467-3.413333-5.666133 0.3584-6.7584 3.072-7.236267 8.209067-3.072 32.682667-6.536533 65.314133-9.813333 97.962666-2.5088 24.814933-4.932267 49.629867-7.509333 75.605334z m53.4016-33.928534c1.962667-20.906667 3.6352-39.338667 5.4272-57.770666 1.553067-15.906133 3.413333-31.778133 4.727466-47.701334 0.3584-4.283733 1.553067-6.656 5.956267-6.382933 15.616 1.041067 31.709867 0.034133 46.728533 3.652267 36.488533 8.823467 48.725333 54.306133 23.3472 83.029333-15.8208 17.902933-36.7616 23.586133-59.255466 25.088-8.465067 0.546133-17.015467 0.085333-26.9312 0.085333zM512 434.295467c-2.184533-0.648533-3.5328-1.1776-4.932267-1.4336-37.717333-6.877867-75.690667-8.328533-113.646933-2.816-20.974933 3.037867-41.0112 9.489067-57.480533 23.330133-22.9888 19.319467-21.640533 46.848 4.4032 62.0032 13.056 7.594667 28.023467 12.509867 42.5984 17.288533 14.08 4.608 28.996267 6.826667 43.144533 11.264 12.5952 3.925333 14.011733 14.318933 3.584 22.306134-3.345067 2.56-7.441067 5.085867-11.537067 5.751466-11.195733 1.826133-22.698667 4.386133-33.826133 3.566934-24.098133-1.774933-48.042667-5.461333-72.5504-8.430934-1.365333 10.615467-2.935467 23.0912-4.5568 35.9424 4.181333 1.365333 7.68 2.730667 11.264 3.618134 33.9456 8.4992 68.386133 9.608533 102.912 5.12 20.087467-2.6112 39.4752-7.901867 56.695467-19.029334 28.603733-18.4832 36.693333-57.1904-4.676267-75.383466-14.506667-6.382933-30.190933-10.410667-45.482667-15.086934-11.4176-3.4816-23.313067-5.614933-34.525866-9.5232-9.7792-3.413333-11.144533-12.202667-3.037867-18.397866 4.6592-3.549867 10.717867-6.997333 16.384-7.3728a480.853333 480.853333 0 0 1 53.384533-0.853334c15.377067 0.699733 30.651733 3.549867 46.4896 5.5296L512 434.295467z m257.143467 2.048L750.933333 614.2976h54.152534c4.778667-45.636267 9.710933-90.7264 14.062933-135.8848 0.6144-6.365867 2.3552-8.840533 8.686933-9.0112 11.434667-0.273067 22.8864-1.979733 34.286934-1.570133 23.722667 0.853333 42.3936 9.728 38.4 43.264-2.901333 24.2688-5.597867 48.571733-8.2432 72.874666-1.092267 10.069333-1.826133 20.189867-2.730667 30.4128h55.330133c3.584-35.259733 7.9872-70.058667 10.496-104.994133 3.413333-47.4624-17.7664-73.3184-64.682666-80.213333-40.96-6.007467-81.339733-0.341333-121.5488 7.133866z m-483.498667 134.6048c-8.738133 1.297067-16.384 2.798933-24.098133 3.4816-25.6512 2.235733-51.319467 3.9424-76.305067-4.266667-13.909333-4.590933-24.6784-12.578133-29.7984-25.9584-7.901867-20.701867 0.887467-47.104 19.831467-60.3136 17.373867-12.117333 37.717333-15.9232 58.453333-15.9232 22.545067-0.017067 45.090133 2.423467 68.232533 3.84L307.2 432.298667c-15.069867-1.723733-29.4912-3.925333-43.997867-4.9152-41.0112-2.798933-80.64 2.6112-117.469866 20.462933-30.020267 14.557867-52.053333 36.010667-58.6752 68.130133-7.850667 38.144 11.537067 69.495467 51.7632 85.845334 19.1488 7.765333 39.287467 12.509867 60.0064 12.5952 24.746667 0.1024 49.493333-1.570133 74.205866-2.952534 3.106133-0.170667 8.311467-2.901333 8.669867-5.034666 1.979733-11.554133 2.730667-23.278933 3.9424-35.464534z" fill="#DD1700" p-id="8013"></path></svg>',
        },
        link: "https://blog.csdn.net/stc_ljc?spm=1000.2115.3001.5343",
      },
            {
        icon: {
          svg: '<svg t="1751554975266" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8973" width="200" height="200"><path d="M512 1021.72444445A509.72444445 509.72444445 0 1 1 512 2.27555555a509.72444445 509.72444445 0 0 1 0 1019.4488889z m257.99338667-566.37667556H480.54272a25.19495111 25.19495111 0 0 0-25.19495111 25.19495111v62.91456c0 13.90819555 11.28675555 25.19495111 25.12213333 25.19495111h176.21902223c13.98101333 0 25.19495111 11.28675555 25.1949511 25.12213334v12.59747555c0 41.72458667-33.78744889 75.51203555-75.51203555 75.51203555H367.23825778a25.19495111 25.19495111 0 0 1-25.12213333-25.12213333V417.62816c0-41.72458667 33.78744889-75.51203555 75.43921777-75.51203555h352.43804445c13.83537778 0 25.12213333-11.28675555 25.12213333-25.19495112v-62.91456a25.19495111 25.19495111 0 0 0-25.12213333-25.19495111h-352.43804445a188.74368 188.74368 0 0 0-188.74368 188.81649778v352.36522667c0 13.90819555 11.28675555 25.19495111 25.19495111 25.19495111h371.22503112a169.88387555 169.88387555 0 0 0 169.95669333-169.88387556V480.54272a25.19495111 25.19495111 0 0 0-25.19495111-25.19495111z" fill="#C71D23" p-id="8974"></path></svg>',
        },
        link: "https://gitee.com/Tianci_sun",
      },
      { icon: "github", link: "https://github.com/stc0218ljc" },


    ],

效果如下
在这里插入图片描述

3、布局模式

官网这章节有详细介绍 vitepress 中的三种布局模式，分别是

doc，文档模式
page，页面模式
home，首页模式

如果没有指定布局模式，默认使用 doc 文档模式

3.1、doc 文档模式

文档模式就是，vitepress 会自动解析 md 内容，并且使用自带的样式

修改 index.md 的内容

---
layout: doc
---

# 标题 1

## 标题 2

### 标题 3

- 分点 1
- 分点 2
- 分点 3

1. 分点 1
2. 分点 2
3. 分点 3

然后就可以看到自带样式的 md 内容
在这里插入图片描述

3.2、page 页面模式

页面模式就是，vitepress 会自动解析 md 内容，但不会使用自带样式

我们把 index.md 的 layout 改一下

---
layout: page
---

可以看到，内容已经被解析成 html 标签，但没有预设的文档样式，这个模式下可以进行自定义主题等处理
在这里插入图片描述

3.3、home 首页模式

这是我主要演示模式，这个模式下会使用 vitepress 自带的组件来控制首页样式

我们先改下 index.md 的内容，直接复制官网内容 (懒得写)

---
layout: home

hero:
name: VitePress
text: Vite & Vue powered static site generator.
tagline: Lorem ipsum...
image:
src: /logo.png
alt: VitePress
actions:
  - theme: brand
    text: Get Started
    link: /guide/what-is-vitepress
  - theme: alt
    text: View on GitHub
    link: https://github.com/vuejs/vitepress
---

可以看到，这时候已经是首页样式了

注意：注意缩进，不对可能导致没有内容

4、首页优化

接下来我们开始对首页进行优化

4.1、首页图片处理

我们先选择合适的图片作为图标，当然你也可以不用，把 image 属性去掉即可

在根目录下创建 public 目录，然后把选好的图片放到里面，再修改 image 属性即可

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
      src: /logo.svg
      alt: VitePress

在这里插入图片描述

4.2、添加 Features

官网下边可以加点 Features 来分点介绍
1、修改根目录下的 index.md ，也就是作为首页的文件

layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
      src: /logo.svg
      alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress

features:
  - icon: ⚡️
    title: Vite, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🖖
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...

这样首页就能显得没那么空，也能加上小点为系统做更详细的描述

4.3、页脚

注脚功能比较好实现，vitepress 文档也有教程，就是在 themeConfig 中添加footer属性

export default {
  themeConfig: {
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2019-present Evan You'
    }
  }
}


export interface Footer {
  // 版权前显示的信息
  message?: string

  // 实际的版权文本
  copyright?: string
}

上面的配置也支持 HTML 字符串。所以，例如，如果想配置页脚文本有一些链接，可以调整配置如下：

export default {
  themeConfig: {
    footer: {
      message: 'Released under the <a href="https://github.com/vuejs/vitepress/blob/main/LICENSE">MIT License</a>.',
      copyright: 'Copyright © 2019-present <a href="https://github.com/yyx990803">Evan You</a>'
    }
  }
}

4、内容优化

4.1、首页组件

如果我们觉得首页内容比较单调，想自己设计点可交互的内容，我们可以通过以下方案

追加样式内容
我们在首页 index.md 中添加内容

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
      src: /logo.svg
      alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress

features:
  - icon: ⚡️
    title: Vite, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🖖
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...

---

添加的内容是能直接渲染到首页的 Features 下，Footer 上的空白部分的，由于 vitepress 使用的是 markdown-it 解析的 md，所以也能直接写 html 标签


<div style="color: red; font-size: 24px;">这是个有 style 的随便写点</div>

尝试着加点 class 属性，让内容更丰富

<div class="demo">这是个有 style 的随便写点</div>

然后在文档后补添加内存

<style>
  .demo {
    font-weight: 700;
    font-size: 64px;
  }
</style>

写完之后可以发现内容变化了。
在这里插入图片描述

4.2、Vue SFC 组件

我们可以自己写一个 SFC，注册到工程中，然后在 md 中使用

1、在 theme 目录中创建 components 目录，然后创建 Counter.vue


<script setup>
import { ref } from "vue";

const num = ref(0);
const add = () => {
  num.value++;
};
</script>

<template>
  <div class="counter">我就是 counter 组件</div>
  <button class="btn" @click="add">{{ num }}</button>
</template>

<style>
.counter {
  color: blue;
  font-size: 24px;
  font-weight: 600;
}

.btn {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
</style>

2、在 .vitepress/theme/nav.js 中注册 Counter.vue 组件


import Theme from "vitepress/theme";
import "./style/var.css";
import Counter from "./components/Counter.vue";

export default {
  ...Theme,
  enhanceApp({ app }) {
    app.component("Counter", Counter);
  },
};

3、在首页 index.md 使用组件

<Counter></Counter>

可以看到 Counter 组件成功被渲染出来，并且点击按钮能响应式变化数字
在这里插入图片描述
所以，对于复杂的交互组件，我们可以通过自定义 SFC，然后在 theme/nav.js 中注册组件，并在 md 中使用组件，达到想要的复杂交互效果

4.3、使用首页预留插槽

现在我们已经能做到在 Features 下 Footer 上添加自定义内容了，但是我有办法将自定义内容加到 Header 下 Hero 上吗

答案是可以的，vitepress 首页给我们预留了很多插槽，通过插槽我们可以将自定义组件渲染到想要的位置

使用插槽案例
尝试将一个组件放到 Hero 上方
1、在 components 目录下新建 HeroBefore.vue

<script setup></script>

<template>
  <div class="before">HeroBefore</div>
</template>

<style>
.before {
  color: green;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
</style>

2、安装 vue，因为需要使用 vue 提供的 h 方法


npm add vue -D

3、在 theme/index.js 中使用插槽

import Theme from "vitepress/theme";
import "./style/var.css";
import FreeStyle from "./components/FreeStyle.vue";
import { h } from "vue";
import HeroBefore from "./components/HeroBefore.vue";

export default {
  ...Theme,
  Layout() {
    return h(Theme.Layout, null, {
      "home-hero-before": () => h(HeroBefore),
    });
  },
  enhanceApp({ app }) {
    app.component("FreeStyle", FreeStyle);
  },
};

组件已经渲染到 Header 下 Hero 上方了
在这里插入图片描述

4.4、查看插槽位置

vitepress 文档并没有详细说明，我们可以通过查阅 vitepress 源码来知道预留的插槽位置，文件在 src/client/theme-default/components/Layout.vue


<template>
  <div class="Layout">
    <slot name="layout-top" />
    <VPSkipLink />
    <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
    <VPNav>
      <template #nav-bar-title-before>
        <slot name="nav-bar-title-before" />
      </template>
      <template #nav-bar-title-after>
        <slot name="nav-bar-title-after" />
      </template>
      <template #nav-bar-content-before>
        <slot name="nav-bar-content-before" />
      </template>
      <template #nav-bar-content-after>
        <slot name="nav-bar-content-after" />
      </template>
      <template #nav-screen-content-before>
        <slot name="nav-screen-content-before" />
      </template>
      <template #nav-screen-content-after>
        <slot name="nav-screen-content-after" />
      </template>
    </VPNav>
    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
    <VPSidebar :open="isSidebarOpen" />

    <VPContent>
      <template #home-hero-before>
        <slot name="home-hero-before" />
      </template>
      <template #home-hero-after>
        <slot name="home-hero-after" />
      </template>
      <template #home-features-before>
        <slot name="home-features-before" />
      </template>
      <template #home-features-after>
        <slot name="home-features-after" />
      </template>

      <template #doc-footer-before>
        <slot name="doc-footer-before" />
      </template>
      <template #doc-before>
        <slot name="doc-before" />
      </template>
      <template #doc-after>
        <slot name="doc-after" />
      </template>

      <template #aside-top>
        <slot name="aside-top" />
      </template>
      <template #aside-bottom>
        <slot name="aside-bottom" />
      </template>
      <template #aside-outline-before>
        <slot name="aside-outline-before" />
      </template>
      <template #aside-outline-after>
        <slot name="aside-outline-after" />
      </template>
      <template #aside-ads-before>
        <slot name="aside-ads-before" />
      </template>
      <template #aside-ads-after>
        <slot name="aside-ads-after" />
      </template>
    </VPContent>

    <VPFooter />
    <slot name="layout-bottom" />
  </div>
</template>

通过插槽名能大概猜到位置在哪，当然也能一个个试知道具体位置，结合这些插槽就能自定义出更个性化的 vitepress 首页了

4.5、更改首页标题色调

默认首页展示的标题颜色是绿色，图标背景是白色，通过以下操作，可以获得跟官方官网一样的炫彩配色了
1、在 .vitepress 目录下创建 theme 目录，theme 目录下创建 index.ts ，输入以下内容

import Theme from "vitepress/theme";

export default {
  ...Theme,
};

2、在 theme 目录下创建 style 目录，style 目录下创建 var.css


:root {
  --vp-home-hero-name-color: red;
}

3、在 theme/index.ts 下引入 style/var.css

import Theme from "vitepress/theme";
import "./style/var.css";

export default {
  ...Theme,
};

可以看到标题颜色已经变成设定的红色了
在这里插入图片描述

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见