VitePress 彩虹动画

在查阅 VitePress 具体实践时，我被 UnoCSS 文档中的彩虹动画效果深深吸引。在查看其实现原理之后，本文也将探索如何通过自定义组件和样式增强 VitePress 站点，并实现一个炫酷的彩虹动画效果。

自定义主题

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

项目初始化

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

npx vitepress init

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

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

Tips:
- Make sure to add  docs/.vitepress/dist and  docs/.vitepress/cache to your .gitignore file.
- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

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

pnpm add vue

自定义入口文件

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

// <https://vitepress.dev/guide/custom-theme>
import {
   
    h } from 'vue'
import type {
   
    Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'

export default {
   
   
  extends: DefaultTheme,
  Layout: () => {
   
   
    return h(DefaultTheme.Layout, null, {
   
   
      // <https://vitepress.dev/guide/extending-default-theme#layout-slots>
    })
  },
  enhanceApp({
   
    app, router, siteData }) {
   
   
    // ...
  }
} satisfies Theme

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

创建自定义 Layout

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

为什么要自定义 Layout？

• 增加特定的布局元素
• 修改默认主题的行为
• 添加全局组件或功能
• 实现特殊的视觉效果（如我们的彩虹动画）

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

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
</script>

<template>
  <DefaultTheme.Layout />
</template>

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

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import CustomLayout from './Layout.vue'

export default {
   
   
  extends: DefaultTheme,
  Layout: CustomLayout,
}

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

覆盖原本样式

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

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

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

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

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

引入 UnoCSS

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

在项目中安装 UnoCSS 插件：

pnpm add -D unocss

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

import UnoCSS from 'unocss/vite'
import {
   
    defineConfig } from 'vite'

export default defineConfig({
   
   
  plugins: [UnoCSS()],
}

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

<button class="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600">
  按钮
</button>

实现彩虹动画

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

定义彩虹动画关键帧

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

@keyframes rainbow {