[{"data":1,"prerenderedAt":465},["ShallowReactive",2],{"content:\u002F2026\u002Fcontent-components":3,"surround:\u002F2026\u002Fcontent-components":454},{"id":4,"title":5,"body":6,"categories":428,"date":318,"description":430,"draft":431,"extension":432,"image":433,"meta":434,"navigation":436,"path":437,"permalink":438,"published":438,"readingTime":439,"recommend":403,"references":438,"seo":444,"series":445,"sitemap":446,"stem":447,"tags":448,"type":452,"updated":318,"__hash__":453},"content\u002Fposts\u002F2026\u002Fcontent-components.md","内容组件图鉴",{"type":7,"value":8,"toc":399},"minimark",[9,13,18,24,47,69,78,82,96,103,113,117,133,139,142,146,168,172,190,194,215,221,225,245,249,269,272,276,285,288,291,295,305,309,320,324,327,330,334,340,347,351,355,359,364,367],[10,11,12],"h2",{"id":12},"提示类",[14,15,17],"h3",{"id":16},"alert","Alert",[16,19,20],{},[21,22,23],"p",{},"你好，我是默认提示。",[16,25,28],{"type":26,"title":27},"info","带标题的信息",[21,29,30,31,36,37,41,42,46],{},"默认插槽里支持 ",[32,33,35],"a",{"href":34},"#alert","链接","、",[38,39,40],"strong",{},"粗体"," 和 ",[43,44,45],"code",{"code":45},"行内代码","。",[16,48,51,58],{"type":49,":flat":50},"warning","true",[52,53,55],"template",{"v-slot:title":54},"",[21,56,57],{},"扁平风格",[21,59,60,61,64,65,68],{},"通过 ",[43,62,63],{"code":63},"flat"," 属性切换为扁平风格，",[43,66,67],{"code":67},"card"," 是默认的卡片风格。",[70,71,76],"pre",{"className":72,"code":74,"language":75,"meta":54},[73],"language-mdc","::alert{type=\"info\" title=\"带标题的信息\"}\n支持 [链接](#alert)、**粗体** 和 `行内代码`。\n::\n","mdc",[43,77,74],{"__ignoreMap":54},[14,79,81],{"id":80},"tip-quote","Tip \u002F Quote",[21,83,84,85,90,91,46],{},"行内小提示：:tip",[86,87,89],"span",{"tip":88},"鼠标悬浮时显示","我是一条小提示","，也可以没有图标 ",[92,93,95],"tip",{":icon":50,"tip":94},"纯文本","只有提示",[97,98,100],"quote",{"icon":99},"tabler:quote",[21,101,102],{},"引用组件可以自定义图标，图标也可以是 Emoji 或颜文字。",[97,104,105,110],{},[52,106,107],{"v-slot:icon":54},[21,108,109],{},"ヾ(•ω•`)o",[21,111,112],{},"图标插槽同样支持任意内容。",[14,114,116],{"id":115},"badge","Badge",[21,118,119,121,122,121,126,121,129],{},[115,120,94],{}," ",[115,123,125],{"link":124},"#badge","带链接",[115,127,128],{":square":50},"方形",[115,130,132],{"link":131},"https:\u002F\u002Fgithub.com\u002F24works","GitHub 头像自动识别",[70,134,137],{"className":135,"code":136,"language":75,"meta":54},[73],":badge[带链接]{link=\"#badge\"} :badge[方形]{square}\n",[43,138,136],{"__ignoreMap":54},[10,140,141],{"id":141},"布局类",[14,143,145],{"id":144},"tab","Tab",[144,147,149,160],{":tabs":148},"[\"组件\", \"语法\"]",[52,150,151,154],{"v-slot:tab1":54},[21,152,153],{},"选项卡用于在「效果」和「源码」之间切换，本站多处演示都用了它。",[155,156],"link-card",{"icon":157,"link":158,"title":159},"https:\u002F\u002Fcontent.nuxt.com\u002Ffavicon.ico","https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax","MDC 基本语法",[52,161,162],{"v-slot:tab2":54},[70,163,166],{"className":164,"code":165,"language":75,"meta":54},[73],"::tab{:tabs='[\"组件\", \"语法\"]'}\n#tab1\n第一个分页的内容\n#tab2\n第二个分页的内容\n::\n",[43,167,165],{"__ignoreMap":54},[14,169,171],{"id":170},"cardlist","CardList",[173,174,175],"card-list",{},[176,177,178],"ul",{},[179,180,181,182],"li",{},"把普通列表渲染成卡片\n",[176,183,184,187],{},[179,185,186],{},"支持多级嵌套",[179,188,189],{},"适合罗列特性",[14,191,193],{"id":192},"folding","Folding",[192,195,197,200],{":open":50,"title":196},"默认展开的折叠",[21,198,199],{},"折叠内部可以再次嵌套组件：",[16,201,203,208],{"type":202},"error",[52,204,205],{"v-slot:title":54},[21,206,207],{},"嵌套时注意缩进",[21,209,210,211,214],{},"在插槽内使用 ",[43,212,213],{"code":213},"#slot"," 语法必须正确缩进，否则会解析失败。",[70,216,219],{"className":217,"code":218,"language":75,"meta":54},[73],"::folding{open title=\"默认展开的折叠\"}\n内容……\n::\n",[43,220,218],{"__ignoreMap":54},[14,222,224],{"id":223},"timeline","Timeline",[223,226,227,230,233,236,239,242],{},[21,228,229],{},"{第一步}",[21,231,232],{},"安装依赖并初始化项目。",[21,234,235],{},"{第二步}",[21,237,238],{},"填写站点配置与内容。",[21,240,241],{},"{第三步}",[21,243,244],{},"构建并部署。",[14,246,248],{"id":247},"chat","Chat",[247,250,251,254,257,260,263,266],{},[21,252,253],{},"{:2026-10-03 09:20:00}",[21,255,256],{},"{.}",[21,258,259],{},"这个组件可以还原即时通讯的排版。",[21,261,262],{},"{.纸鹿}",[21,264,265],{},"还支持昵称和撤回提示。",[21,267,268],{},"{:纸鹿撤回了一条消息}",[10,270,271],{"id":271},"交互类",[14,273,275],{"id":274},"copy","Copy",[21,277,278,284],{},[43,279,282],{"className":280,"code":282,"copy":54,"language":283},[281],"language-sh","pnpm init-project","sh"," 这样带复制按钮的行内代码，也可以做成整块命令：",[274,286],{"code":287},"pnpm init-project # 输入 confirm 确认",[274,289],{"code":290,":prompt":50},"https:\u002F\u002Fcdemo.iicemeta.com\u002Fatom.xml",[14,292,294],{"id":293},"key","Key",[21,296,297,298,301,302,46],{},"按 ",[38,299,300],{},"Ctrl \u002F Cmd + K"," 可以唤起全站搜索，键位提示就是 Key 组件渲染的：:key{code=\"Control\" icon} ",[293,303],{"code":304},"K",[14,306,308],{"id":307},"emojiclock","EmojiClock",[21,310,311,312,315,316,319],{},"现在大概几点？:emoji-clock (半小时) ",[313,314],"emoji-clock",{":rotate":50}," (五分钟) ",[313,317],{"dateTime":318},"2026-10-03 09:20:00"," (指定时间)",[14,321,323],{"id":322},"blur","Blur",[322,325,326],{},"被遮住的文字，鼠标悬浮才能看清。",[10,328,329],{"id":329},"链接与图片",[14,331,333],{"id":332},"linkcard-linkbanner","LinkCard \u002F LinkBanner",[155,335],{"icon":336,"link":337,"title":338,"description":339},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fcard\u002F100","#linkcard","卡片式链接","适合放在正文里指向站内外资源。",[341,342],"link-banner",{"banner":343,"description":344,"link":345,"title":346},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fbanner\u002F960\u002F360","带封面图的链接，适合放在文章开头。","#linkbanner","横幅式链接",[14,348,350],{"id":349},"pic","Pic",[349,352],{"caption":353,"src":354},"图片组件支持说明文字，点击可打开灯箱缩放。","https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fpic\u002F960\u002F480",[14,356,358],{"id":357},"videoembed","VideoEmbed",[360,361],"video-embed",{"id":362,"type":363},"BV1Yr421p7rW","bilibili",[10,365,366],{"id":366},"更多组件",[21,368,369,370,373,374,36,377,36,380,36,383,36,386,36,389,36,392,36,395,398],{},"除上述组件外，",[43,371,372],{"code":372},"app\u002Fcomponents"," 下还有一些「微型组件」，可在 MDC 或 Vue 模板中按需使用：",[43,375,376],{"code":376},"Slider",[43,378,379],{"code":379},"Toggle",[43,381,382],{"code":382},"Dropdown",[43,384,385],{"code":385},"Expand",[43,387,388],{"code":388},"RadioGroup",[43,390,391],{"code":391},"DlGroup",[43,393,394],{"code":394},"Secret",[43,396,397],{"code":397},"Button"," 等。它们的用法可以在源码中找到，日常写文时向上面的常用组件看齐即可。",{"title":54,"searchDepth":400,"depth":400,"links":401},4,[402,409,416,422,427],{"id":12,"depth":403,"text":12,"children":404},2,[405,407,408],{"id":16,"depth":406,"text":17},3,{"id":80,"depth":406,"text":81},{"id":115,"depth":406,"text":116},{"id":141,"depth":403,"text":141,"children":410},[411,412,413,414,415],{"id":144,"depth":406,"text":145},{"id":170,"depth":406,"text":171},{"id":192,"depth":406,"text":193},{"id":223,"depth":406,"text":224},{"id":247,"depth":406,"text":248},{"id":271,"depth":403,"text":271,"children":417},[418,419,420,421],{"id":274,"depth":406,"text":275},{"id":293,"depth":406,"text":294},{"id":307,"depth":406,"text":308},{"id":322,"depth":406,"text":323},{"id":329,"depth":403,"text":329,"children":423},[424,425,426],{"id":332,"depth":406,"text":333},{"id":349,"depth":406,"text":350},{"id":357,"depth":406,"text":358},{"id":366,"depth":403,"text":366},[429],"功能演示","挑出 Clarity 常用的内容组件，给出实景效果与 MDC 写法，方便在文章里直接取用。",false,"md","\u002Fcovers\u002Fcontent-components.jpg",{"slots":435},{},true,"\u002F2026\u002Fcontent-components",null,{"text":440,"minutes":441,"time":442,"words":443},"3 min read",2.56,153600,512,{"title":5,"description":430},"Clarity 功能地图",{"loc":437},"posts\u002F2026\u002Fcontent-components",[449,450,451],"组件","MDC","排版","tech","EEAPHs6onSmRkBbp9F8KGGTH_5kJzOvJnev_V8PvKjs",[455,460],{"title":456,"path":457,"stem":458,"date":459,"type":452,"children":-1},"MDC 语法速览","\u002F2026\u002Fmdc-syntax","posts\u002F2026\u002Fmdc-syntax","2026-10-03 09:10:00",{"title":461,"path":462,"stem":463,"date":464,"type":452,"children":-1},"文章分类","\u002F2026\u002Fcategories","posts\u002F2026\u002Fcategories","2026-10-03 09:30:00",1791033609858]