使用mdx获取更丰富的功能
MDX扩展来源于 @astrojs/mdx MDX支持在Markdown中导入组件以JSX形式使用
展开详情
点击展开
展开之后即可看到这段内容
看到了吗？
友链@ Friend
这里是 @DORAKIKA 
DORAKIKA 热爱漫无边际，生活自有分寸！ 的博客。友链中没有找到则像普通超链接： @某人 。
代码块
const a = 1
const b = a;
console.log(b);标签页 Tab
这是标签页内容，pane后面的面名字需要和tab后面的名字一致
<Tabs active="alsoAName">
<Fragment slot="tab.name">这是一个标签页标题</Fragment>
<Fragment slot="tab.alsoAName">写在tab.后面</Fragment>
<Fragment slot="tab.tab名">最后一个</Fragment>
<Fragment slot="pane.name">
这是标签页内容，pane后面的面名字需要和tab后面的名字一致
</Fragment>
<Fragment slot="pane.alsoAName">
这是标签页2
</Fragment>
<Fragment slot="pane.tab名">
这是标签页3
</Fragment>
</Tabs>这是标签页3
嵌套测试
1
2
3
1
2
3
1
2
3
链接卡片 LinkCard
可用于展示一些链接，如书籍、视频、音频、博文等
外框 Outline
使用外框组件可以用于展示一些总结性内容，让内容突出显示
默认是主题色，可指定type为red、orange、yellow、green、blue、purple、pink、gray设定颜色。 Outline颜色类型会影响内部的主题色，所以如下链接变成了红色 在MDX中使用组件
这是绿色（由于背景是有透明的，所以叠加之后可能会看上去不太像原来的颜色）
网格 Grid
这是蓝色
这是紫色，占了两行，当Outline为唯一的子元素时，会填满容器（此处为GridItem的唯一子元素）。你也可以不使用GridItem，如下方的灰色
这是黄色 ,使用GridItem包裹，会自动撑起内容
默认最小宽度为300px，可通过指定minWidth属性来设置最小宽度
当指定的多栏布局无法满足时，会自动处理;此处为4栏，可缩小窗口大小查看自适应效果.
有时，指定了GridItem横跨多列，但是小屏下无法满足最低宽度，会自动调整至1列布局导致此多列GridItem溢出。此时可指定Grid的minCol属性，来指定最小列数（优先级高于minWidth）
此处指定了最小列数为2列，所以即使小屏下，每一列不满足300px，依旧会保持2列布局
图片
嵌入网页
其他
Bento Card
写一个Bento Card 组件
最近经常看到这种风格的站点和设计，就抄过来啦
