Nuxt
学习在 Movk Nuxt Docs 中利用 Nuxt 页面和布局系统，包括创建自定义 Vue 页面、配置 Releases 自动路由、三种 Releases 页面模式（YAML/Markdown/混合）、Templates 模板展示页，以及内置 default 和 docs 布局的使用方法。
Vue 页面
Movk Nuxt Docs 提供了三个内置页面：
pages/index.vue：首页pages/releases.vue：发布日志页面pages/templates.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 字段均为可选。Templates 页面 v2+
系统会自动检测 content/templates.yml 或 content/templates.md 文件，并创建 /templates 路由，用于以卡片形式展示模板或真实案例站点。
生成
/templates 路由后，可以在导航栏中添加链接。app/composables/useHeader.ts
const desktopLinks = computed(() => [{
label: '文档',
to: '/docs/getting-started',
active: route.path.startsWith('/docs/')
}, {
+ label: '案例',
+ to: '/templates'
}])
每个 items 条目支持 title、description、features（带图标的特性列表）与 links（普通链接按钮）。
content/templates.yml
title: 案例展示
description: 这些站点均由 Movk Nuxt Docs 构建，展示该主题在真实项目中的应用。
navigation: false
hero:
title: 案例展示
description: 这些站点均由 Movk Nuxt Docs 构建，展示该主题在真实项目中的应用。
items:
- title: mhaibaraai.cn
description: 技术博客和知识库站点。
features:
- title: 技术博客
icon: i-lucide-notebook
- title: 知识库
icon: i-lucide-library
links:
- label: 访问站点
to: https://mhaibaraai.cn
target: _blank
icon: i-lucide-link
截图约定：
卡片右侧截图按
查看 templates 模板源代码/assets/templates/{slug}-light.png 与 /assets/templates/{slug}-dark.png 约定加载，slug 由 title 转换而来（小写、非字母数字转 -）。例如 @movk/core 对应 movk-core-light.png / movk-core-dark.png，请放置于 public/assets/templates/ 目录。系统优先查找 templates.md，不存在时使用 templates.yml。自定义页面
如果需要完全自定义的页面，可以在 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>