Nuxt Studio
自定义应用配置编辑
了解如何通过提供 schema 在 Studio 中定制应用配置编辑。确保顺畅且结构化的内容管理体验。
进入编辑器的 Config 选项卡时，您可以浏览配置以定制您的网站。这些配置代表您在 app.config.ts 文件中定义的设置。
app.config.ts
app.config.ts 文件是 Nuxt 3 引入的配置文件。它是一个 TypeScript 文件，允许您配置应用的各个方面。开发者可以轻松地使用此文件将任何网站转换为可配置的体验。
自定义编辑
确保您的应用中至少有一个空的配置文件。
app.config.ts
export default defineAppConfig({})
要在 Studio 中为您的 app.config.ts 创建定制的编辑体验，需要在项目中创建一个 nuxt.schema.ts 文件。该 schema 用于表示您的 app.config.ts。
辅助方法
这些辅助方法由 Nuxt Content 的
Preview API 提供。group方法用于定制父对象。field方法用于定制输入（即叶子节点）。
nuxt.schema.ts
import { field, group } from '@nuxt/content/preview'
export default defineNuxtSchema({
appConfig: {
parent: group({
title: '父级标题',
description: '父级描述。',
icon: 'i-icon-to-display',
fields: {
leaf: field({
type: '用于编辑该字段的组件类型',
title: '字段标题',
description: '字段描述',
icon: 'i-icon-to-display',
default: '默认值'
})
}
})
}
})
无需必须包含所有的应用配置键；只需添加那些您希望在 Studio 界面展示的字段即可。
输入类型
field() 方法第一个参数中的 type 可接受多种值：
- string
- number
- boolean
- array
- object
- icon
- media
基于这些类型，Studio UI 会适配显示相应的输入类型。例如，icon 类型会显示图标选择器， media 类型会展示媒体库。
如果您在 field() 方法中提供 required 字段，文本输入可以显示为下拉选择而非传统输入框：
nuxt.schema.ts
import { field, group } from '@nuxt/content/preview'
export default defineNuxtSchema({
appConfig: {
parent: group({
title: 'UI',
description: 'UI 配置',
icon: 'i-ph-palette-fill',
fields: {
primary: field({
type: 'string',
title: '主色',
description: '您的 UI 主色。',
icon: 'i-ph-palette',
default: 'sky',
required: ['sky', 'mint', 'rose', 'amber']
})
}
})
}
})
在 Studio 中编辑
一旦您的 schema 部署完成，任何用户都可以访问 Data 区域，使用生成的表单进行操作。
表单中的任何更新都会直接应用到 app.config.ts 文件。您可以在审查页面查看这些更改。
export default defineNuxtSchema({
ui: group({
title: 'UI',
description: 'UI 自定义。',
icon: 'i-mdi-palette-outline',
fields: {
primary: field({
type: 'string',
title: '主色',
description: '您的 UI 主色。',
icon: 'i-mdi-palette-outline',
required: ['sky', 'mint', 'rose', 'amber', 'violet', 'emerald', 'fuchsia', '...']
}),
gray: field({ ... }),
icons: group({
title: '图标',
description: '管理 UI Pro 中使用的图标。',
icon: 'i-mdi-application-settings-outline',
fields: {
search: field({ ...}),
dark: field({ ... }),
light: field({ ... }),
external: field({ ...}),
chevron: field({ ... }),
hash: field({ ... })
}
})
}
})
})