Lzh on GitHub

设置 Nuxt Studio

Studio 是用于编辑 Nuxt Content 网站的直观 CMS 界面。编辑您的 Markdown、YAML 和 JSON 文件,并将更改发布到 GitHub。

它利用 Nuxt Content 中包含的 Preview API,为你的内容文件提供最佳的编辑体验。编辑人员可以受益于用户友好的界面来编辑他们的 MarkdownYAMLJSON 文件。

开发人员可以自定义编辑体验,并为编辑人员提供工具,使他们能够专注于内容,而无需任何技术专业知识。

身份验证

Studio 管理员位于 nuxt.studio。从那里,你可以使用 GitHub 或 Google 登录。两种方法都提供相同的编辑权限,但由于 Studio 与 GitHub 同步,因此存储库导入必须由 GitHub 用户处理。

Google 身份验证适用于非技术用户。Google 用户必须加入一个拥有现有项目的团队才能编辑这些项目。

连接你的 Nuxt Content 存储库

登录管理员后,你可以从界面导入你的 Nuxt Content 存储库。

有两个选项可用,你可以导入一个现有的存储库或使用我们的一个 模板

唯一的要求是将你的存储库托管在 GitHub 上。从界面连接到我们的 GitHub 应用程序,然后你就可以将一个 GitHub 存储库链接到你的 Studio 项目。

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

启用完整的编辑体验

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

这将启用所有 Studio 功能,包括:

  • 网站的实时预览: 在你工作时,立即查看网站上反映的更改。
  • 动态表单生成: 基于你的 Nuxt Content 集合 自动生成编辑文件的表单。
  • 增强的 Markdown 编辑器: 享受改进的编辑体验,包括列出和集成你已暴露的 Vue 组件 的能力。
  • 自动应用程序配置: 基于你定义的 schema 生成 应用程序配置
我们提供 GitHub Pages 部署。通过使用它,我们将为你处理所有要求。但是,如果你想使用你选择的部署平台,请遵循以下简单的指南。

要在 Studio 中设置你的 URL,你只需要在你的 nuxt.config.ts 文件的 content 配置中设置 Preview API

nuxt.config.ts
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 字段在 __preview.json 文件中已设置且准确

https://your-website.com/__preview.json
"gitInfo": {
  "name": "content",
  "owner": "nuxt",
  "url": "https://github.com/nuxt/content"
},
在大多数情况下,此信息应自动填充。我们支持大多数流行的提供商(NuxtHub、Vercel、Netlify 等),但如果你使用的是不受支持的提供商或自定义提供商,则可能无法正确获取。

在你的 nuxt.config.ts 中覆盖 gitInfo

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio',
      gitInfo: {
        name: 'Your repository name',
        owner: 'Your repository owner/organization',
        url: 'Your GitHub repository URL'
      }
    }
  }
})

确保这些字段在 __preview.json 中正确设置

Forbidden error 应该已解决,你应该能够在 Nuxt Studio 上设置你的 URL。如果仍然不行,请在 Discord 服务器 上联系我们。