Here is a sample of my custom Astro components that can be used when writing MDX content in Astro.

BilibiliVideoCard

加载出错
稍后再看
4:28
吉祥话【2021拜年纪单品】
hanser：哟！新年的一年要天天开心！把去年的坏运气都甩掉呀skrrrrrr！！” 泠鸢yousa：新春快乐！这吉祥话发相亲相爱一家人群岂不太合适了，妙啊！ 祖娅纳惜：祝大家牛年行大运！好吃…不长胖～！ 鹿乃：祝大家新年快乐！希望大家在2021年都能够得到幸福。今年我也要加油哟～！
9009442
13983 
1
<BilibiliVideoCard id="BV1zp4y1W7qf"/>

Markmap

markmap示例
在新标签页打开 
1
<Markmap name="markmap-example" height="500px"/>

SteamCard3D

1
<SteamCard3DDesk>
2
  <SteamCard3D src="/images/tarot/bilibili/0.jpg"/>
3
  <SteamCard3D src="/images/tarot/bilibili/1.jpg"/>
4
  <SteamCard3D src="/images/tarot/bilibili/2.jpg"/>
5
  <SteamCard3D src="/images/tarot/bilibili/3.jpg"/>
6
  <SteamCard3D src="/images/tarot/bilibili/4.jpg"/>
7
</SteamCard3DDesk>
8


9
<SteamCard3DDesk>
10
  <SteamCard3D src="/images/steam-card/thb-250-plains.png"/>
11
  <SteamCard3D src="/images/steam-card/thb-251-island.png"/>
12
  <SteamCard3D src="/images/steam-card/thb-252-swamp.png"/>
13
  <SteamCard3D src="/images/steam-card/thb-253-mountain.png"/>
14
  <SteamCard3D src="/images/steam-card/thb-254-forest.png"/>
15
</SteamCard3DDesk>

Book3D

错误
错误 
1
<Book3D cover="/images/book-cover/领域驱动设计.jpg" width="220px" height="290px" thickness="30px" color="#ea8722" />
2
<Book3D cover="/images/book-cover/阿里巴巴Java开发手册.jpg" width="140px" height="200px" thickness="15px" color="#ea8722" />

Tabs

移植自Startlight

Sirius, Vega, Betelgeuse

 
1
import Tabs from '@/components/User/Tab/Tabs.astro';
2
import TabItem from '@/components/User/Tab/TabItem.astro';
3


4
<Tabs>
5
  <TabItem label="Stars" icon="mdi:star">
6
    Sirius, Vega, Betelgeuse
7
  </TabItem>
8
  <TabItem label="Moons" icon="mdi:moon-waning-crescent">
9
    Io, Europa, Ganymede
10
  </TabItem>
11
</Tabs>