• Markdown 插槽
    • 为什么需要 Markdown 插槽
    • 具名插槽
    • 插槽的默认内容
    • 例子

    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 的唯一性。