使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
版本历史
- "初始化历史"v5.5.102025/6/29
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接复制文档 Markdown 到剪贴板
Intlayer 可视化编辑器文档
Intlayer 可视化编辑器是一种工具，可以将您的网站包装起来，通过可视化编辑器与您的内容声明文件进行交互。
intlayer-editor 包基于 Intlayer，可用于 JavaScript 应用程序，例如 React (Create React App)、Vite + React 和 Next.js。
可视化编辑器 vs CMS
Intlayer 可视化编辑器是一种工具，允许您在本地字典的可视化编辑器中管理内容。一旦进行了更改，内容将在代码库中被替换。这意味着应用程序将被重新构建，页面将重新加载以显示新内容。
相比之下，Intlayer CMS 是一种工具，允许您在远程字典的可视化编辑器中管理内容。一旦进行了更改，内容将不会影响您的代码库。网站将自动显示更改后的内容。
将 Intlayer 集成到您的应用程序中
有关如何集成 Intlayer 的更多详细信息，请参阅以下相关部分：
与 Next.js 集成
有关与 Next.js 集成的内容，请参阅设置指南。
与 Create React App 集成
有关与 Create React App 集成的内容，请参阅设置指南。
与 Vite + React 集成
有关与 Vite + React 集成的内容，请参阅设置指南。
Intlayer 编辑器如何工作
应用程序中的可视化编辑器包括以下两部分：
一个前端应用程序，它将在 iframe 中显示您的网站。如果您的网站使用了 Intlayer，可视化编辑器将自动检测您的内容，并允许您与之交互。一旦进行了修改，您将能够下载更改。
当您点击下载按钮时，可视化编辑器将向服务器发送请求，用新内容替换您的内容声明文件（无论这些文件在您的项目中声明在哪里）。
请注意，目前 Intlayer 编辑器将您的内容声明文件写为 JSON 文件。
安装
在您的项目中配置好 Intlayer 后，只需将 intlayer-editor 安装为开发依赖项：
复制代码到剪贴板
使用 --with 标志，您可以与另一个命令并行启动编辑器：
复制代码到剪贴板
配置
在您的 Intlayer 配置文件中，您可以自定义编辑器设置：
复制代码到剪贴板
import type { IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... 其他配置设置
editor: {
/**
* 必需
* 应用程序的 URL。
* 这是可视化编辑器的目标 URL。
* 示例：'http://localhost:3000'
*/
applicationURL: process.env.INTLAYER_APPLICATION_URL,
/**
* 可选
* 默认值为 `true`。如果为 `false`，编辑器将处于非活动状态且无法访问。
* 可用于出于安全原因在特定环境（如生产环境）中禁用编辑器。
*/
enabled: process.env.INTLAYER_ENABLED,
/**
* 可选
* 默认值为 `8000`。
* 编辑器服务器的端口。
*/
port: process.env.INTLAYER_PORT,
/**
* 可选
* 默认值为 "http://localhost:8000"
* 编辑器服务器的 URL。
*/
editorURL: process.env.INTLAYER_EDITOR_URL,
},
};
export default config;
要查看所有可用参数，请参阅配置文档。
使用编辑器
安装编辑器后，您可以使用以下命令启动编辑器：
bash复制代码复制代码到剪贴板
请注意，您应该并行运行您的应用程序。 应用程序 URL 应与您在编辑器配置中设置的 URL (
applicationURL) 匹配。
注意该命令由intlayer包重新导出。你可以改用npx intlayer editor start。
然后，打开提供的 URL。默认值为
http://localhost:8000。您可以通过将光标悬停在内容上查看每个由 Intlayer 索引的字段。
如果您的内容被标出，您可以长按它以显示编辑抽屉。
环境配置
编辑器可以配置为使用特定的环境文件。当您希望在开发和生产环境中使用相同的配置文件时，这非常有用。
要使用特定的环境文件，您可以在启动编辑器时使用 --env-file 或 -f 标志：
复制代码到剪贴板
请注意，环境文件应位于项目的根目录中。
或者，您可以使用 --env 或 -e 标志来指定环境：
复制代码到剪贴板
调试
如果您在使用可视化编辑器时遇到任何问题，请检查以下内容：
可视化编辑器和应用程序是否正在运行。
editor配置是否正确设置在您的 Intlayer 配置文件中。- 必需字段：
- 应用程序 URL 应与您在编辑器配置中设置的 URL (
applicationURL) 匹配。
- 应用程序 URL 应与您在编辑器配置中设置的 URL (
- 必需字段：
可视化编辑器使用 iframe 来显示您的网站。请确保您网站的内容安全策略（CSP）允许将 CMS URL 作为
frame-ancestors（默认值为http://localhost:8000）。如有错误，请检查编辑器控制台。
常见问题
可视化编辑器编辑的是本地字典，并将修改直接写回您的代码库中，因此会走常规的代码审查和部署流水线。而 CMS 编辑的是远程字典，可在运行中的线上站点直接生效而无需重新部署。编辑器适合开发者掌控的内容；CMS 适合市场团队掌控的内容。
远少于基于命名空间的方案，因为页面永远不会下载它不渲染的语言目录。服务端渲染的标记在服务端直接解析内容，而构建时编译器将 useIntlayer 调用替换为组件使用的确切字典条目，因此未使用的键和未使用的语言都会被自动丢弃。动态字典 会按语言环境拆分剩余内容。与常规替代方案相比，Intlayer 可将 bundle 和页面体积减少高达 50%。请参阅 Bundle 体积优化 和 性能基准。
可以，有两条迁移路径。您可以使用 i18next 迁移指南 或 next-intl 迁移指南 逐步迁移内容。或者，您可以完全保留当前的 API：兼容性适配器 公开与 i18next、react-i18next、next-intl、next-i18next、react-intl、use-intl、vue-i18n 和 Lingui 完全相同的 API，但底层由 Intlayer 字典驱动，因此只需更改导入语句，组件代码无需修改。
可以。JSON 同步插件 将您的 /messages/{locale}/{namespace}.json 文件作为单一真实来源（source of truth），并双向生成 Intlayer 字典。PO 同步插件 对 gettext 目录执行相同的操作，而 按语言环境组织的文件 允许您按语言拆分内容，而不是将所有语言打包到一个文件中。
不需要。运行 npx intlayer extract，Intlayer 会读取您的源码文件，提取面向用户的字符串，并在每个组件旁边生成 .content 文件，这样您只需审查 diff，而无需手动逐一复制字符串到语言目录中。请参阅 extract 命令。
如需全自动流程，Intlayer Compiler 可以在构建时对 JSX、TSX、Vue 和 Svelte 源码执行相同操作，在每次更改时自动生成字典，完全无需手动维护键名。它通过静态分析工作，因此仅在运行时存在的字符串无法被捕获，并且需要少量注解以区分用户文本和应用程序逻辑。
共有 5 个工具，均为可选：
- VS Code 扩展：从
useIntlayer键跳转到声明它的内容文件，从组件中提取内容，并从命令面板或专属的 Intlayer 选项卡运行 build、fill、test、push 和 pull。 - LSP 服务器：在任何支持 LSP 的编辑器中提供相同的感知能力，支持跳转到定义、查找所有引用、悬停预览翻译值、键和字段的自动补全，以及在键未声明时发出警告。它还可以解析
i18next、react-i18next、next-intl和use-intl调用，助力平滑迁移。 - MCP 服务器：向 Cursor、VS Code、Claude Desktop、Claude Code 和 ChatGPT 公开 Intlayer 文档与 CLI，使 AI 助手能够基于最新文档进行准确回答，并能自行运行
intlayer fill等命令。 - Agent Skills：针对特定领域的技能（如
intlayer-config、intlayer-cli和intlayer-content，以及每个框架对应的专属技能），教导 AI 代理您的路由配置和内容节点类型。 - ESLint 插件：
no-raw-text规则标记硬编码字符串，并提供针对静态字典键和未使用内容的额外规则。