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>
自动路由
Movk Nuxt Docs 内置了自动路由功能，无需手动扩展页面。系统会自动检测 content/ 目录下的特定文件并创建对应路由。
Releases 页面
系统会自动检测 content/releases.yml 或 content/releases.md 文件，并创建 /releases 路由。
生成
/releases 路由后，可以在导航栏中添加链接。app/composables/useHeader.ts
const desktopLinks = computed(() => [{
label: '文档',
to: '/docs/getting-started',
active: route.path.startsWith('/docs/')
}, {
+ label: '版本发布',
+ to: '/releases'
}])
Releases 页面支持三种使用模式：
1. 自动获取模式 (YAML/Markdown)
仅配置 API 地址，自动从 GitHub 获取发布记录。
content/releases.yml
title: 版本发布
description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
navigation: false
releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases
hero:
title: 版本发布
description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
links:
- label: 在 GitHub 上标星
color: neutral
variant: outline
to: https://github.com/mhaibaraai/movk-nuxt-docs
target: _blank
icon: i-lucide-star
2. 自定义内容模式 (Markdown)
使用 Markdown 手动编写发布说明，不依赖外部 API。
content/releases.md
---
title: 自定义发布日志
description: 手动维护的更新记录
---
## 1.8.0 (2026-01-21)
[查看完整变更](https://github.com/mhaibaraai/movk-nuxt-docs/compare/v1.7.5...v1.8.0)
### ✨ Features
* **图表渲染：** 添加 Mermaid 图表支持 ([bc8c35a](https://github.com/mhaibaraai/movk-nuxt-docs/commit/bc8c35a))
- 支持流程图、时序图、类图、状态图、饼图、甘特图、实体关系图等
- 自动主题切换（深色/浅色模式）和懒加载优化
- 支持复制代码、全屏查看功能
### 📦 Build System
* 添加 mermaid 依赖 ([bc8c35a](https://github.com/mhaibaraai/movk-nuxt-docs/commit/bc8c35a8795c405b7653bb820536ebc4c1d267e8))
3. 混合模式 (Markdown + API)
同时显示自定义 Markdown 内容和自动获取的发布列表。Markdown 内容将显示在列表上方。
content/releases.md
---
title: 混合模式更新日志
description: 自定义内容与自动获取的结合
navigation: false
releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases
hero:
title: 版本发布
description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
---
## 欢迎查看更新
以下是手动维护的发布日志，记录了 Movk Nuxt Docs 的最新变化和改进。
优先级说明：
系统优先查找
查看 releases 模板源代码releases.md，不存在时使用 releases.yml。releases (API URL) 和 hero 字段均为可选。自定义页面
如果需要完全自定义的页面，可以在 app/pages/ 目录下创建 Vue 文件：
app/pages/custom.vue
<script setup lang="ts">
definePageMeta({
layout: 'default',
header: false, // 隐藏头部
footer: false // 隐藏页脚
})
</script>
<template>
<div>
<!-- 自定义页面内容 -->
</div>
</template>
布局
Movk Nuxt Docs 提供了两个内置布局：
default布局：用于首页和自定义 Vue 页面docs布局：用于文档页面
如果您想使用不同的布局，可以在 app/layouts/ 目录下创建。
app/layouts/custom.vue
<template>
<main class="custom-layout">
<slot />
</main>
</template>