VitePress 彩虹动画

date

May 27, 2025

slug

easyeditor-rainbow

status

Published

自定义主题

VitePress 允许你通过自定义 Layout 来改变页面的结构和样式。自定义 Layout 可以帮助你更好地控制页面的外观和行为，尤其是在复杂的站点中。

项目初始化

在终端中运行以下命令，初始化一个新的 VitePress 项目：

然后根据提示，这次选择自定义主题（Default Theme + Customization）：

注意提示，这里需要额外手动安装 vue 库：

自定义入口文件

找到 .vitepress/theme/index.ts 入口文件：

里面暴露了一个 Layout 组件，这里是通过 h 函数实现的，我们将其抽离成 Layout.vue 组件。

创建自定义 Layout

VitePress 的 Layout 组件是整个网站的骨架，控制了页面的基本结构和布局。通过自定义 Layout，我们可以完全掌控网站的外观和行为。

为什么要自定义 Layout？

增加特定的布局元素

修改默认主题的行为

添加全局组件或功能

实现特殊的视觉效果（如我们的彩虹动画）

我们在 .vitepress/theme 文件夹中创建 Layout.vue 组件，并将之前的内容转换成 vue 代码：

接下来，在 .vitepress/theme/index.ts 中注册自定义 Layout：

这将会覆盖默认的 Layout，应用你自定义的布局结构。

覆盖原本样式

VitePress 提供了 css 变量来动态修改自带的样式，可以看到项目初始化后在 .vitepress/theme 中有一个 style.css。里面提供了案例，告诉如何去修改这些变量。

同时可以通过该链接查看全部的 VitePress 变量：VitePress 默认主题变量。

VitePress 允许我们通过多种方式覆盖默认样式。最常用的方法是创建一个 CSS 文件，并在主题配置中导入。

比如想设置 name 的颜色，就可以通过：

引入 UnoCSS

UnoCSS 是一个按需生成 CSS 的工具，可以极大简化 CSS 管理，帮助快速生成高效样式。

在项目中安装 UnoCSS 插件：

然后，在 vite.config.ts 中配置 UnoCSS 插件：

通过 UnoCSS，可以轻松应用样式而无需写冗余 CSS。例如，使用以下类名快速创建按钮样式：

实现彩虹动画

彩虹动画是本文的主角，主要通过动态改变 CSS 变量值来实现色彩的平滑过渡。

定义彩虹动画关键帧

通过 @keyframes，在不同颜色之间平滑过渡，形成彩虹动画效果。创建 rainbow.css 文件：

这段代码定义了彩虹动画的五个关键帧，并将动画应用到根元素上。注意，我们还定义了不带动画的默认状态，这样就可以通过 CSS 类切换动画的启用/禁用。

实现彩虹动画控制组件

接下来，实现名为 RainbowAnimationSwitcher 的组件，其主要逻辑是通过添加或移除 HTML 根元素上的 rainbow 类来控制动画的启用状态，从而实现页面的彩虹渐变效果。

这个组件使用了 @vueuse/core 的两个工具函数：

useLocalStorage 用于在浏览器本地存储用户的偏好设置

useMediaQuery 用于检测用户系统是否设置了减少动画

其中 RainbowSwitcher 组件是一个简单的开关按钮。以下是其实现：

挂载组件

在 .vitepress/theme/index.ts 中，在 enhanceApp 中挂载组件：

在导航栏中使用彩虹动画开关

在 .vitepress/config/index.ts 的配置文件中添加彩虹动画开关按钮：

这样，彩虹动画开关就成功加载到导航栏的下拉菜单中。

彩虹动画效果

如果想查看具体效果，可查看 EasyEditor 的文档。其中关于彩虹动画效果的详细实现看，可以查看内部对应的代码：EasyEditor/docs/.vitepress/theme at main · Easy-Editor/EasyEditor。