Lzh on GitHub

定制应用程序配置编辑

探索如何在 Studio 中通过提供 schema 来自定义应用程序配置编辑。确保流畅且结构化的内容管理体验。

进入编辑器的 配置 选项卡后，你可以浏览配置以自定义你的网站。这些配置代表你在 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: 'Parent title',
      description: 'Parent description.',
      icon: 'i-icon-to-display',
      fields: {
        leaf: field({
          type: 'Type of component used to edit your field',
          title: 'Field title',
          description: 'Field Description',
          icon: 'i-icon-to-display',
          default: 'default value'
        })
      }
    })
  }
})
不必包含所有的应用程序配置键；只需要添加你希望在 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 configuration',
      icon: 'i-ph-palette-fill',
      fields: {
        primary: field({
          type: 'string',
          title: 'Primary',
          description: 'Primary color of your UI.',
          icon: 'i-ph-palette',
          default: 'sky',
          required: ['sky', 'mint', 'rose', 'amber']
        })
      }
    })
  }
})

在 Studio 上编辑

一旦你的 schema 部署完毕，任何用户都可以访问 数据 部分并使用生成的表单。

表单中的任何更新都将直接应用于 app.config.ts 文件。你可以在审查页面上查看这些更改。

查看此部分以验证你在本地开发中的 schema。
有关实际示例，请查看我们为 UI Pro Docs starter 开发的 schema。