Appearance
美化个人博客
自定义组件
在./vitepress/components
文件夹下定义一个文件,名为 home.vue
, 然后再里面写些想要展示的内容所对应的代码,如下所示:
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
中引入,如下:
js
---
#
#
#
---
<!-- 自定义组件 -->
<script setup>
import home from './vitepress/components/home.vue'
</script>
<home/>
锚点导航Anchor
在./vitepress/config.mts
文件中的 themeConfig
中配置outline
, 具体如下:
js
themeConfig: {
outline: {
level: [2, 6],
label: '目录'
},
}
📢:目前锚点导航只能配置h2-h6
级的标题,h1
标题暂时不能配置。