设置 Nuxt Studio
它利用 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 文件的 content 配置中设置 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 字段在 __preview.json 文件中已设置且准确
"gitInfo": {
"name": "content",
"owner": "nuxt",
"url": "https://github.com/nuxt/content"
},
在你的 nuxt.config.ts 中覆盖 gitInfo
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 服务器 上联系我们。