Markdown 插槽

VuePress 实现了一套针对 Markdown 的内容分发 API。通过这个特性，你可以将你的文档分割成多个片段，以便于在布局组件中灵活组合。

为什么需要 Markdown 插槽

首先，我们回顾一下布局组件和 Markdown 文件之间的关系：

Markdown File 1Markdown File 2LayoutComponentMarkdown File 3ProviderConsumer

Markdown 文件是元数据（页面内容、配置等）的提供者，而布局组件负责消费他们。我们可以通过 frontmatter 来定义一些普通数据类型的元数据，但对于 Markdown / HTML 这种涉及到编译前后差异的复杂元数据，frontmatter 却无能能力。

Markdown 插槽便解决了这一类问题。

具名插槽

你可以通过下述的语法来定义一个具名 Markdown 插槽：

  1. ::: slot name
  3. :::

在布局组件中利用 Content 组件来使用该插槽：

  1. <Content slot-key="name"/>

提示

这里我们使用的是 slot-key 而不是 slot，这是因为在 Vue 中，slot 是一个保留的 prop 名。

插槽的默认内容

默认情况下，一个 Markdown 文件中的普通内容将会成为 Markdown 插槽的默认内容，你可以直接使用 Content 组件来访问它：

  1. <Content/>

例子

假设你的布局组件如下：

  1. <template>
  2.   <div class="container">
  3.     <header>
  4.       <Content slot-key="header"/>
  5.     </header>
  6.     <main>
  7.       <Content/>
  8.     </main>
  9.     <footer>
  10.       <Content slot-key="footer"/>
  11.     </footer>
  12.   </div>
  13. </template>

如果一个页面的 markdown 的内容是这样：

  1. ::: slot header
  2. # Here might be a page title
  3. :::
  5. - A Paragraph
  6. - Another Paragraph
  8. ::: slot footer
  9. Here's some contact info
  10. :::

那么这一页最终被渲染出的 HTML 将会是：

  1. <div class="container">
  2.   <header>
  3.     <div class="content header">
  4.       <h1>Here might be a page title</h1>
  5.     </div>
  6.   </header>
  7.   <main>
  8.     <div class="content default">
  9.       <ul>
  10.         <li>A Paragraph</li>
  11.         <li>Another Paragraph</li>
  12.       </ul>
  13.     </div>
  14.   </main>
  15.   <footer>
  16.     <div class="content footer">
  17.       <p>Here's some contact info</p>
  18.     </div>
  19.   </footer>
  20. </div>

请注意：

  • 和 Vue 本身提供的 slot 机制不太相同，每个 Content 分发的内容都会被一个 div 所包裹，其 class 是 content 和 slot 的名字。
  • 请确保所定义的 slot 的唯一性。