打造你的专属主题-VitePress保姆级教程

本篇为vitepress系列教程，在开始前，若还不了解vitepress的小伙伴可以看一下以往文章：
不敲一行代码！助你快速搭建属于自己的官网博客！-VitePress保姆级教程

VitePress主题配置

本文将带你快速配置vitepress中的主题

准备

我们首先要在.vitepress文件夹下新建theme文件夹

1、在theme文件夹下新建index.mts，index.mts作为theme的入口文件，vitepress会自动解析theme文件夹下的index.mts文件。

2、在theme文件夹下新建style文件夹，style文件夹用于自定义配置。

3、在style文件夹下新建index.css，作为style的入口文件，引入var.css文件。

4、在style文件夹下新建var.css，该文件就是自定义主题配置文件。

到这一步，文件的引用路径已经准备好了，剩下的就是在theme/style/var.css中写自定义主题即可。

自定义主题配置

下面的所有配置都在var.css文件中实现。

标题配置

可以配置成纯色或渐变色

:root {
  /* 标题 */
  --vp-home-hero-name-color: transparent;
  /* 渐变色 */
  --vp-home-hero-name-background: linear-gradient(
    135deg,
    #76c4fd 10%,
    #bbe2fe 100%
  );
  /* 纯色 */
  /* --vp-home-hero-name-background: red; */
}

图标背景

此处是给右侧的大图标设置背景色，一般我们会喜欢用渐变色实现，看起来视觉效果更好。

:root {
  /* 图标背景 */
  /* 设置线性渐变 */
  --vp-home-hero-image-background-image: linear-gradient(
    135deg,
    #bbe2fe 10%,
    #76c4fd 100%
  );
}

此时渐变色已经出来了，但是看起来非常突兀

我们需要设置filter属性，让元素模糊起来，通过元素检查可以看出来，图片和我们设置的背景是分来的两个元素，所以我们给div设置filter并不影响img图标，抓鲁迅(div)关周树人(img)什么事？

:root {
  /* 图标背景 */
  /* 设置线性渐变 */
  --vp-home-hero-image-background-image: linear-gradient(
    135deg,
    #bbe2fe 10%,
    #76c4fd 100%
  );
  /* 设置模糊度 */
  --vp-home-hero-image-filter: blur(150px);
}

具体的渐变色、渐变角度、模糊大小各位可以按照实际需求自行调整。

按钮主题

:root {

  /* brand按钮 */
  /* 正常 */
  --vp-button-brand-text: red; /* 文字色 */
  --vp-button-brand-border: green; /* 边框色 */
  --vp-button-brand-bg: #43aefc; /* 背景色 */

  /* hover状态 */
  --vp-button-brand-hover-text: #fff;
  --vp-button-brand-hover-border: #75c4fe;
  --vp-button-brand-hover-bg: #75c4fe;

  /* active状态-点击 */
  --vp-button-brand-hover-text: gold;
  --vp-button-brand-hover-border: #43aefc;
  --vp-button-brand-active-bg: #43aefc;
}

当然，文字的默认色是白色，边框色可以和背景色一致，可以改成下面这样

:root {
  /* brand按钮 */
  /* 正常 */
  --vp-button-brand-border: #43aefc; /* 边框色 */
  --vp-button-brand-bg: #43aefc; /* 背景色 */

  /* hover状态 */
  --vp-button-brand-hover-border: #75c4fe;
  --vp-button-brand-hover-bg: #75c4fe;

  /* active状态-点击 */
  --vp-button-brand-hover-border: #43aefc;
  --vp-button-brand-active-bg: #43aefc;
}

主题色配置

项目中默认的主题色为紫色，我们可以通过配置修改项目默认主题色

:root {
  /* 主题色 */
  --vp-c-indigo-1: #43aefc; /* 主题色 */
  --vp-c-indigo-2: #43aefc; /* 主题色-hover */
  --vp-c-indigo-3: #43aefc;
}

主题色修改后会应用到全局，text激活色、章节高亮、url链接等色彩都会应用。

到这里，你的项目主题应该配置的差不多了，下一篇我将会介绍页面的跳转、章节跳转、上下页切换、如下：

另外，我也将本文档的源码开放，大家可以在上面查看具体配置，也可以直接将源码当作模板自定义修改。

仓库：VitePress-保姆级模板

感兴趣的朋友也可以支持一下其它项目，这将是对我极大的鼓励与支持。

仓库：SnowAdmin清新优雅的管理后台

---

参考文献：

vite-press: custom-theme

css: linear-gradient

css: filter

vitepress官方文档