美化个人博客

自定义组件

在./vitepress/components文件夹下定义一个文件，名为 home.vue, 然后再里面写些想要展示的内容所对应的代码，如下所示：

<template>
    <div class="home-wrapper">
        <div v-for="item in list" :key="item" class="home-item">{{item}}</div>
    </div>
</template>
<script lang="ts" setup>
const list = [1,2,3,4,5,6,7,8]
</script>
<style scoped>
.home-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.home-item {
    display: inline-block;
    cursor: pointer;
    vertical-align: center;
    margin: 4px 4px 10px;
    padding: 4px 8px;
    font-weight: bolder;
    border-radius: 2px;
    line-height: 13px;
    font-size: 13px;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.1);
    transition: all 0.5s;
}
</style>

接着，在docs/index.md中引入，如下：

---
#
#
#
---
<!-- 自定义组件 -->
<script setup>
import home from './vitepress/components/home.vue'
</script>
<home/>

锚点导航Anchor

在./vitepress/config.mts文件中的 themeConfig中配置outline, 具体如下：

themeConfig: {
    outline: {
      level: [2, 6],
      label: '目录'
    },
}

📢：目前锚点导航只能配置h2-h6级的标题，h1标题暂时不能配置。