@intlayer/docs 7.1.8 → 7.2.0

package/docs/zh/intlayer_with_vite+svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-06-29
-title: 如何翻译您的Vite and Svelte应用 – i18n指南 2025
-description: 了解如何使您的 Vite 和 Svelte 网站支持多语言。按照文档进行国际化（i18n）和翻译。
+updatedAt: 2025-11-19
+title: 如何翻译您的 Vite 和 Svelte 应用 – 2025 年国际化 (i18n) 指南
+description: 了解如何使您的 Vite 和 Svelte 网站支持多语言。按照文档进行国际化 (i18n) 和翻译。
 keywords:
   - 国际化
   - 文档
@@ -14,34 +14,47 @@ slugs:
   - doc
   - environment
   - vite-and-svelte
-# applicationTemplate: https://github.com/aymericzip/intlayer-vite-solid-template
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-svelte-template
 history:
+  - version: 5.5.11
+    date: 2025-11-19
+    changes: 更新文档
   - version: 5.5.10
     date: 2025-06-29
-    changes: 初始化历史
+    changes: 初始化历史记录
 ---
 
-# 使用Intlayer翻译您的Vite and Svelte | 国际化(i18n)
+# 使用 Intlayer 翻译您的 Vite 和 Svelte 网站 | 国际化 (i18n)
 
-> 该包正在开发中。有关更多信息，请参见[问题](https://github.com/aymericzip/intlayer/issues/114)。通过点赞该问题，表达您对 Svelte 版 Intlayer 的兴趣。
+## 目录
 
-<!-- 请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-solid-template)。 -->
+<TOC/>
 
 ## 什么是 Intlayer？
 
-**Intlayer** 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用中的多语言支持。
+**Intlayer** 是一个创新的开源国际化 (i18n) 库，旨在简化现代 Web 应用的多语言支持。
 
 使用 Intlayer，您可以：
 
 - **通过组件级声明式字典轻松管理翻译**。
 - **动态本地化元数据、路由和内容**。
-- **通过自动生成类型确保 TypeScript 支持，提升自动补全和错误检测**。
-- **受益于高级功能**，如动态语言环境检测和切换。
+- **确保 TypeScript 支持**，通过自动生成类型提升自动补全和错误检测。
+- **享受高级功能**，如动态语言环境检测和切换。
 
 ---
 
 ## 在 Vite 和 Svelte 应用中设置 Intlayer 的分步指南
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-react-template?embed=1&ctl=1&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"
+/>
+
+请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-vite-svelte-template)。
+
 ### 第一步：安装依赖
 
 使用 npm 安装必要的包：
@@ -61,22 +74,26 @@ yarn add intlayer svelte-intlayer
 yarn add vite-intlayer --save-dev
 ```
 
+```bash packageManager="bun"
+bun add intlayer svelte-intlayer
+bun add vite-intlayer --save-dev
+```
+
 - **intlayer**
 
-- **intlayer**  
-  提供国际化工具的核心包，用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/get_started.md)、转译以及[命令行工具](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_cli.md)。
+  核心包，提供国际化工具，用于配置管理、翻译、[内容声明](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/intlayer_cli.md)。
 
-- **svelte-intlayer**  
-  将 Intlayer 集成到 Svelte 应用中的包。它提供了用于 Svelte 国际化的上下文提供者和钩子。
+- **svelte-intlayer**
+  将 Intlayer 与 Svelte 应用程序集成的包。它提供了用于 Svelte 国际化的上下文提供者和钩子。
 
-- **vite-intlayer**  
-  包含用于将 Intlayer 集成到[Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production)的 Vite 插件，以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。
+- **vite-intlayer**
+  包含用于将 Intlayer 集成到 [Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production) 的 Vite 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第2步：配置您的项目
+### 第 2 步：配置您的项目
 
-创建一个配置文件来配置您应用程序的语言：
+创建一个配置文件来配置您的应用程序语言：
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -85,26 +102,7 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 您的其他语言
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 您的其他语言
+      // 您的其他语言环境
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -113,32 +111,13 @@ const config = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 你的其他语言环境
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
-> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
+> 通过此配置文件，您可以设置本地化 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
 ### 第三步：在您的 Vite 配置中集成 Intlayer
 
 将 intlayer 插件添加到您的配置中。
 
-```typescript fileName="vite.config.ts" codeFormat="typescript"
+```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { intlayer } from "vite-intlayer";
@@ -149,31 +128,9 @@ export default defineConfig({
 });
 ```
 
-```javascript fileName="vite.config.mjs" codeFormat="esm"
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { intlayer } from "vite-intlayer";
+> `intlayer()` Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监控这些文件。它在 Vite 应用中定义了 Intlayer 的环境变量。此外，它还提供别名以优化性能。
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [svelte(), intlayer()],
-});
-```
-
-```javascript fileName="vite.config.cjs" codeFormat="commonjs"
-const { defineConfig } = require("vite");
-const react = require("@vitejs/plugin-react-swc");
-const { intlayer } = require("vite-intlayer");
-
-// https://vitejs.dev/config/
-module.exports = defineConfig({
-  plugins: [react(), intlayer()],
-});
-```
-
-> `intlayer()` Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。它在 Vite 应用程序中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
-
-### 第4步：声明您的内容
+### 第四步：声明您的内容
 
 创建并管理您的内容声明以存储翻译：
 
@@ -198,6 +155,7 @@ export default appContent;
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
+// 定义应用内容字典
 const appContent = {
   key: "app",
   content: {
@@ -216,7 +174,7 @@ export default appContent;
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
-// 应用内容声明
+// 定义应用内容字典
 const appContent = {
   key: "app",
   content: {
@@ -250,37 +208,283 @@ module.exports = appContent;
 
 > 您的内容声明可以定义在应用程序中的任何位置，只要它们被包含在 `contentDir` 目录中（默认是 `./src`），并且文件扩展名符合内容声明文件扩展名（默认是 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`）。
 
-> 有关更多详细信息，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/get_started.md)。
+> 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
 ### 第5步：在代码中使用 Intlayer
 
-[待完成]
+```svelte fileName="src/App.svelte"
+<script>
+  import { useIntlayer } from "svelte-intlayer";
+
+  const content = useIntlayer("app");
+</script>
+
+<div>
+
+
+<!-- 以简单内容渲染内容 -->
+<h1>{$content.title}</h1>
+<!-- 使用编辑器渲染可编辑内容 -->
+<h1><svelte:component this={$content.title} /></h1>
+<!-- 以字符串形式渲染内容 -->
+<div aria-label={$content.title.value}></div>
+```
+
+### （可选）步骤6：更改内容语言
+
+```svelte fileName="src/App.svelte"
+<script lang="ts">
+import  { getLocaleName } from 'intlayer';
+import { useLocale } from 'svelte-intlayer';
+
+// 获取语言信息和 setLocale 函数
+const { locale, availableLocales, setLocale } = useLocale();
+
+// 处理语言切换
+const changeLocale = (event: Event) => {
+  const target = event.target as HTMLSelectElement;
+  const newLocale = target.value;
+  setLocale(newLocale);
+};
+</script>
+
+<div>
+  <select value={$locale} on:change={changeLocale}>
+    {#each availableLocales ?? [] as loc}
+      <option value={loc}>
+        {getLocaleName(loc)}
+      </option>
+    {/each}
+  </select>
+</div>
+```
+
+### （可选）步骤7：渲染Markdown
+
+Intlayer支持在您的Svelte应用中直接渲染Markdown内容。默认情况下，Markdown被视为纯文本。要将Markdown转换为丰富的HTML，您可以集成`@humanspeak/svelte-markdown`或其他markdown解析器。
+
+> 要了解如何使用`intlayer`包声明markdown内容，请参阅[markdown文档](https://github.com/aymericzip/intlayer/tree/main/docs/zh/dictionary/markdown.md)。
+
+```svelte fileName="src/App.svelte"
+<script>
+  import { setIntlayerMarkdown } from "svelte-intlayer";
+
+  setIntlayerMarkdown((markdown) =>
+   // 将 markdown 内容渲染为字符串
+   return markdown;
+  );
+</script>
+
+<h1>{$content.markdownContent}</h1>
+```
+
+> 你也可以通过 `content.markdownContent.metadata.xxx` 属性访问你的 markdown front-matter 数据。
+
+### （可选）步骤 8：设置 intlayer 编辑器 / CMS
+
+要设置 intlayer 编辑器，你必须遵循 [intlayer 编辑器文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)。
+
+要设置 intlayer CMS，你必须遵循 [intlayer CMS 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)。
+
+在你的 Svelte 应用程序中，同时你必须在布局文件或应用程序的根目录中添加以下代码行：
 
-### （可选）第6步：更改内容语言
+```svelte fileName="src/layout.svelte"
+import { useIntlayerEditor } from "svelte-intlayer";
 
-[待完成]
+useIntlayerEditor();
+```
+
+### （可选）步骤 7：为你的应用程序添加本地化路由
+
+为了在你的 Svelte 应用程序中处理本地化路由，你可以使用 `svelte-spa-router`，并结合 Intlayer 的 `localeFlatMap` 来为每个语言环境生成路由。
+
+首先，安装 `svelte-spa-router`：
+
+```bash packageManager="npm"
+npm install svelte-spa-router
+```
+
+```bash packageManager="pnpm"
+pnpm add svelte-spa-router
+```
+
+```bash packageManager="yarn"
+yarn add svelte-spa-router
+```
+
+```bash packageManager="bun"
+bun add svelte-spa-router
+```
+
+然后，创建一个 `Router.svelte` 文件来定义你的路由：
+
+```svelte fileName="src/Router.svelte"
+<script lang="ts">
+import { localeFlatMap } from "intlayer";
+import Router from "svelte-spa-router";
+import { wrap } from "svelte-spa-router/wrap";
+import App from "./App.svelte";
+
+const routes = Object.fromEntries(
+    localeFlatMap(({locale, urlPrefix}) => [
+    [
+        urlPrefix || '/',
+        wrap({
+            component: App as any,
+            props: {
+                locale,
+            },
+        }),
+    ],
+    ])
+);
+</script>
+
+<Router {routes} />
+```
+
+更新你的 `main.ts`，将挂载的组件从 `App` 改为 `Router`：
+
+```typescript fileName="src/main.ts"
+import { mount } from "svelte";
+import Router from "./Router.svelte";
+
+const app = mount(Router, {
+  target: document.getElementById("app")!,
+});
+
+export default app;
+```
+
+最后，更新你的 `App.svelte` 以接收 `locale` 属性并使用 `useIntlayer`：
+
+```svelte fileName="src/App.svelte"
+<script lang="ts">
+import type { Locale } from 'intlayer';
+import { useIntlayer } from 'svelte-intlayer';
+import Counter from './lib/Counter.svelte';
+import LocaleSwitcher from './lib/LocaleSwitcher.svelte';
 
-### （可选）第7步：为您的应用添加本地化路由
+export let locale: Locale;
 
-[待完成]
+$: content = useIntlayer('app', locale);
+</script>
 
-### （可选）第8步：在语言环境更改时更改 URL
+<main>
+  <div class="locale-switcher-container">
+    <LocaleSwitcher currentLocale={locale} />
+  </div>
 
-[待完成]
+  <!-- ... 你的应用其余部分 ... -->
+</main>
+```
 
-### （可选）第9步：切换 HTML 的语言和方向属性
+#### 配置服务器端路由（可选）
 
-[待完成]
+同时，您还可以使用 `intlayerProxy` 为您的应用程序添加服务器端路由。该插件会根据 URL 自动检测当前的语言环境，并设置相应的语言环境 cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果未检测到任何语言环境，它将重定向到默认语言环境。
 
-### （可选）第10步：创建本地化链接组件
+> 注意，要在生产环境中使用 `intlayerProxy`，您需要将 `vite-intlayer` 包从 `devDependencies` 切换到 `dependencies`。
 
-[待完成]
+```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte(), intlayer(), intlayerProxy()],
+});
+```
+
+```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte(), intlayer(), intlayerProxy()],
+});
+```
+
+```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { svelte } = require("@sveltejs/vite-plugin-svelte");
+const { intlayer, intlayerProxy } = require("vite-intlayer");
+
+// https://vitejs.dev/config/
+module.exports = defineConfig({
+  plugins: [svelte(), intlayer(), intlayerProxy()],
+});
+```
+
+### （可选）步骤 8：当语言环境改变时更改 URL
+
+为了允许用户切换语言并相应地更新 URL，您可以创建一个 `LocaleSwitcher` 组件。该组件将使用 `intlayer` 中的 `getLocalizedUrl` 和 `svelte-spa-router` 中的 `push`。
+
+```svelte fileName="src/lib/LocaleSwitcher.svelte"
+<script lang="ts">
+import { getLocaleName, getLocalizedUrl } from "intlayer";
+import { useLocale } from "svelte-intlayer";
+import { push } from "svelte-spa-router";
+
+export let currentLocale: string | undefined = undefined;
+
+// 获取语言环境信息
+const { locale, availableLocales } = useLocale();
+
+// 处理语言环境变化
+const changeLocale = (event: Event) => {
+  plugins: [svelte(), intlayer(), intlayerProxy()],
+});
+```
+
+### （可选）步骤 8：当语言环境变化时更改 URL
+
+为了允许用户切换语言并相应地更新 URL，您可以创建一个 `LocaleSwitcher` 组件。该组件将使用来自 `intlayer` 的 `getLocalizedUrl` 和来自 `svelte-spa-router` 的 `push`。
+
+```svelte fileName="src/lib/LocaleSwitcher.svelte"
+<script lang="ts">
+import { getLocaleName, getLocalizedUrl } from "intlayer";
+import { useLocale } from "svelte-intlayer";
+import { push } from "svelte-spa-router";
+
+export let currentLocale: string | undefined = undefined;
+
+// 获取语言环境信息
+const { locale, availableLocales } = useLocale();
+
+// 处理语言环境变化
+const changeLocale = (event: Event) => {
+  const target = event.target as HTMLSelectElement;
+  const newLocale = target.value;
+  const currentUrl = window.location.pathname;
+  const url = getLocalizedUrl( currentUrl, newLocale);
+  push(url);
+};
+</script>
+
+<div class="locale-switcher">
+  <select value={currentLocale ?? $locale} onchange={changeLocale}>
+    {#each availableLocales ?? [] as loc}
+      <option value={loc}>
+        {getLocaleName(loc)}
+      </option>
+    {/each}
+  </select>
+</div>
+```
 
 ### Git 配置
 
 建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
 
-要做到这一点，您可以将以下指令添加到您的 `.gitignore` 文件中：
+为此，您可以在 `.gitignore` 文件中添加以下指令：
 
 ```plaintext
 # 忽略 Intlayer 生成的文件
@@ -295,17 +499,15 @@ module.exports = appContent;
 
 该扩展提供：
 
-- 翻译键的**自动补全**。
-- 缺失翻译的**实时错误检测**。
-- 翻译内容的**内联预览**。
-- 轻松创建和更新翻译的**快速操作**。
+- 翻译键的 **自动补全**。
+- 缺失翻译的 **实时错误检测**。
+- 翻译内容的 **内联预览**。
+- 轻松创建和更新翻译的 **快速操作**。
 
 有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
 
 ---
 
-### 深入探索
+### 深入了解
 
-要进一步使用，您可以实现[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)或使用[内容管理系统（CMS）](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)将内容外部化。
-
----
+要进一步提升，您可以实现[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)或使用[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)将内容外部化。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "7.1.8",
+  "version": "7.2.0",
   "private": false,
   "description": "Intlayer documentation",
   "keywords": [
@@ -72,13 +72,13 @@
     "watch": "webpack --config ./webpack.config.ts --watch"
   },
   "dependencies": {
-    "@intlayer/config": "7.1.8",
-    "@intlayer/core": "7.1.8",
-    "@intlayer/types": "7.1.8"
+    "@intlayer/config": "7.2.0",
+    "@intlayer/core": "7.2.0",
+    "@intlayer/types": "7.2.0"
   },
   "devDependencies": {
-    "@intlayer/api": "7.1.8",
-    "@intlayer/cli": "7.1.8",
+    "@intlayer/api": "7.2.0",
+    "@intlayer/cli": "7.2.0",
     "@types/node": "24.10.1",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",

package/src/generated/docs.entry.ts

@@ -737,6 +737,25 @@ export const docsEntry = {
     id: readLocale('intlayer_with_react_router_v7.md', 'id'),
     vi: readLocale('intlayer_with_react_router_v7.md', 'vi'),
   } as unknown as Record<LocalesValues, Promise<string>>,
+  './docs/en/intlayer_with_svelte_kit.md': {
+    en: readLocale('intlayer_with_svelte_kit.md', 'en'),
+    ru: readLocale('intlayer_with_svelte_kit.md', 'ru'),
+    ja: readLocale('intlayer_with_svelte_kit.md', 'ja'),
+    fr: readLocale('intlayer_with_svelte_kit.md', 'fr'),
+    ko: readLocale('intlayer_with_svelte_kit.md', 'ko'),
+    zh: readLocale('intlayer_with_svelte_kit.md', 'zh'),
+    es: readLocale('intlayer_with_svelte_kit.md', 'es'),
+    de: readLocale('intlayer_with_svelte_kit.md', 'de'),
+    ar: readLocale('intlayer_with_svelte_kit.md', 'ar'),
+    it: readLocale('intlayer_with_svelte_kit.md', 'it'),
+    'en-GB': readLocale('intlayer_with_svelte_kit.md', 'en-GB'),
+    pt: readLocale('intlayer_with_svelte_kit.md', 'pt'),
+    hi: readLocale('intlayer_with_svelte_kit.md', 'hi'),
+    tr: readLocale('intlayer_with_svelte_kit.md', 'tr'),
+    pl: readLocale('intlayer_with_svelte_kit.md', 'pl'),
+    id: readLocale('intlayer_with_svelte_kit.md', 'id'),
+    vi: readLocale('intlayer_with_svelte_kit.md', 'vi'),
+  } as unknown as Record<LocalesValues, Promise<string>>,
   './docs/en/intlayer_with_tanstack.md': {
     en: readLocale('intlayer_with_tanstack.md', 'en'),
     ru: readLocale('intlayer_with_tanstack.md', 'ru'),