设置 Nuxt Studio

Studio 是一个直观的 CMS 界面，用于编辑你的 Nuxt Content 网站。

它利用 Nuxt Content 内置的 Preview API，为内容文件提供最佳编辑体验。编辑者可以通过用户友好的界面编辑他们的 Markdown、YAML 或 JSON 文件。

开发者可以自定义编辑体验并为编辑者提供工具，使编辑者能够专注于内容，无需任何技术专长。

认证

Studio 管理后台位于 nuxt.studio。你可以通过 GitHub 或 Google 登录。两种方式会赋予相同的编辑权限，但由于 Studio 与 GitHub 同步，仓库导入必须由 GitHub 用户操作。

连接你的 Nuxt Content 仓库

登录管理后台后，你可以直接从界面导入你的 Nuxt Content 仓库。

唯一的要求是你的仓库必须托管在 GitHub 上。通过界面连接我们的 GitHub 应用，然后即可将 GitHub 仓库链接到你的 Studio 项目中。

项目创建成功后，你就可以使用 Studio 的编辑器开始编辑文件，并发布你的更改。

启用完整编辑体验

要解锁 Studio 的全部功能，请确保你的项目 URL 在部署部分正确配置。

这将启用所有 Studio 功能，包括：

• 网站实时预览： 在编辑时立即在网站上看到更改效果。
• 动态表单生成： 根据你的 Nuxt Content 集合自动生成编辑表单。
• 增强的 Markdown 编辑器： 提供更好的编辑体验，包括列出和集成你已暴露的 Vue 组件。
• 自动应用配置： 根据你定义的 schema 生成 应用配置。

要在 Studio 中设置你的 URL，只需在 nuxt.config.ts 文件的内容配置中设置 Preview API。

export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio'
    }
  }
})

部署完成后，可通过访问网站的 /__preview.json 页面确认 Preview API 是否已生效。该元数据页面由 Content 模块自动生成，且必须可访问，才能在 Studio 的自托管部分连接你的 URL。

故障排查

如果已生成 __preview.json 文件，但在自托管部分设置 URL 时遇到 Forbidden error: invalid property check 错误，请按以下步骤操作：

"gitInfo": {
  "name": "content",
  "owner": "nuxt",
  "url": "https://github.com/nuxt/content"
},

export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio',
      gitInfo: {
        name: '你的仓库名',
        owner: '你的仓库拥有者/组织',
        url: '你的 GitHub 仓库 URL'
      }
    }
  }
})