@intlayer/docs 5.5.8 → 5.5.10

package/zh/intlayer_with_react_native+expo.md

@@ -20,15 +20,18 @@
 在您的 React Native 项目中，安装以下包：
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer react-native-intlayer
+npm install intlayer react-intlayer
+npm install --save-dev react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer react-native-intlayer
+pnpm add intlayer react-intlayer
+pnpm add --save-dev react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer react-native-intlayer
+yarn add intlayer react-intlayer
+yarn add --save-dev react-native-intlayer
 ```
 
 ### 包说明

package/zh/intlayer_with_vite+preact.md

@@ -24,15 +24,18 @@
 使用 npm 安装必要的软件包：
 
 ```bash packageManager="npm"
-npm install intlayer preact-intlayer vite-intlayer
+npm install intlayer preact-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer preact-intlayer vite-intlayer
+pnpm add intlayer preact-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer preact-intlayer vite-intlayer
+yarn add intlayer preact-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -510,13 +513,7 @@ module.exports = App;
 > 如果您希望在 `string` 属性中使用您的内容，例如 `alt`、`title`、`href`、`aria-label` 等，您必须调用函数的值，例如：
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > 注意：在 Preact 中，`className` 通常写作 `class`。
@@ -1255,23 +1252,15 @@ module.exports = LocaleSwitcher;
 ```
 
 > 文档参考：
-
+>
 > - [`useLocale` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/react-intlayer/useLocale.md)（`preact-intlayer` 的 API 类似）
-
 > - [`getLocaleName` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hreflang` 属性](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=zh)
-
 > - [`lang` 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` 属性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-
 > - [Popover API](https://developer.mozilla.org/zh-CN/docs/Web/API/Popover_API)
 
 以下是更新的 **步骤 9**，包含详细说明和优化的代码示例：

package/zh/intlayer_with_vite+react.md

@@ -24,15 +24,18 @@
 使用 npm 安装必要的包：
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer vite-intlayer
+npm install intlayer react-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer vite-intlayer
+pnpm add intlayer react-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer vite-intlayer
+yarn add intlayer react-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -526,13 +529,7 @@ module.exports = App;
 > 如果您想在 `string` 属性中使用您的内容，例如 `alt`、`title`、`href`、`aria-label` 等，您必须调用函数的值，例如：
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > 要了解有关 `useIntlayer` 钩子的更多信息，请参阅[文档](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/react-intlayer/useIntlayer.md)。
@@ -1207,21 +1204,14 @@ const LocaleSwitcher = () => {
 ```
 
 > 文档参考:
-
+>
 > - [`useLocale` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/react-intlayer/useLocale.md)
-
 > - [`getLocaleName` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/zh/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` 属性](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [`lang` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` 属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ---

package/zh/intlayer_with_vite+vue.md

@@ -24,15 +24,18 @@
 使用 npm 安装必要的软件包：
 
 ```bash packageManager="npm"
-npm install intlayer vue-intlayer vite-intlayer
+npm install intlayer vue-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer vue-intlayer vite-intlayer
+pnpm add intlayer vue-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer vue-intlayer vite-intlayer
+yarn add intlayer vue-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -259,52 +262,60 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
----
-
+```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
 
-/\*_ @type {import('intlayer').Dictionary} _/
+/** @type {import('intlayer').Dictionary} */
 const appContent = {
-key: "helloworld",
-content: {
-count: t({ zh: "计数是 ", en: "count is ", fr: "le compte est ", es: "el recuento es " }),
-edit: t({
-zh: "编辑 <code>components/HelloWorld.vue</code> 并保存以测试 HMR",
-en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-}),
-checkOut: t({ zh: "查看 ", en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
-officialStarter: t({
-zh: "官方 Vue + Vite 启动器",
-en: "the official Vue + Vite starter",
-fr: "le starter officiel Vue + Vite",
-es: "el starter oficial Vue + Vite",
-}),
-learnMore: t({
-zh: "在以下内容中了解更多关于 Vue 的 IDE 支持",
-en: "Learn more about IDE Support for Vue in the ",
-fr: "En savoir plus sur le support IDE pour Vue dans le ",
-es: "Aprenda más sobre el soporte IDE para Vue en el ",
-}),
-vueDocs: t({
-zh: "Vue 文档扩展指南",
-en: "Vue Docs Scaling up Guide",
-fr: "Vue Docs Scaling up Guide",
-es: "Vue Docs Scaling up Guide",
-}),
-readTheDocs: t({
-zh: "点击 Vite 和 Vue 的标志以了解更多信息",
-en: "Click on the Vite and Vue logos to learn more",
-fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
-es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
-}),
-},
+  key: "helloworld",
+  content: {
+    count: t({
+      zh: "计数是 ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t({
+      zh: "编辑 <code>components/HelloWorld.vue</code> 并保存以测试 HMR",
+      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
+      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
+      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
+    }),
+    checkOut: t({
+      zh: "查看 ",
+      en: "Check out ",
+      fr: "Vérifiez ",
+      es: "Compruebe ",
+    }),
+    officialStarter: t({
+      zh: "官方 Vue + Vite 启动器",
+      en: "the official Vue + Vite starter",
+      fr: "le starter officiel Vue + Vite",
+      es: "el starter oficial Vue + Vite",
+    }),
+    learnMore: t({
+      zh: "在以下内容中了解更多关于 Vue 的 IDE 支持",
+      en: "Learn more about IDE Support for Vue in the ",
+      fr: "En savoir plus sur le support IDE pour Vue dans le ",
+      es: "Aprenda más sobre el soporte IDE para Vue en el ",
+    }),
+    vueDocs: t({
+      zh: "Vue 文档扩展指南",
+      en: "Vue Docs Scaling up Guide",
+      fr: "Vue Docs Scaling up Guide",
+      es: "Vue Docs Scaling up Guide",
+    }),
+    readTheDocs: t({
+      zh: "点击 Vite 和 Vue 的标志以了解更多信息",
+      en: "Click on the Vite and Vue logos to learn more",
+      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
+      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
+    }),
+  },
 };
 
 module.exports = appContent;
-
-````
+```
 
 ```json fileName="src/helloWorld.content.json" contentDeclarationFormat="json"
 {
@@ -376,7 +387,7 @@ module.exports = appContent;
     }
   }
 }
-````
+```
 
 > 您的内容声明可以在应用程序中的任何位置定义，只要它们包含在 `contentDir` 目录中（默认情况下为 `./src`）。并匹配内容声明文件扩展名（默认情况下为 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`）。
 
@@ -444,22 +455,23 @@ const count = ref(0);
 </template>
 ```
 
-> 如果您想在属性中使用内容，例如 `alt`、`title`、`href`、`aria-label` 等，您必须使用 `.value` 调用函数的值，例如：
-
-> ```html
->
-> ```
+#### 在 Intlayer 中访问内容 Intlayer 提供了不同的 API 来访问您的内容： -
 
-> <img src="./logo.svg" :alt="content.image.value" />
+**基于组件的语法**（推荐）： 使用 `<myContent />` 或 `<Component :is="myContent" />` 语法将内容呈现为 Intlayer
 
-> ```
->
-> ```
+节点。这与[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_visual_editor.md)和 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_CMS.md)
+无缝集成。
 
-### （可选）第六步：更改内容的语言
+- **基于字符串的语法**： 使用 `{{ myContent }}` 将内容呈现为纯文本，不支持可视化编辑器。
+- **原始 HTML 语法**： 使用 `<div v-html="myContent" />` 将内容呈现为原始 HTML，不支持可视化编辑器。
+- **解构语法**： `useIntlayer` 可组合函数返回一个包含内容的代理。可以解构此代理以访问内容，同时保持反应性。
+  - 使用 `const content = useIntlayer("myContent");` 和 `{{ content.myContent }}` /
+    `<content.myContent />`。
+  - 或使用 `const { myContent } = useIntlayer("myContent");` 和 `{{ myContent }}` / `<myContent />` 来解构内容。
 
-要更改内容的语言，可以使用 `useLocale` 可组合函数提供的 `setLocale` 函数。此函数允许您设置应用程序的语言环境并相应地更新内容。
+### (可选) 第6步：更改内容的语言
 
+要更改内容的语言，您可以使用 `useLocale` 可组合函数提供的 `setLocale` 函数。此函数允许您设置应用程序的区域设置并相应地更新内容。
 创建一个组件以在语言之间切换：
 
 ```vue fileName="src/components/LocaleSwitcher.vue"
@@ -531,7 +543,6 @@ const content = useIntlayer("app"); // 创建相关的 intlayer 声明文件
 
 ```plaintext
 - https://example.com/about
-
 - https://example.com/zh/about
 - https://example.com/fr/about
 ```
@@ -838,7 +849,7 @@ useI18nHTMLAttributes();
 
 ### （可选）步骤 10：创建一个本地化链接组件
 
-为了确保您的应用程序导航符合当前语言环境，您可以创建一个自定义的 `Link` 组件。此组件会自动为内部 URL 添加当前语言的前缀。例如，当法语用户点击“关于”页面的链接时，他们会被重定向到 `/fr/about` 而不是 `/about`。
+为了确保您的应用程序导航符合当前语言环境，您可以创建一个自定义的 `Link` 组件。此组件会自动为内部 URL 添加当前语言的前缀。例如，当法语用户点击"关于"页面的链接时，他们会被重定向到 `/fr/about` 而不是 `/about`。
 
 此行为的好处包括：
 

package/zh/packages/nuxt-intlayer/index.md

@@ -0,0 +1,31 @@
+# nuxt-intlayer: 用于国际化 (i18n) Vue 应用的 NPM 包
+
+**Intlayer** 是专为 JavaScript 开发者设计的一套工具包。它兼容 Vue、Vue 和 Express.js 等框架。
+
+**`nuxt-intlayer` 包** 允许您对 Vue 应用进行国际化。它提供了用于 Vue 国际化的上下文提供者和钩子。
+
+## 为什么要对您的 Vue 应用进行国际化？
+
+对您的 Vue 应用进行国际化对于有效服务全球用户至关重要。它使您的应用能够以每个用户偏好的语言传递内容和消息。这种能力提升了用户体验，并通过使您的应用对不同语言背景的人更具可访问性和相关性，从而扩大了应用的覆盖范围。
+
+## 为什么要集成 Intlayer？
+
+- **JavaScript 驱动的内容管理**：利用 JavaScript 的灵活性高效地定义和管理您的内容。
+- **类型安全的环境**：利用 TypeScript 确保所有内容定义都精确且无错误。
+- **集成的内容文件**：将翻译与其相关组件紧密结合，增强可维护性和清晰度。
+
+## 安装
+
+使用您喜欢的包管理器安装必要的包：
+
+```bash packageManager="npm"
+npm install nuxt-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add nuxt-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add nuxt-intlayer
+```

package/zh/roadmap.md

@@ -14,7 +14,7 @@ Intlayer 是一种内容管理和国际化解决方案，旨在简化您在应
 - **分布式**：或者，将内容拆分到组件或功能级别的单独文件中，以提高可维护性。这使您的内容与相关代码（组件、测试、Storybook 等）保持紧密联系。移除组件时，相关内容也会被移除，防止遗留数据使代码库变得混乱。
 
 > 资源:
-
+>
 > - [内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/zh/dictionary/get_started.md)
 
 ### 2. 国际化
@@ -23,7 +23,7 @@ Intlayer 是一种内容管理和国际化解决方案，旨在简化您在应
 - 可以轻松地从一个地方管理所有这些语言的翻译。
 
 > 资源:
-
+>
 > - [国际化](https://github.com/aymericzip/intlayer/blob/main/docs/zh/dictionary/translation.md)
 
 ### 3. Markdown 支持
@@ -32,7 +32,7 @@ Intlayer 是一种内容管理和国际化解决方案，旨在简化您在应
 - 非常适合博客文章、文档页面或任何需要丰富文本格式的场景。
 
 > 资源:
-
+>
 > - [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/zh/dictionary/markdown.md)
 
 ### 4. 条件渲染
@@ -41,7 +41,7 @@ Intlayer 是一种内容管理和国际化解决方案，旨在简化您在应
 - 帮助定制个性化体验，而无需在多个文件中重复内容。
 
 > 资源:
-
+>
 > - [条件渲染](https://github.com/aymericzip/intlayer/blob/main/docs/zh/dictionary/condition.md)
 
 ### 5. 内容声明格式
@@ -86,7 +86,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 完全兼容新的 Next.js Turbopack 以及传统的 Webpack。
 
 > 资源:
-
+>
 > - [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_with_nextjs_15.md)
 
 ### 2. Vite
@@ -94,7 +94,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 类似于 Next.js，您可以将 Intlayer 与 Vite 集成，并使用 **中间件** 根据用户的首选语言重定向到相应内容。
 
 > 资源:
-
+>
 > - [Vite](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_with_vite+react.md)
 
 ### 3. Express
@@ -103,7 +103,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 使用本地化文本个性化电子邮件、错误消息、推送通知等。
 
 > 资源:
-
+>
 > - [Express](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_with_express.md)
 
 ---
@@ -120,7 +120,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 可以本地托管或部署在远程服务器上。
 
 > 资源:
-
+>
 > - [可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_visual_editor.md)
 
 ### 2. Intlayer CMS（远程）
@@ -130,7 +130,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 通过您的实时应用程序界面与内容交互。
 
 > 资源:
-
+>
 > - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_CMS.md)
 
 ---
@@ -142,7 +142,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 对于 **CI/CD 管道** 非常有用，确保您的内容始终与代码同步。
 
 > 资源:
-
+>
 > - [CLI](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_cli.md)
 
 ---
@@ -159,7 +159,7 @@ Intlayer 支持使用 **TypeScript**（也支持 JavaScript）和 **JSON** 声
 - 使用远程字典和 Intlayer CMS 时，您可以 **实时更新应用程序的内容**，无需重新部署。
 
 > 资源:
-
+>
 > - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/zh/intlayer_CMS.md)
 
 ---