使用您最喜欢的AI助手总结文档,并引用此页面和AI提供商
通过将 Intlayer MCP 服务器集成到您的 AI 助手,您可以直接从 ChatGPT、DeepSeek、Cursor、VSCode 等获取所有文档。
查看 MCP 服务器文档此页面的内容已使用 AI 翻译。
查看英文原文的最新版本如果您有改善此文档的想法,请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接复制文档 Markdown 到剪贴板
Intlayer 内容管理系统 (CMS) 文档
Intlayer CMS 是一个允许您将 Intlayer 项目的内容外部化的应用程序。
为此,Intlayer 引入了“远程字典”的概念。
理解远程字典
Intlayer 区分“本地”字典和“远程”字典。
“本地”字典是指在您的 Intlayer 项目中声明的字典。例如按钮的声明文件或导航栏。在这种情况下,外部化内容没有意义,因为这些内容通常不会频繁更改。
“远程”字典是通过 Intlayer CMS 管理的字典。这种字典可以让您的团队直接在网站上管理内容,同时也可以用于 A/B 测试功能和 SEO 自动优化。
可视化编辑器与 CMS
Intlayer 可视化编辑器 是一个工具,允许您在本地字典中以可视化方式管理内容。一旦更改完成,内容将被替换到代码库中。这意味着应用程序将被重新构建,页面将重新加载以显示新内容。
相比之下,Intlayer CMS 是一个工具,允许您在远程字典中以可视化方式管理内容。一旦更改完成,内容将不会影响您的代码库。网站将自动显示更改后的内容。
集成
有关如何安装包的更多详细信息,请参阅以下相关部分:
与 Next.js 集成
有关与 Next.js 集成的内容,请参阅设置指南。
与 Create React App 集成
有关与 Create React App 集成的内容,请参阅设置指南。
与 Vite + React 集成
有关与 Vite + React 集成的内容,请参阅设置指南。
配置
在您的 Intlayer 配置文件中,您可以自定义 CMS 设置:
复制代码到剪贴板
import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = { // ... 其他配置设置 editor: { /** * 必需 * * 应用程序的 URL。 * 这是可视化编辑器的目标 URL。 */ applicationURL: process.env.INTLAYER_APPLICATION_URL, /** * 必需 * * 启用编辑器需要客户端 ID 和客户端密钥。 * 它们用于识别正在编辑内容的用户。 * 可以通过在 Intlayer 仪表板 - 项目 (https://intlayer.org/dashboard/projects) 中创建新客户端来获取。 * clientId: process.env.INTLAYER_CLIENT_ID, * clientSecret: process.env.INTLAYER_CLIENT_SECRET, */ clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, /** * 可选 * * 如果您自行托管 Intlayer CMS,可以设置 CMS 的 URL。 * * Intlayer CMS 的 URL。 * 默认设置为 https://intlayer.org */ cmsURL: process.env.INTLAYER_CMS_URL, /** * 可选 * * 如果您自行托管 Intlayer CMS,可以设置后端的 URL。 * * Intlayer CMS 的 URL。 * 默认设置为 https://back.intlayer.org */ backendURL: process.env.INTLAYER_BACKEND_URL, },};export default config;
如果您没有客户端 ID 和客户端密钥,可以通过在 Intlayer 仪表板 - 项目 中创建新客户端来获取。
要查看所有可用参数,请参阅配置文档。
使用 CMS
推送您的配置
要配置 Intlayer CMS,您可以使用 intlayer CLI 命令。
复制代码到剪贴板
npx intlayer config push
如果您在 intlayer.config.ts 配置文件中使用了环境变量,可以使用 --env 参数指定所需的环境:
复制代码到剪贴板
npx intlayer config push --env production
此命令将您的配置上传到 Intlayer CMS。
推送字典
要将您的本地字典转换为远程字典,可以使用 intlayer CLI 命令。
复制代码到剪贴板
npx intlayer dictionary push -d my-first-dictionary-key
如果您在 intlayer.config.ts 配置文件中使用了环境变量,可以使用 --env 参数指定所需的环境:
复制代码到剪贴板
npx intlayer dictionary push -d my-first-dictionary-key --env production
此命令上传您的初始内容字典,使其可以通过 Intlayer 平台进行异步获取和编辑。
编辑字典
然后,您将能够在 Intlayer CMS 中查看和管理您的字典。
热加载
当检测到更改时,Intlayer CMS 能够热加载字典。
如果没有热加载,则需要重新构建应用程序以显示新内容。
通过激活 hotReload 配置,当检测到更新时,应用程序将自动替换更新的内容。
复制代码到剪贴板
import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = { // ... 其他配置设置 editor: { // ... 其他配置设置 /** * 指示应用程序是否应在检测到更改时热加载本地配置。 * 例如,当添加或更新新字典时,应用程序将更新页面中显示的内容。 * * 因为热加载需要与服务器的持续连接,所以仅适用于 `enterprise` 计划的客户。 * * 默认值:false */ hotReload: true, },};export default config;
热加载会在服务器端和客户端替换内容。
- 在服务器端,您需要确保应用程序进程对 .intlayer/dictionaries 目录具有写入权限。
- 在客户端,热加载允许应用程序在浏览器中热加载内容,而无需重新加载页面。然而,此功能仅适用于客户端组件。 > 因为热加载需要使用 EventListener 与服务器保持持续连接,所以仅适用于 enterprise 计划的客户。
调试
如果您在使用 CMS 时遇到问题,请检查以下内容:
应用程序正在运行。
editor 配置已正确设置在您的 Intlayer 配置文件中。
- 必需字段:
- 应用程序 URL 应与您在编辑器配置中设置的 URL (applicationURL) 匹配。
- CMS URL
- 必需字段:
- 确保项目配置已推送到 Intlayer CMS。
- 可视化编辑器使用 iframe 显示您的网站。确保您的网站的内容安全策略 (CSP) 允许 CMS URL 作为 frame-ancestors(默认值为 'https://intlayer.org')。检查编辑器控制台是否有任何错误。
文档历史
- 5.5.10 - 2025-06-29:初始化历史记录