Nuxt
学习如何利用 Nuxt 的页面和布局系统，在 Movk Nuxt Docs 中构建交互式和可重用的元素，以增强您的文档网站。
Vue 页面
Movk Nuxt Docs 提供了三个内置页面：
pages/index.vue：首页pages/releases.vue：发布日志页面pages/docs/[...slug].vue：文档页面
您可以通过在 app/pages/ 目录下创建 Vue 文件来添加自定义页面。例如，创建一个简单的 hello.vue 页面：
app/pages/hello.vue
<script setup lang="ts">
definePageMeta({
layout: 'default',
// 移除头部
header: false,
// 移除页脚
footer: false,
})
</script>
扩展页面
您可以通过以下配置定义一个 releases 页面：
content.config.ts
import { defineCollection, defineContentConfig, z, property } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'
export default defineContentConfig({
collections: {
releases: defineCollection(asSeoCollection({
type: 'page',
source: 'releases.yml',
schema: z.object({
releases: z.string(),
hero: property(z.object({})).inherit('@nuxt/ui/components/PageHero.vue')
})
}))
}
})
布局
Movk Nuxt Docs 提供了两个内置布局：
default布局：用于首页和自定义 Vue 页面docs布局：用于文档页面
如果您想使用不同的布局，可以在 app/layouts/ 目录下创建。
app/layouts/custom.vue
<template>
<main class="custom-layout">
<slot />
</main>
</template>