app.config.ts 和 nuxt.config.ts 文件自定义您的 Movk Nuxt Docs 文档，涵盖 SEO、头部、页脚、目录及 GitHub 集成等。Movk Nuxt Docs 允许您通过 Nuxt 提供的 app.config.ts 文件来配置您的文档。
nuxt.config.ts 文件。否则，您的更改将不会生效。在 app.config.ts 文件中为您的整个文档定义默认的 SEO 元数据。
您还可以从 nuxt.config.ts 文件配置 site.name，其默认值基于您 package.json 中的 name 字段。
export default defineAppConfig({
seo: {
// 默认为 `%s - ${site.name}`
titleTemplate: '',
// 默认为 package.json 的 name 字段
title: '',
// 默认为 package.json 的 description 字段
description: '',
},
})
export default defineNuxtConfig({
site: {
name: 'Movk Nuxt Docs',
},
})
content/ 目录中的每个 Markdown 文件都以一个 Front-Matter 块 (---) 开头。您可以通过 seo 键为每个页面单独定义 SEO 元数据：
---
seo:
title: '配置'
description: '通过 Nuxt 应用配置文件自定义您的 Movk Nuxt Docs 文档。'
---
<!-- 页面内容 -->
export default defineAppConfig({
header: {
title: '', // 标题
to: '/', // 标题链接
search: true, // 显示搜索栏
colorMode: true, // 显示颜色模式切换器
links: ButtonProps[], // 头部链接按钮
},
})
export default defineAppConfig({
footer: {
// 版权信息
credits: `Copyright © 2024 - ${new Date().getFullYear()} YiXuan - <span class="text-highlighted">MIT License</span>`,
// 页脚社交媒体图标链接
socials: [
{
icon: 'i-lucide-brain',
to: 'https://docs.mhaibaraai.cn/llms.txt',
target: '_blank',
label: 'Open LLMs',
},
],
},
})
您可以自定义每个页面右侧的内容目录（Table of Contents）。
export default defineAppConfig({
toc: {
// 自定义目录标题
title: '本页内容',
// 在目录底部添加一个区域
bottom: {
title: '社区',
links: [{
icon: 'i-lucide-book-open',
label: 'Nuxt UI 文档',
to: 'https://ui.nuxt.com/getting-started/installation/nuxt',
target: '_blank',
}],
},
},
})
Movk Nuxt Docs 使用 git-url-parse 来获取您仓库的 url 和 branch，以便添加以下功能：
您可以通过在 app.config.ts 文件中添加以下配置，来自定义文档应用的 url、branch 和 rootDir：
export default defineAppConfig({
github: {
branch: 'main',
rootDir: 'docs',
},
})
如果您不希望使用 GitHub 集成，可以将 github 键设置为 false 来禁用它。
export default defineAppConfig({
github: false,
})
useHeader通过 composables/useHeader 可组合项，您可以访问并自定义 Movk Nuxt Docs 头部的配置。
export function useHeader() {
const route = useRoute()
const desktopLinks = computed(() => [{
label: '文档',
to: '/docs/getting-started',
active: route.path.startsWith('/docs/'),
}, {
label: '发布版本',
to: '/releases',
}])
const mobileLinks = computed(() => [{
label: '快速开始',
icon: 'i-lucide-square-play',
to: '/docs/getting-started',
active: route.path.startsWith('/docs/getting-started'),
}, {
label: '基础',
icon: 'i-lucide-book-open',
to: '/docs/essentials',
active: route.path.startsWith('/docs/essentials'),
}, {
label: 'Composables',
icon: 'i-lucide-square-function',
to: '/docs/composables',
active: route.path.startsWith('/docs/composables'),
}, {
label: '发布版本',
icon: 'i-lucide-newspaper',
to: '/releases',
}, {
label: 'GitHub',
to: 'https://github.com/mhaibaraai/movk-nuxt-docs',
icon: 'i-simple-icons-github',
target: '_blank',
}])
return {
desktopLinks,
mobileLinks,
}
}
useCategory通过 composables/useCategory 可组合项，您可以为 docs 目录下的页面定义分类。
export function useCategory() {
const categories = {
'getting-started': [
{
id: 'core-concepts',
title: '核心概念',
icon: 'i-lucide-settings'
}
],
'components': [
{
id: 'components',
title: 'Components',
icon: 'i-lucide-layout-dashboard'
},
{
id: 'example',
title: 'Example',
icon: 'i-lucide-box'
}
]
}
return {
categories
}
}