编辑您的内容

Nuxt Studio 为开发者和内容编辑者提供了一个多功能的工作空间，让他们可以自由选择以下不同的编辑器：

• 用于 Markdown 文件的 类 Notion 编辑器
• 用于 YAML 和 JSON 文件的 表单编辑器
• 用于任何类型文件的 代码编辑器（仅限技术用户）

每种编辑器都有其专用的用途。有些用户习惯代码编辑，而有些则喜欢非技术性的视觉方式。最终，两种编辑器的最终输出都是代码语法。

类 Notion 编辑器（Markdown 文件）

此编辑器深受 Notion 启发，Notion 以其直观的设计和灵活性闻名。类似于标准文本编辑器，该编辑器的设计使其易于熟悉和使用。但它凭借改善写作体验的额外功能脱颖而出。

Frontmatter

Frontmatter 是基于 Markdown 的 CMS 的一种约定，用于为页面提供元数据，比如描述、标题或任何其他您想以 key: value 形式存储的数据。

基于用户提供的 集合和模式，系统会自动生成一个表单，供编辑器编辑这些元数据。

工具栏

高亮选中文本即会显示工具栏，您可以使用所有标准文本编辑功能（标题格式、加粗、斜体、删除线、代码、链接、类、无序列表、有序列表等）。

媒体

用户可以直接将图片拖放到编辑器中。上传模态框会打开，让您选择目标文件夹。

通过键入 / 并搜索 Image 或 Video，可以快速插入媒体。模态框会打开，您可以从媒体库（即 Nuxt 应用的 public 文件夹）中选择想要插入的媒体。

在媒体模态框中，您可以为 SEO 和无障碍目的设置alt 属性。

Vue 组件

此编辑器的卓越功能之一是能够直接在编辑器中集成和自定义任何复杂的 Vue 组件。

创建并集成您自己的组件

开发者可以创建任何视觉复杂的组件，编辑者能够使用它们并专注于内容。编辑者还可以调整组件属性、样式及行为以满足具体需求，只要开发者使其可定制即可。

<template>
  <div class="flex items-start gap-3">
    <div class="flex items-center justify-center border rounded-lg p-1.5">
      <UIcon :name="icon" />
    </div>
    <div class="flex flex-col">
      <h3 class="font-semibold">
        <ContentSlot name="title" />
      </h3>
      <span>
        <ContentSlot name="description" />
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  icon: {
    type: String,
    default: 'i-ph-cursor-click',
  },
})
</script>

::home-feature
  ---
  icon: i-mdi-vuejs
  ---
  #title
  嵌入式 Vue 组件
  #description
  在类 Notion 编辑器中编辑插槽和属性。
::

集成来自外部库的内置组件

默认情况下，您可以在 Markdown 文件内集成任何组件，且它们会在 Studio 中工作且可编辑，但外部组件不会显示在 Studio 的组件列表中，也无法由 Studio 编辑器手动集成。

若要在 Studio 中列出此组件并抓取其所有元数据，您需要在 Nuxt 配置文件中将其设置为全局组件。

以下示例演示如何集成来自 Nuxt UI 库的 Button 和 Icon 组件：

export default defineNuxtConfig({
  hooks: {
    'components:extend': (components) => {
      const globals = components.filter(c => ['UButton', 'UIcon'].includes(c.pascalName))

      globals.forEach(c => c.global = true)
    }
  },
})

表单编辑器

此编辑器适用于编辑 Markdown 文件的 frontmatter 或编辑 JSON / YAML 文件。

它避免您直接操作复杂的文件语法，而是根据用户提供的集合模式自动生成表单。

使用 zod 模式定义您的表单

一旦在集合中定义了 schema 属性，Studio 界面会自动生成对应的表单。

export default defineContentConfig({
  collections: {
    posts: defineCollection({
      type: 'page',
      source: 'blog/*.md',
      schema: z.object({
        draft: z.boolean().default(false),
        category: z.enum(['Alps', 'Himalaya', 'Pyrenees']).optional(),
        date: z.date(),
        image: z.object({
          src: z.string().editor({ input: 'media' }),
          alt: z.string(),
        }),
        slug: z.string().editor({ hidden: true }),
        icon: z.string().optional().editor({ input: 'icon' }),
        authors: z.array(z.object({
          slug: z.string(),
          username: z.string(),
          name: z.string(),
          to: z.string(),
          avatar: z.object({
            src: z.string(),
            alt: z.string(),
          }),
        })),
      }),
    }),
  },
})

原生输入映射

Zod 的基础类型自动映射为对应的表单输入：

• 字符串 → 文本输入框
• 日期 → 日期选择器
• 数字 → 数字输入框（计数器）
• 布尔 → 切换开关
• 枚举 → 下拉选择框
• 字符串数组 → 徽章列表输入
• 对象数组 → 折叠面板中嵌入表单的项目列表

自定义输入映射

Studio 超越基础类型。您可以使用 editor 方法自定义表单字段，它用元数据扩展 Zod 类型以增强编辑器界面。

这允许您定义自定义输入或隐藏字段。

用法

mainScreen: z.string().editor({ input: 'media' })

选项

input: 'media' | 'icon'

可设置编辑器输入类型。目前支持 icon 和 media。

hidden: Boolean

此选项用来阻止字段在 Studio 编辑器中显示。

代码编辑器

尽管前面两个编辑器针对特定文件扩展名（md 或 yaml/json），代码编辑器可用于任何类型的文件。

它提供对内容的完全控制，允许您直接编写原始内容：

• Markdown 文件的 MDC 语法
• JSON 或 YAML 语法

当您使用代码编辑器保存文件时，内容会精准保存，保持所有特定的语法和格式。此编辑器适合熟悉代码语法（Markdown、YAML 或 JSON）且希望精确控制内容结构的用户。