组件

组件是允许你快速展示不方便通过标准 MarkDown 语法展示内容的 Vue 单文件组件

导入

可以直接在 Markdown 文件中导入和使用 Vue 组件。

如果一个组件只被几个页面使用，建议在使用它们的地方显式导入它们。这使它们可以正确地进行代码拆分，并且仅在显示相关页面时才加载：

<script setup>
import Card from '/.vitepress/theme/components/Card.vue'
import Gallery from '/.vitepress/theme/components/Gallery.vue'
</script>

组件展示

Card 卡片

可以展示图片和信息

昵称: 海鸥t

地区: 山东（IP属地）

<Card :image="'/picture/Haiout_skin.webp'" :fields="{
    '昵称': '海鸥t',
    '地区': '山东（IP属地）' 
    }" />

Gallery 图片走马灯

可以展示多张图片

图片走马灯

<Gallery :description="'图片走马灯'" :images="[{
    src: '/picture/Haiout_skin.webp',
    alt: '海鸥t'
}, {
    src: '/picture/Enderman98k_skin.webp',
    alt: 'Enderman98k'
}, {
    src: '/picture/Mc_gexx_skin.webp',
    alt: 'MC_gexx'
},{
    src: 'https://wiki.hypixel.net/images/8/81/SkyBlock_renders_locations_1.jpg',
    alt: 'SkyBlock'
}]" />