snowy

Appearance

On this page

重写vitepress首页 ​

使用vue组件重写首页 ​

第一步：新建一个组件 ​

在docs/.vitepress文件夹下新建一个components文件夹，并在下面新建一个Home.vue文件。

第二步：修改docs/index.md ​

直接在index.md中引入Home组件。layout保留home首页模式。

md
---
layout: home
---
<script setup>
    import Home from './.vitepress/components/Home.vue'
</script>

<Home />

首页标题动画 ​

  • 引入Animate.css
js
import 'animate.css'
  • 添加样式
css
<transition-group
    appear
    name="animate__animated animate__bounce" 
    enter-active-class="animate__swing"
>
    <div class="home-title-1" key="1">欢迎来到SNOWY</div>
    <div class="home-title-2" key="2">人生是旷野,不是轨道</div>
</transition-group>
<transition
    appear 
    name="animate__animated animate__bounce"
    enter-active-class="animate__backInUp"
>
    <div class="home-page">
    <a href="https://github.com/sssnowww">
        <button type="primary" plain class="home-page-1">Github</button>
    </a>
    <a href="/articles/开始">
        <button type="primary" plain class="home-page-2">快速开始</button>
    </a>
    </div>
</transition>