STARWARCLOUD STARWAR.AI
返回市场
集成层

集成层

作者：aymericzip408 星标更新：2025-11-24
安装使用来源：spider==github.com

项目介绍

<p align="center"> <a href="https://intlayer.org" rel=""> <img src="https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/cover.png" width="60%" alt="Intlayer Logo" /> </a> </p> <h1 align="center"> <strong> Intlayer：一个开源的、基于组件的国际化工具包，具有AI驱动的翻译及CMS功能。</strong> </h1> <br /> <p align="center"> <a href="https://intlayer.org/doc/concept/content" rel="">文档</a> • <a href="https://intlayer.org/doc/environment/nextjs" rel="">Next.js</a> • <a href="https://intlayer.org/doc/environment/vite-and-react" rel="">React + Vite</a> • <a href="https://intlayer.org/doc/concept/cms" rel="">CMS</a> • <a href="https://discord.gg/7uxamYVeCk" rel="noopener noreferrer nofollow">Discord</a> </p> <p align="center" style="margin-top:15px;"> <a href="https://www.npmjs.com/package/intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/intlayer?style=for-the-badge&labelColor=FFFFFF&color=000000&logoColor=FFFFFF" alt="npm 版本" height="24"/></a> <a href="https://github.com/aymericzip/intlayer/stargazers" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logo=github&logoColor=FFD700" alt="GitHub Stars" height="24"/></a> <a href="https://www.npmjs.org/package/intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="每月下载量" height="24"/></a> <a href="https://github.com/aymericzip/intlayer/blob/main/LICENSE" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/license/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="许可证"/></a> <a href="https://github.com/aymericzip/intlayer/commits/main" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="最近提交"/> </a> <a href="https://bountyhub.dev/bounties?repo=intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/badge/Bounties-on%20BountyHub-yellow?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="Bounties on BountyHub"/> </a> </p>

观看视频

<a href="https://intlayer.org/doc/concept/content" rel=""> <img src="https://img.shields.io/badge/开始使用-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" /> </a>

Intlayer 是什么？

大多数国际化库要么太复杂，要么太僵化，或者不适合现代框架。

Intlayer 是一个适用于 Web 和移动应用的 现代国际化解决方案。 它与框架无关，由 AI 驱动，并且包括免费的 CMS 和可视化编辑器。

通过 每个区域的内容文件、TypeScript 自动补全、可摇树的字典 和 CI/CD 集成，Intlayer 让国际化变得更快、更干净、更智能。

Intlayer 的主要优势：

功能描述
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true" alt="Feature" width="700">跨框架支持<br><br>Intlayer 兼容所有主流框架和库，包括 Next.js、React、Vite、Vue.js、Nuxt、Preact、Express 等。
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true" alt="Feature" width="700">JavaScript 驱动的内容管理<br><br>利用 JavaScript 的灵活性高效地定义和管理内容。<br><br> - 内容声明
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true" alt="Feature" width="700">每个区域的内容声明文件<br><br>通过一次性声明内容来加快开发速度，然后自动生成。<br><br> - 每个区域的内容声明文件
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true" alt="Feature" width="700">类型安全环境<br><br>利用 TypeScript 确保内容定义和代码无误，同时受益于 IDE 自动补全。<br><br> - TypeScript 配置
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true" alt="Feature" width="700">简化设置<br><br>快速启动并运行，只需最少的配置。轻松调整国际化的设置、路由、AI、构建和内容处理。<br><br> - 探索 Next.js 集成
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true" alt="Feature" width="700">简化内容检索<br><br>无需为每段内容调用 t 函数。使用单个钩子直接检索所有内容。<br><br> - React 集成
<img src="https://gips3.baidu.com/it/u=1720256974,2692609454&fm=3081&app=3081&f=PNG?w=1146&h=500" alt="Feature" width="700">一致的服务器组件实现<br><br>完美适配 Next.js 服务器组件，在客户端和服务器组件中使用相同的实现，无需在每个服务器组件中传递 t 函数。<br><br> - 服务器组件
<img src="https://gips0.baidu.com/it/u=3800567405,107008918&fm=3081&app=3081&f=PNG?w=1058&h=552" alt="Feature" width="700">组织良好的代码库<br><br>保持代码库更有条理：1 个组件 = 1 个字典在同一文件夹中。翻译靠近其相应的组件，增强可维护性和清晰度。<br><br> - Intlayer 工作原理
<img src="https://gips2.baidu.com/it/u=348790734,2516103275&fm=3081&app=3081&f=PNG?w=850&h=262" alt="Feature" width="700">增强的路由<br><br>全面支持应用路由，无缝适应复杂的应用结构，适用于 Next.js、React、Vite、Vue.js 等。<br><br> - 探索 Next.js 集成
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700">Markdown 支持<br><br>导入和解释本地文件和远程 Markdown，用于多语言内容如隐私政策、文档等。解释并使 Markdown 元数据在代码中可用。<br><br> - 内容文件
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700">免费的可视化编辑器和 CMS<br><br>提供免费的可视化编辑器和 CMS，供内容作者使用，无需本地化平台。使用 Git 同步内容，或完全或部分地将其外部化。<br><br> - Intlayer 编辑器 <br> - Intlayer CMS
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700">可摇树的内容<br><br>可摇树的内容，减少最终捆绑包的大小。按组件加载内容，排除任何未使用的捆绑包中的内容。支持懒加载以提高应用程序加载效率。<br><br> - 应用构建优化
<img src="https://gips1.baidu.com/it/u=3850974497,3192102983&fm=3081&app=3081&f=PNG?w=1478&h=700" alt="Feature" width="700">静态渲染<br><br>不会阻止静态渲染。<br><br> - Next.js 集成
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700">AI 驱动的翻译<br><br>使用 Intlayer 的高级 AI 驱动的翻译工具，只需点击一下即可将您的网站转换为 231 种语言，使用您自己的 AI 提供商 / API 密钥。<br><br> - CI/CD 集成 <br> - Intlayer CLI <br> - 自动填充
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700">MCP 服务器集成<br><br>提供一个 MCP（模型上下文协议）服务器，用于 IDE 自动化，使内容管理和国际化工作流程直接在您的开发环境中无缝进行。<br><br> - MCP 服务器
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700">VSCode 扩展<br><br>Intlayer 提供了一个 VSCode 扩展，帮助您管理内容和翻译，构建字典，翻译内容等。<br><br> - VSCode 扩展
<img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700">互操作性<br><br>允许与 react-i18next、next-i18next、next-intl 和 react-intl 的互操作性。<br><br> - Intlayer 和 react-intl <br> - Intlayer 和 next-intl <br> - Intlayer 和 next-i18next

📦 安装

今天开始使用 Intlayer，体验更加顺畅、强大的国际化方法。

<a href="https://intlayer.org/doc/concept/content" rel=""> <img src="https://img.shields.io/badge/开始使用-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" /> </a> 
npm install intlayer react-intlayer

⚡ 快速开始（Next.js）

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

<a href="https://intlayer.org/doc/environment/nextjs"> 获取完整指南 → </a>

🎥 YouTube 上的实时教程

如何使用 Intlayer 国际化您的应用程序

<a href="https://intlayer.org/doc/concept/content" rel=""> <img src="https://img.shields.io/badge/开始使用-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" /> </a>

目录

浏览我们的综合文档，开始使用 Intlayer 并了解如何将其集成到您的项目中。

<details open> <summary style="font-size:16px; font-weight:bold;">📘 开始使用</summary> <ul> <li><a href="https://intlayer.org/doc/why" rel=''>为什么是 Intlayer？</a></li> <li><a href="https://intlayer.org/doc" rel=''>简介</a></li> </ul> </details> <details> <summary style="font-size:16px; font-weight:bold;">⚙️ 概念</summary> <ul> <li><a href="https://intlayer.org/doc/concept/how-works-intlayer" rel=''>Intlayer 工作原理</a></li> <li><a href="https://intlayer.org/doc/concept/configuration" rel=''>配置</a></li> <li><a href="https://intlayer.org/doc/concept/cli" rel=''>Intlayer CLI</a></li> <li><a href="https://intlayer.org/doc/concept/editor" rel=''>Intlayer 编辑器</a></li> <li><a href="https://intlayer.org/doc/concept/cms" rel=''>Intlayer CMS</a></li> <li><a href="https://intlayer.org/doc/concept/content" rel=''>字典</a> <ul> <li><a href="https://intlayer.org/doc/concept/content/per-locale-file" rel=''>每个区域的内容声明文件</a></li> <li><a href="https://intlayer.org/doc/concept/content/translation" rel=''>翻译</a></li> <li><a href="https://intlayer.org/doc/concept/content/enumeration" rel=''>枚举</a></li> <li><a href="https://intlayer.org/doc/concept/content/condition" rel=''>条件</a></li> <li><a href="https://intlayer.org/doc/concept/content/nesting" rel=''>嵌套</a></li> <li><a href="https://intlayer.org/doc/concept/content/markdown" rel=''>Markdown</a></li> <li><a href="https://intlayer.org/doc/concept/content/function-fetching" rel=''>函数获取</a></li> <li><a href="https