vitepress趣玩系列——alpha.50脚手架工程初始化功能探索

前言

昨天(3月7号)，vitepress更新了版本号alpha.50，里面包含了我上一篇文章中提到的PR

看到这个，我的心情如下：

一月份水的一个PR还以为官方不会理了，没想到给我合并了

在我的PR下还看到一个有意思的合并信息：

• vitepress init command (#2020) (38bbdad), closes #1252

这是祖师爷提的一个PR，主要是实现了vitepress init功能用于工程初始化，我们这篇文章主要也是讲解vitepress init的使用，并且使用我提的PR中的home-hero-info插槽，实现我上一篇文章：vitepress趣玩系列——修改源码实现动画标题效果，的动态标题功能

创建工程

首先我们创建一个目录，然后pnpm init初始化工程，我的目录名叫vitepress-fun-cli

然后安装vitepress，执行命令pnpm add vitepress，需要注意的是，我们一定要安装vitepress 1.0.0-alpha.50版本或以上

在当前目录中，打开控制台，然后执行命令npx vitepress init

根据自己的情况进行选择，以下是我的输入项及选择

拓展，这里用到的prompt工具是：@clack/prompts，由Astro的core maintainer编写，还是挺好看的，而且简单易上手

预告下，我的下一篇文章讲到的脚手架工具也会用上该prompt，如果不出意外的话应该短时间内出吧 :)

执行命令pnpm docs:dev就能运行工程

创建后的工程目录如下

其中，docs/index.md作为首页，到这里基础工程就算搭建完成了

使用插槽home-hero-info

使用插槽方法也很简单，首先我们先创建需要的组件，docs/theme/components/AnimateTitle.vue，偷个懒，复制上一篇文章写的组件，具体的组件解析可以参考上一篇内容：vitepress趣玩系列——修改源码实现动画标题效果

<script setup lang="ts"></script>

<template>
  <h1 class="name">
    <span class="clip">Vitepress Fun Cli</span>
  </h1>
  <p class="text">A Vitepress Site For Fun</p>
  <p class="tagline">My great project tagline</p>
</template>

<style scoped>
.name {
  background: -webkit-linear-gradient(
    315deg,
    rgb(210, 86, 53) 10%,
    #647eff 50%,
    rgb(238, 224, 112) 90%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.name,
.text {
  max-width: 392px;
  letter-spacing: -0.4px;
  line-height: 40px;
  font-size: 32px;
  font-weight: 700;
  white-space: pre-wrap;
}
@media (min-width: 640px) {
  .name,
  .text {
    max-width: 576px;
    line-height: 56px;
    font-size: 48px;
  }
}
@media (min-width: 960px) {
  .name,
  .text {
    line-height: 64px;
    font-size: 56px;
  }
}

.tagline {
  padding-top: 8px;
  max-width: 392px;
  line-height: 28px;
  font-size: 18px;
  font-weight: 500;
  white-space: pre-wrap;
  color: var(--vp-c-text-2);
}
@media (min-width: 640px) {
  .tagline {
    padding-top: 12px;
    max-width: 576px;
    line-height: 32px;
    font-size: 20px;
  }
}

@media (min-width: 960px) {
  .tagline {
    line-height: 36px;
    font-size: 24px;
  }
}
</style>

创建文件theme/index.ts，这里能配置vitepress的主题内容，也能使用插槽，配置内容如下：

import Theme from "vitepress/theme";
import { h } from "vue";
import AnimateTitle from "./components/AnimateTitle.vue";

export default {
  ...Theme,
  Layout() {
    return h(Theme.Layout, null, {
      "home-hero-info": () => h(AnimateTitle),
    });
  },
};

我们需要先安装vue，不然不能使用vue组件，执行命令pnpm add vue

这时候再重新运行工程，就能看到上一篇文章中的效果了

后记

通过这篇文章，你能学会使用官方脚手架快速的搭建vitepress工程，并且使用插槽实现自己想要的效果

文章的源码在Github仓库中

使用patch-package插件修改源码，在你完成修改生成patches文件夹的时候，插件会询问你是否需要向官方提一个issue来支持你的修改

当你有个好点子的时候，何尝不自己也先提一个issue然后自己实现一遍给官方提个PR呢，万一合并了岂不是血赚^o^