[{"data":1,"prerenderedAt":236},["ShallowReactive",2],{"content:\u002F2026\u002Faside-slots":3,"surround:\u002F2026\u002Faside-slots":225},{"id":4,"title":5,"body":6,"categories":150,"date":152,"description":153,"draft":154,"extension":155,"image":156,"meta":157,"navigation":207,"path":208,"permalink":209,"published":209,"readingTime":210,"recommend":209,"references":209,"seo":215,"series":216,"sitemap":217,"stem":218,"tags":219,"type":223,"updated":152,"__hash__":224},"content\u002Fposts\u002F2026\u002Faside-slots.md","侧栏插槽与文章内插槽",{"type":7,"value":8,"toc":142},"minimark",[9,13,31,34,41,51,58,66,69,116,128,131],[10,11,12],"h2",{"id":12},"这个页面的侧栏有什么不一样",[14,15,16,17,21,22,26,27,30],"p",{},"注意右侧：除了默认的目录（",[18,19,20],"code",{"code":20},"toc","），还多了两张卡片——它们都来自",[23,24,25],"strong",{},"本页正文","。这正是 ",[18,28,29],{"code":29},"rehype-meta-slots"," 插件的作用。",[10,32,33],{"id":33},"用法",[14,35,36,37,40],{},"在 Front matter 里声明 ",[18,38,39],{"code":39},"aside","，列出侧栏要加载的组件名：",[42,43,49],"pre",{"className":44,"code":46,"language":47,"meta":48},[45],"language-yaml","---\naside: [toc, meta-aside-demo, meta-aside-link]\n---\n","yaml","",[18,50,46],{"__ignoreMap":48},[14,52,53,54,57],{},"然后在正文里用 ",[18,55,56],{"code":56},"::meta-xxx"," 定义对应的内容：",[42,59,64],{"className":60,"code":62,"language":63,"meta":48},[61],"language-mdc","::meta-aside-demo{title=\"从文章插入的组件\" card}\n这个块会被剪切到侧栏渲染。\n::\n\n::meta-copyright{title=\"本文章不保留版权\"}\n这里的内容会替换文章末尾的默认许可协议。\n::\n","mdc",[18,65,62],{"__ignoreMap":48},[10,67,68],{"id":68},"两类特殊插槽",[70,71,72],"card-list",{},[73,74,75,99],"ul",{},[76,77,78,83,84,86,87],"li",{},[23,79,80],{},[18,81,82],{"code":82},"meta-aside-*","：注入到侧栏。命名需与 ",[18,85,39],{"code":39}," 数组中的名字对应。\n",[73,88,89],{},[76,90,91,92,95,96],{},"例如 ",[18,93,94],{"code":94},"::meta-aside-demo"," 对应 ",[18,97,98],{"code":98},"meta-aside-demo",[76,100,101,106,107],{},[23,102,103],{},[18,104,105],{"code":105},"meta-copyright","：注入到文章末尾的「许可协议」区块。\n",[73,108,109],{},[76,110,111,112,115],{},"不写时使用 ",[18,113,114],{"code":114},"blog.config.ts"," 中的默认版权信息",[117,118,121],"alert",{"title":119,"type":120},"命名规则","info",[14,122,123,124,127],{},"插件的规则很简单：凡是以 ",[18,125,126],{"code":126},"meta-"," 开头的块级组件，都会从正文中被「剪切」，按名字存入文章的插槽表，供侧栏或页脚按需取用。",[10,129,130],{"id":130},"适用场景",[73,132,133,136,139],{},[76,134,135],{},"给某篇文章单独添加侧栏说明、相关链接或作者卡片",[76,137,138],{},"为特定文章覆盖默认的许可协议",[76,140,141],{},"在不修改全局组件的前提下，做「一篇文章一版」的定制",{"title":48,"searchDepth":143,"depth":143,"links":144},4,[145,147,148,149],{"id":12,"depth":146,"text":12},2,{"id":33,"depth":146,"text":33},{"id":68,"depth":146,"text":68},{"id":130,"depth":146,"text":130},[151],"功能演示","2026-10-03 10:30:00","通过 rehype-meta-slots 插件，文章可以把组件注入到文章末尾与侧栏。本文演示其用法。",false,"md","\u002Fcovers\u002Faside-slots.jpg",{"aside":158,"slots":160},[20,98,159],"meta-aside-link",{"aside-demo":161,"aside-link":183,"copyright":192},{"props":162,"type":7,"value":165},{":card":163,"card":48,"title":164},"true","从文章插入的组件",[166,169,176],[14,167,168],{},"这是一个由文章正文注入到侧栏的组件。它写在正文里，却渲染在页面侧栏中。",[14,170,171,172,175],{},"通过 ",[18,173,174],{"code":174},"aside: [toc, meta-aside-demo, meta-aside-link]"," 声明侧栏要使用哪些组件。",[14,177,178,179],{},"虽然一般情况下， ",[180,181,182],"blur",{},"文章侧栏并不需要这么复杂",{"props":184,"type":7,"value":185},{},[186],[187,188],"link-card",{"icon":189,"link":190,"title":191},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fslot\u002F100","https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax","侧栏里的链接卡片",{"props":193,"type":7,"value":195},{"title":194},"本文章不保留版权",[196],[14,197,171,198,206],{},[199,200,205],"a",{"href":201,"icon":202,"rel":203},"https:\u002F\u002Fcreativecommons.org\u002Fpublicdomain\u002Fzero\u002F1.0\u002Fdeed.zh-hans","ri:creative-commons-zero-line",[204],"nofollow","CC0 1.0"," 贡献至公共领域。",true,"\u002F2026\u002Faside-slots",null,{"text":211,"minutes":212,"time":213,"words":214},"2 min read",1.88,112800,376,{"title":5,"description":153},"Clarity 功能地图",{"loc":208},"posts\u002F2026\u002Faside-slots",[220,221,222],"插槽","meta-slots","侧栏","tech","CWkQq0_OBrJI8yZHfySodIKONMacDO4GyT4D1D2-06I",[226,231],{"title":227,"path":228,"stem":229,"date":230,"type":223,"children":-1},"公式、图表与乐谱","\u002F2026\u002Fmath-charts-music","posts\u002F2026\u002Fmath-charts-music","2026-10-03 10:20:00",{"title":232,"path":233,"stem":234,"date":235,"type":223,"children":-1},"站点配置与个性化","\u002F2026\u002Fsite-config","posts\u002F2026\u002Fsite-config","2026-10-03 10:40:00",1791033609858]