建议

使用mdx获取更丰富的功能

MDX扩展来源于 @astrojs/mdx MDX支持在Markdown中导入组件以JSX形式使用

展开详情

点击展开 展开之后即可看到这段内容

看到了吗?

友链@ Friend

这里是 @DORAKIKA 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

可用于展示一些链接,如书籍、视频、音频、博文等

DORAKIKA
这里是DORAKIKA
前往
grid布局实现自适应分栏组件
DORAKIKA
需求来自于博客写作的自定义组件,想实现一个用于分栏展示的组件,综合考虑之后选择了实现一个grid布局组件(除了实现基本的分栏外,还可用于其他常见grid布局)
阅读
云彩收集者手册
加文·普雷特·平尼
《云彩收集者手册》介绍了46种云彩和大气光学现象,并且收录了全世界云彩爱好者拍摄的百余幅精彩摄影作品。
查看
『 自然是一朵多变的云,始终一样,却从不一样 』

外框 Outline

说明

使用外框组件可以用于展示一些总结性内容,让内容突出显示

主题色

默认是主题色,可指定type为red、orange、yellow、green、blue、purple、pink、gray设定颜色。 Outline颜色类型会影响内部的主题色,所以如下链接变成了红色 在MDX中使用组件

嵌套

这是绿色(由于背景是有透明的,所以叠加之后可能会看上去不太像原来的颜色)

网格 Grid

这是蓝色

关于Outline

这是紫色,占了两行,当Outline为唯一的子元素时,会填满容器(此处为GridItem的唯一子元素)。你也可以不使用GridItem,如下方的灰色

这是黄色 ,使用GridItem包裹,会自动撑起内容

橙色

默认最小宽度为300px,可通过指定minWidth属性来设置最小宽度

粉色

当指定的多栏布局无法满足时,会自动处理;此处为4栏,可缩小窗口大小查看自适应效果.

有时,指定了GridItem横跨多列,但是小屏下无法满足最低宽度,会自动调整至1列布局导致此多列GridItem溢出。此时可指定Grid的minCol属性,来指定最小列数(优先级高于minWidth)

灰色

此处指定了最小列数为2列,所以即使小屏下,每一列不满足300px,依旧会保持2列布局

图片

嵌入网页

DORAKIKA
我是一个喜欢折腾的前端工程师,对一切新鲜事物充满好奇,希望我的文章能给你带来思考和帮助
👋我是DORAKIKA
分享作者『DORAKIKA』发表的文章『MDX 语法扩展』https://blog.dorakika.cn/post/20230210a/
© 请您在需要时著名本文内容来源信息,若在文末注明“参考、扩展”等字样涉及转载第三方内容,请您一同复制