Layout
框架 API 目前默认支持以下布局，布局支持与最终表现通常与主题有关。
post：文章布局tags：标签布局archives：归档布局categories：分类布局collections：合集布局
使用布局
合集布局
新建总览页 pages/collections/index.md，并指定布局为 collections。
collections: 合集列表，须指定唯一合集 ID。
md
---
layout: collections
icon: i-ri-gallery-view
collections:
- hamster
- love-and-peace
---新建合集文件夹 pages/collections/hamster/：
index.md：合集总览页，指定布局为collection。index.ts：合集配置文件。1.md：合集中的第一篇文章。
新建合集入口页 pages/collections/hamster/index.md，并指定布局为 collection。
md
---
layout: collection
---定义当前合集信息：
ts
import { defineCollection } from 'valaxy'
export default defineCollection({
key: 'hamster',
title: '仓鼠',
cover: 'https://cover.sli.dev',
description: 'The story of I and She',
items: [
{
title: '第一章 仓鼠的笼子',
// 文章唯一索引，对应路径为 `pages/collections/hamster/1.md`
key: '1',
},
{
title: '第二章 白昼之光，岂知夜色之深。',
key: '2',
},
{
title: '第三章 作茧自缚',
key: '3',
},
]
})新建合集中文章：
layout: collection可省略，pages/collections/目录下的所有文章默认使用collection布局。
md
---
title: 第一章 仓鼠的笼子
layout: collection
---效果预览：合集｜Valaxy Theme Yun
实现布局
如 valaxy-theme-yun 自 v0.25.9 支持了 collections 布局。
按约定，主题需要在 layouts 目录下创建对应的布局文件，文件名与布局名称相同。
在主题中，你可以使用以下合集相关 API。
useCollectionsAPI 获取合集列表。useCollectionAPI 获取单个合集（根据路径判断当前合集 ID）。
vue
<script setup lang="ts">
import { useCollections, useFrontmatter, useValaxyI18n } from 'valaxy'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const { $tO } = useValaxyI18n()
const fm = useFrontmatter()
const { collections } = useCollections()
</script>
<template>
<YunLayoutWrapper>
<YunLayoutLeft />
<RouterView v-slot="{ Component }">
<component :is="Component">
<template #main-header>
<YunPageHeader
:title="$tO(fm.title) || t('menu.collections')"
:icon="fm.icon"
:page-title-class="fm.pageTitleClass"
/>
</template>
<template #main-content>
<div flex="~ wrap" gap="6">
<YunCollectionItem
v-for="collection in collections"
:key="collection.key"
:collection="collection"
/>
</div>
</template>
</component>
</RouterView>
</YunLayoutWrapper>
<YunFooter />
</template>FAQ
子页面发生了多层布局嵌套
Child pages with multiple layout nesting
Unplugin Vue Router 的页面会自动嵌套父级布局，请参考 Nested Routes｜Unplugin Vue Router。
例如将：
pages/users/create.vue 修改为 pages/users.create.vue。
Unplugin Vue Router pages will automatically nest parent layouts, please refer to Nested Routes｜Unplugin Vue Router.
For example, change:
pages/users/create.vue to pages/users.create.vue.