这个页面的侧栏有什么不一样
注意右侧:除了默认的目录(toc),还多了两张卡片——它们都来自本页正文。这正是 rehype-meta-slots 插件的作用。
用法
在 Front matter 里声明 aside,列出侧栏要加载的组件名:
--- aside: [toc, meta-aside-demo, meta-aside-link] ---
然后在正文里用 ::meta-xxx 定义对应的内容:
::meta-aside-demo{title="从文章插入的组件" card}
这个块会被剪切到侧栏渲染。
::
::meta-copyright{title="本文章不保留版权"}
这里的内容会替换文章末尾的默认许可协议。
::
两类特殊插槽
meta-aside-*:注入到侧栏。命名需与aside数组中的名字对应。- 例如
::meta-aside-demo对应meta-aside-demo
- 例如
meta-copyright:注入到文章末尾的「许可协议」区块。- 不写时使用
blog.config.ts中的默认版权信息
- 不写时使用
命名规则
插件的规则很简单:凡是以 meta- 开头的块级组件,都会从正文中被「剪切」,按名字存入文章的插槽表,供侧栏或页脚按需取用。
适用场景
- 给某篇文章单独添加侧栏说明、相关链接或作者卡片
- 为特定文章覆盖默认的许可协议
- 在不修改全局组件的前提下,做「一篇文章一版」的定制
