> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/zh/getting-started/studio.md](/docs/manual/zh/getting-started/studio.md).

---
title: Studio 模块
description: 使用自托管的 Studio Web 编辑器直接在线上编辑您的 Nuxt Content 网站。
navigation:
  icon: i-lucide-mouse-pointer-2
  title: Studio 模块
seo:
  title: Nuxt Studio Web 编辑器
  description: 了解如何使用自托管的 Nuxt Studio Web 编辑器，通过实时预览和 GitHub、GitLab、Google 集成在线上直接管理内容。
---

**Nuxt Studio** 模块是一个基于浏览器的界面，用于直接在线上编辑您的 Nuxt Content 网站。通过 GitHub、GitLab 或 Google 认证在您已部署的站点上访问，无需任何本地开发工具即可开始管理内容。

::tip{to="https://nuxt.studio/introduction"}
浏览 Nuxt Studio 文档，了解如何安装该模块。
::

:site-image{src="/documentation/nuxt-studio-preview.avif" alt="Nuxt Studio 预览" class="w-full rounded-lg my-6" loading="lazy"}

**Studio 编辑器**让您可以在生产网站上完全通过浏览器管理内容。无需本地开发工具、Git 命令或终端访问。对于希望在熟悉环境中编辑和预览更改的内容团队来说，这是理想之选。

## 在线上为您的 Nuxt Content 网站进行可视化编辑

Nuxt Studio 为基于 Nuxt Content 的网站提供 **直接在生产环境中的可视化编辑**。

Studio 最初作为独立的高级平台提供，现在是一个 **免费、开源、可自托管的 Nuxt 模块**。它使您的整个团队——开发人员和非技术编辑——都能在不离开实时网站的情况下安全地创建和更新内容。

## 现有功能

### ✨ **TipTap 可视化编辑器**

富文本 Markdown 编辑器，完整支持 MDC 组件。

### 💻 **Monaco 代码编辑器**

用于 Markdown（MDC）、YAML 和 JSON 文件的高级代码编辑器，适合编辑原始代码。

### 📝 **基于表单的编辑器**

使用基于集合模式自动生成的表单来编辑 YAML、JSON 和 frontmatter。

### 🎨 **Vue 组件属性编辑器**

可视化界面，直接从编辑器编辑 Vue 组件属性。

### 🔄 **实时预览**

在您的生产网站上即时预览内容更改。

### 🔐 **多提供商认证**

使用 GitHub、GitLab 和 Google 进行安全的 OAuth 认证。

### 🔑 **自定义认证**

用于实现自定义认证流程的工具（密码、SSO、LDAP 等）。

### 📝 **文件管理**

在 [content/]{.s2} 目录中创建、编辑、重命名和删除内容文件。

### 🖼 **媒体管理**

集中式媒体库，支持 JPEG、PNG、GIF、WebP、AVIF、SVG 等格式。

### 🌳 **Git 集成**

直接从生产环境提交内容更改，并依赖 CI/CD 流水线进行部署。

### 🚀 **开发模式**

使用 Studio 界面直接从本地文件系统编辑内容和媒体文件。

### 🌍 **国际化**

完整的 i18n 支持，覆盖 17 种语言：AR、BG、DE、EN、ES、FA、FI、FR、ID、IT、JA、NL、PL、PT-BR、UA、ZH、ZH-TW。

## **即将推出的功能**

### 📂 **集合视图**

从统一界面管理和浏览所有内容集合。

### 🖼 **媒体优化**

在编辑器内直接优化图像和媒体资源。

### 🤖 **AI 内容助手**

获取智能的 AI 驱动建议，改进和加速内容创作。

### 💡 **社区驱动功能**

有想法？分享您的反馈，帮助塑造 Nuxt Studio 的未来。