自定义布局开发

内置布局不满足时，可以在项目 layouts/ 目录写自己的 Vue 布局组件。自定义布局是"代码定制排版"的入口，也是主题的基础。

layouts 目录约定

在项目根目录创建 layouts/，其中每个 .vue 文件就是一个布局，文件名即布局名：

my-deck/
└── layouts/
    ├── my-cover.vue        # 布局名：my-cover
    ├── two-columns.vue     # 布局名：two-columns
    └── stats.vue           # 布局名：stats

使用方式与内置布局一致：

---
layout: my-cover
---

# 自定义封面

Vue 组件编写

自定义布局是标准 Vue 单文件组件，通过 <slot /> 接收 Markdown 内容：

<template>
  <div class="my-cover">
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>

<style>
.my-cover {
  height: 100%;
  padding: 4rem;
}
</style>

• <slot />（默认插槽）：接收幻灯片正文
• <slot name="header" />（具名插槽）：接收 ::header:: 内容
• 组件内可写模板、脚本与样式

插槽系统

Markdown 侧的插槽与布局组件的插槽一一对应：

---
layout: my-cover
---

::header::

# 自定义标题区

::

正文内容进入默认插槽。

<template>
  <div class="layout">
    <div class="header">
      <slot name="header" />
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

插槽映射表

Markdown 写法	布局组件
直接正文	<slot />
::header::	<slot name="header" />
::left::	<slot name="left" />
::right::	<slot name="right" />

自定义插槽名按需定义，内置布局常见的 left、right、top、bottom 都可自定义。

布局接收 Frontmatter 属性

布局可以通过 props 接收页级 Frontmatter 中的自定义字段：

---
layout: stats
number: 99.99
unit: %
---

# 可用性指标

<script setup>
defineProps({
  number: { type: String, default: '0' },
  unit: { type: String, default: '' },
})
</script>

<template>
  <div class="stats">
    <span class="number">{{ number }}{{ unit }}</span>
    <slot />
  </div>
</template>

Markdown 中的 Frontmatter 字段自动作为 props 传给布局组件。

布局复用与共享

项目内复用

---
layout: stats
number: 12000
---

# 并发连接数

---
layout: stats
number: 3
unit: 倍
---

# 性能提升

同一个 stats 布局传入不同数据即得到不同页面。

跨项目共享

方式	做法
复制文件	把 layouts/ 拷贝到新项目
打包主题	布局放入主题包的 layouts/ 目录
组件库	用插件（addons）分发布局

自定义布局放进主题后，可以像内置布局一样在多个演示中复用。

开发建议

建议	说明
命名小写连字符	布局文件名即布局名，保持 kebab-case
样式加前缀	自定义类名加项目前缀，避免与主题冲突
预留默认插槽	保证正文内容始终可渲染
用 props 传数据	Frontmatter 字段驱动布局变化

掌握自定义布局后，项目的排版风格可以由你自己完全定义，这也是进入主题开发的必经一步。