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

兔子先森Ace

已于 2025-04-28 09:05:30 修改

阅读量1.8k

点赞数 18

分类专栏：构建工具文章标签： vue.js react.js css 前端 javascript html5 css3

于 2024-09-24 13:00:49 首次发布

本文链接：https://blog.csdn.net/qq_44793507/article/details/142486895

版权

构建工具专栏收录该内容

7 篇文章

订阅专栏

本篇为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官方文档