@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.11

package/docs/zh/intlayer_with_nuxt.md

@@ -70,152 +70,6 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-## 在 Nuxt 应用中设置 Intlayer 的分步指南
-
-<Tabs defaultTab="video">
-  <Tab label="视频" value="video">
-  
-<iframe title="如何使用 Intlayer 翻译你的 Nuxt 和 Vue 应用？探索 Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/nhUcUAVQ6eQ?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="代码" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-nuxt-4-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 CodeSandbox - 如何使用 Intlayer 实现应用国际化"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="演示" value="demo">
-
-<iframe
-  src="https://intlayer-nuxt-4-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 - intlayer-nuxt-4-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-### 第一步：安装依赖
-
-查看 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-nuxt-4-template)。
-
-使用 npm 安装必要的包：
-
-```bash packageManager="npm"
-npm install intlayer vue-intlayer
-npm install --save-dev nuxt-intlayer
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer vue-intlayer
-pnpm add --save-dev nuxt-intlayer
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add intlayer vue-intlayer
-yarn add --save-dev nuxt-intlayer
-yarn intlayer init
-```
-
-```bash packageManager="bun"
-bun add intlayer vue-intlayer
-bun add --dev nuxt-intlayer
-bun x intlayer init
-```
-
-- **intlayer**
-
-  核心包，提供国际化工具，用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)、转译以及[CLI命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)。
-
-- **vue-intlayer**
-  将 Intlayer 集成到 Vue 应用中的包。它提供了 Vue 组件的组合式函数。
-
-- **nuxt-intlayer**
-  集成 Intlayer 与 Nuxt 应用的 Nuxt 模块。它提供自动设置、用于语言环境检测的中间件、Cookie 管理和 URL 重定向。
-
-### 第2步：配置您的项目
-
-创建一个配置文件来配置您应用的语言：
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 您的其他语言环境
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-### 第三步：在您的 Nuxt 配置中集成 Intlayer
-
-将 intlayer 模块添加到您的 Nuxt 配置中：
-
-```typescript fileName="nuxt.config.ts"
-import { defineNuxtConfig } from "nuxt/config";
-
-export default defineNuxtConfig({
-  // ... 您现有的 Nuxt 配置
-  modules: ["nuxt-intlayer"],
-});
-```
-
-> `nuxt-intlayer` 模块会自动处理 Intlayer 与 Nuxt 的集成。它设置内容声明的构建，监控开发模式下的文件，提供用于语言环境检测的中间件，并管理本地化路由。
-
-### 第4步：声明您的内容
-
-创建并管理您的内容声明以存储翻译：
-
-```tsx fileName="content/home-page.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
-import { type Dictionary, t } from "intlayer";
-
-const content = {
-  key: "home-page",
-  content: {
-    title: t({
-      en: "Hello world",
-      fr: "Bonjour le monde",
-      es: "Hola mundo",
-    }),
-    metaTitle: t({
-      en: "Welcome | My Application",
-      fr: "Bienvenue | Mon Application",
-      es: "Bienvenido | Mi Aplicación",
-    }),
-    metaDescription: t({
-      en: "Discover your multilingual Nuxt app homepage powered by Intlayer.",
-      fr: "Découvrez la page d'accueil multilingue de votre application Nuxt propulsée par Intlayer.",
-      es: "Descubre la página de inicio multilingüe de tu aplicación Nuxt impulsada por Intlayer.",
-    }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-> 您的内容声明可以定义在应用程序中的任何位置，只要它们包含在 `contentDir` 目录中（默认是 `./src`），并且匹配内容声明文件扩展名（默认是 `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）。
-
-> 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
-
 ### 第5步：在代码中使用 Intlayer
 
 在整个 Nuxt 应用中使用 `useIntlayer` 组合式函数访问您的内容字典：
@@ -578,9 +432,7 @@ export default aboutPageContent;
 
 </Step>
 
-</Steps>
-
-### （可选）步骤 6b：创建带导航的布局
+<Step number="6b" title="创建带导航的布局" isOptional={true}>
 
 Nuxt 布局允许您为页面定义一个通用结构。创建一个包含语言切换器和导航的默认布局：
 
@@ -607,6 +459,10 @@ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
 
 `Links` 组件（如下所示）确保内部导航链接会自动本地化。
 
+</Step>
+
+</Steps>
+
 ### Git 配置
 
 建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。