@intlayer/docs 5.8.0-canary.0 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/intlayer_with_next-i18next.md +2 -2
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +96 -219
- package/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md +88 -129
- package/blog/ar/vue-i18n_vs_intlayer.md +268 -0
- package/blog/de/intlayer_with_next-i18next.md +2 -2
- package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/de/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/de/vue-i18n_vs_intlayer.md +268 -0
- package/blog/en/intlayer_with_next-i18next.md +2 -2
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +89 -220
- package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +85 -123
- package/blog/en/vue-i18n_vs_intlayer.md +268 -0
- package/blog/en-GB/intlayer_with_next-i18next.md +2 -2
- package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +85 -218
- package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md +80 -130
- package/blog/en-GB/vue-i18n_vs_intlayer.md +258 -0
- package/blog/es/intlayer_with_next-i18next.md +2 -2
- package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/es/vue-i18n_vs_intlayer.md +268 -0
- package/blog/fr/intlayer_with_next-i18next.md +2 -2
- package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
- package/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
- package/blog/fr/vue-i18n_vs_intlayer.md +269 -0
- package/blog/hi/intlayer_with_next-i18next.md +2 -2
- package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +97 -220
- package/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
- package/blog/hi/vue-i18n_vs_intlayer.md +268 -0
- package/blog/it/intlayer_with_next-i18next.md +2 -2
- package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
- package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
- package/blog/it/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ja/intlayer_with_next-i18next.md +2 -2
- package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/ja/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ko/intlayer_with_next-i18next.md +2 -2
- package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +95 -217
- package/blog/ko/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
- package/blog/ko/vue-i18n_vs_intlayer.md +268 -0
- package/blog/pt/intlayer_with_next-i18next.md +2 -2
- package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/pt/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ru/intlayer_with_next-i18next.md +2 -2
- package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +94 -217
- package/blog/ru/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/ru/vue-i18n_vs_intlayer.md +268 -0
- package/blog/zh/intlayer_with_next-i18next.md +2 -2
- package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/zh/vue-i18n_vs_intlayer.md +269 -0
- package/dist/cjs/generated/blog.entry.cjs +41 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +41 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/docs/ar/formatters.md +417 -31
- package/docs/ar/how_works_intlayer.md +2 -4
- package/docs/ar/interest_of_intlayer.md +7 -10
- package/docs/ar/intlayer_CMS.md +2 -3
- package/docs/ar/intlayer_visual_editor.md +2 -3
- package/docs/ar/intlayer_with_tanstack.md +1 -1
- package/docs/ar/introduction.md +4 -4
- package/docs/de/formatters.md +444 -34
- package/docs/de/introduction.md +2 -2
- package/docs/en/dictionary/enumeration.md +2 -2
- package/docs/en/dictionary/function_fetching.md +2 -2
- package/docs/en/dictionary/get_started.md +2 -2
- package/docs/en/dictionary/translation.md +2 -2
- package/docs/en/formatters.md +383 -15
- package/docs/en/how_works_intlayer.md +2 -4
- package/docs/en/interest_of_intlayer.md +40 -29
- package/docs/en/intlayer_CMS.md +2 -3
- package/docs/en/intlayer_visual_editor.md +2 -3
- package/docs/en/intlayer_with_create_react_app.md +2 -2
- package/docs/en/intlayer_with_express.md +2 -2
- package/docs/en/intlayer_with_tanstack.md +1 -1
- package/docs/en/introduction.md +4 -4
- package/docs/en/packages/express-intlayer/index.md +2 -2
- package/docs/en/packages/intlayer/getConfiguration.md +2 -3
- package/docs/en/packages/intlayer/getEnumeration.md +2 -7
- package/docs/en/packages/intlayer/getHTMLTextDir.md +2 -4
- package/docs/en/packages/intlayer/getLocaleLang.md +2 -4
- package/docs/en/packages/intlayer/getLocaleName.md +2 -3
- package/docs/en/packages/intlayer/getLocalizedUrl.md +2 -8
- package/docs/en/packages/intlayer/getMultilingualUrls.md +2 -7
- package/docs/en/packages/intlayer/getPathWithoutLocale.md +2 -3
- package/docs/en/packages/intlayer/getTranslation.md +2 -4
- package/docs/en/packages/intlayer/index.md +2 -2
- package/docs/en/packages/next-intlayer/index.md +2 -2
- package/docs/en/packages/next-intlayer/t.md +2 -2
- package/docs/en/packages/next-intlayer/useDictionary.md +2 -2
- package/docs/en/packages/next-intlayer/useIntlayer.md +2 -2
- package/docs/en/packages/next-intlayer/useLocale.md +2 -2
- package/docs/en/packages/react-intlayer/index.md +2 -2
- package/docs/en/packages/react-intlayer/t.md +2 -2
- package/docs/en/packages/react-intlayer/useI18n.md +2 -2
- package/docs/en/packages/react-intlayer/useIntlayer.md +2 -2
- package/docs/en/packages/react-intlayer/useLocale.md +2 -2
- package/docs/en/packages/react-scripts-intlayer/index.md +2 -2
- package/docs/en/packages/solid-intlayer/index.md +2 -2
- package/docs/en/packages/vite-intlayer/index.md +2 -2
- package/docs/en-GB/formatters.md +402 -16
- package/docs/en-GB/how_works_intlayer.md +2 -4
- package/docs/en-GB/interest_of_intlayer.md +7 -10
- package/docs/en-GB/intlayer_with_tanstack.md +1 -1
- package/docs/en-GB/introduction.md +2 -2
- package/docs/es/formatters.md +438 -28
- package/docs/es/how_works_intlayer.md +2 -4
- package/docs/es/interest_of_intlayer.md +7 -10
- package/docs/es/intlayer_with_tanstack.md +1 -1
- package/docs/es/introduction.md +2 -2
- package/docs/fr/formatters.md +438 -28
- package/docs/fr/how_works_intlayer.md +2 -4
- package/docs/fr/interest_of_intlayer.md +7 -10
- package/docs/fr/intlayer_with_tanstack.md +1 -1
- package/docs/fr/introduction.md +2 -2
- package/docs/hi/formatters.md +430 -39
- package/docs/hi/how_works_intlayer.md +2 -4
- package/docs/hi/interest_of_intlayer.md +7 -10
- package/docs/hi/intlayer_with_tanstack.md +1 -1
- package/docs/hi/introduction.md +2 -2
- package/docs/it/formatters.md +438 -30
- package/docs/it/how_works_intlayer.md +2 -4
- package/docs/it/interest_of_intlayer.md +7 -10
- package/docs/it/intlayer_with_tanstack.md +1 -1
- package/docs/it/introduction.md +2 -2
- package/docs/ja/formatters.md +435 -47
- package/docs/ja/how_works_intlayer.md +2 -4
- package/docs/ja/interest_of_intlayer.md +7 -10
- package/docs/ja/intlayer_with_tanstack.md +1 -1
- package/docs/ja/introduction.md +2 -2
- package/docs/ko/formatters.md +432 -41
- package/docs/ko/how_works_intlayer.md +2 -4
- package/docs/ko/interest_of_intlayer.md +7 -10
- package/docs/ko/intlayer_with_tanstack.md +1 -1
- package/docs/ko/introduction.md +2 -2
- package/docs/pt/formatters.md +416 -30
- package/docs/pt/how_works_intlayer.md +2 -4
- package/docs/pt/intlayer_with_tanstack.md +1 -1
- package/docs/pt/introduction.md +2 -2
- package/docs/ru/autoFill.md +2 -2
- package/docs/ru/configuration.md +1 -40
- package/docs/ru/formatters.md +438 -28
- package/docs/ru/how_works_intlayer.md +5 -7
- package/docs/ru/index.md +1 -1
- package/docs/ru/interest_of_intlayer.md +8 -11
- package/docs/ru/intlayer_CMS.md +7 -8
- package/docs/ru/intlayer_cli.md +4 -7
- package/docs/ru/intlayer_visual_editor.md +5 -6
- package/docs/ru/intlayer_with_angular.md +1 -1
- package/docs/ru/intlayer_with_create_react_app.md +5 -5
- package/docs/ru/intlayer_with_lynx+react.md +1 -1
- package/docs/ru/intlayer_with_nextjs_15.md +3 -3
- package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ru/intlayer_with_nuxt.md +1 -1
- package/docs/ru/intlayer_with_react_native+expo.md +2 -2
- package/docs/ru/intlayer_with_tanstack.md +3 -3
- package/docs/ru/intlayer_with_vite+preact.md +3 -3
- package/docs/ru/intlayer_with_vite+react.md +3 -3
- package/docs/ru/intlayer_with_vite+solid.md +1 -1
- package/docs/ru/intlayer_with_vite+svelte.md +1 -1
- package/docs/ru/intlayer_with_vite+vue.md +2 -2
- package/docs/ru/introduction.md +5 -5
- package/docs/ru/locale_mapper.md +1 -1
- package/docs/ru/packages/@intlayer/api/index.md +2 -2
- package/docs/ru/packages/@intlayer/chokidar/index.md +1 -1
- package/docs/ru/packages/@intlayer/cli/index.md +2 -2
- package/docs/ru/packages/@intlayer/config/index.md +2 -2
- package/docs/ru/packages/@intlayer/core/index.md +2 -2
- package/docs/ru/packages/@intlayer/design-system/index.md +2 -2
- package/docs/ru/packages/@intlayer/dictionary-entry/index.md +2 -2
- package/docs/ru/packages/@intlayer/editor/index.md +1 -1
- package/docs/ru/packages/@intlayer/editor-react/index.md +1 -1
- package/docs/ru/packages/@intlayer/webpack/index.md +1 -1
- package/docs/ru/packages/angular-intlayer/index.md +1 -1
- package/docs/ru/packages/express-intlayer/index.md +3 -3
- package/docs/ru/packages/express-intlayer/t.md +1 -1
- package/docs/ru/packages/intlayer/getEnumeration.md +3 -8
- package/docs/ru/packages/intlayer/getTranslation.md +3 -5
- package/docs/ru/packages/intlayer/getTranslationContent.md +1 -3
- package/docs/ru/packages/intlayer/index.md +3 -3
- package/docs/ru/packages/intlayer-cli/index.md +1 -1
- package/docs/ru/packages/intlayer-editor/index.md +2 -2
- package/docs/ru/packages/lynx-intlayer/index.md +1 -1
- package/docs/ru/packages/next-intlayer/index.md +4 -4
- package/docs/ru/packages/next-intlayer/t.md +4 -4
- package/docs/ru/packages/next-intlayer/useLocale.md +3 -3
- package/docs/ru/packages/nuxt-intlayer/index.md +1 -1
- package/docs/ru/packages/preact-intlayer/index.md +1 -1
- package/docs/ru/packages/react-intlayer/index.md +4 -4
- package/docs/ru/packages/react-intlayer/t.md +4 -4
- package/docs/ru/packages/react-native-intlayer/index.md +1 -1
- package/docs/ru/packages/react-scripts-intlayer/index.md +3 -3
- package/docs/ru/packages/solid-intlayer/index.md +3 -3
- package/docs/ru/packages/svelte-intlayer/index.md +1 -1
- package/docs/ru/packages/vite-intlayer/index.md +3 -3
- package/docs/ru/packages/vue-intlayer/index.md +1 -1
- package/docs/ru/per_locale_file.md +1 -1
- package/docs/ru/roadmap.md +3 -5
- package/docs/ru/vs_code_extension.md +1 -1
- package/docs/zh/formatters.md +446 -38
- package/docs/zh/how_works_intlayer.md +2 -4
- package/docs/zh/interest_of_intlayer.md +7 -10
- package/docs/zh/intlayer_with_tanstack.md +1 -1
- package/docs/zh/introduction.md +2 -2
- package/frequent_questions/ar/domain_routing.md +1 -1
- package/frequent_questions/en/domain_routing.md +1 -1
- package/frequent_questions/en-GB/domain_routing.md +1 -1
- package/frequent_questions/es/domain_routing.md +1 -1
- package/frequent_questions/fr/domain_routing.md +1 -1
- package/frequent_questions/hi/domain_routing.md +1 -1
- package/frequent_questions/it/domain_routing.md +1 -1
- package/frequent_questions/ko/domain_routing.md +1 -1
- package/frequent_questions/pt/domain_routing.md +1 -1
- package/frequent_questions/ru/domain_routing.md +1 -1
- package/frequent_questions/ru/get_locale_cookie.md +4 -4
- package/frequent_questions/ru/static_rendering.md +1 -2
- package/frequent_questions/zh/domain_routing.md +1 -1
- package/package.json +7 -7
- package/src/generated/blog.entry.ts +41 -0
package/docs/zh/formatters.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
createdAt: 2024-08-13
|
|
3
3
|
updatedAt: 2025-08-20
|
|
4
4
|
title: 格式化工具
|
|
5
|
-
description: 基于 Intl
|
|
5
|
+
description: 基于 Intl 的本地化格式化工具,支持数字、百分比、货币、日期、相对时间、单位和紧凑表示法。包含缓存的 Intl 辅助工具。
|
|
6
6
|
keywords:
|
|
7
7
|
- 格式化工具
|
|
8
8
|
- Intl
|
|
@@ -12,7 +12,8 @@ keywords:
|
|
|
12
12
|
- 日期
|
|
13
13
|
- 相对时间
|
|
14
14
|
- 单位
|
|
15
|
-
-
|
|
15
|
+
- 紧凑
|
|
16
|
+
- 列表
|
|
16
17
|
- 国际化
|
|
17
18
|
slugs:
|
|
18
19
|
- doc
|
|
@@ -23,7 +24,7 @@ slugs:
|
|
|
23
24
|
|
|
24
25
|
## 概述
|
|
25
26
|
|
|
26
|
-
Intlayer 提供了一组基于原生 `Intl` API 构建的轻量级辅助工具,以及一个缓存的 `Intl`
|
|
27
|
+
Intlayer 提供了一组基于原生 `Intl` API 构建的轻量级辅助工具,以及一个缓存的 `Intl` 包装器,避免重复构建重量级的格式化器。这些工具完全支持本地化,可以直接从主 `intlayer` 包中使用。
|
|
27
28
|
|
|
28
29
|
### 导入
|
|
29
30
|
|
|
@@ -37,34 +38,296 @@ import {
|
|
|
37
38
|
relativeTime,
|
|
38
39
|
units,
|
|
39
40
|
compact,
|
|
41
|
+
list,
|
|
42
|
+
getLocaleName,
|
|
43
|
+
getLocaleLang,
|
|
44
|
+
getLocaleFromPath,
|
|
45
|
+
getPathWithoutLocale,
|
|
46
|
+
getLocalizedUrl,
|
|
47
|
+
getHTMLTextDir,
|
|
48
|
+
getContent,
|
|
49
|
+
getLocalisedContent,
|
|
50
|
+
getTranslation,
|
|
51
|
+
getIntlayer,
|
|
52
|
+
getIntlayerAsync,
|
|
40
53
|
} from "intlayer";
|
|
41
54
|
```
|
|
42
55
|
|
|
43
|
-
如果您使用 React
|
|
56
|
+
如果您使用 React,也可以使用 hooks;请参见 `react-intlayer/format`。
|
|
44
57
|
|
|
45
58
|
## 缓存的 Intl
|
|
46
59
|
|
|
47
|
-
导出的 `Intl` 是对全局 `Intl`
|
|
60
|
+
导出的 `Intl` 是对全局 `Intl` 的一个轻量级缓存包装器。它会缓存 `NumberFormat`、`DateTimeFormat`、`RelativeTimeFormat`、`ListFormat`、`DisplayNames`、`Collator` 和 `PluralRules` 的实例,从而避免重复构建相同的格式化器。
|
|
48
61
|
|
|
49
|
-
|
|
62
|
+
由于格式化器的构建相对昂贵,这种缓存机制在不改变行为的情况下提升了性能。该包装器暴露了与原生 `Intl` 相同的 API,因此用法完全一致。
|
|
50
63
|
|
|
51
64
|
- 缓存是按进程进行的,对调用者透明。
|
|
52
65
|
|
|
53
|
-
> 如果环境中不支持 `Intl.DisplayNames
|
|
66
|
+
> 如果环境中不支持 `Intl.DisplayNames`,则只会打印一次仅限开发者的警告(建议使用 polyfill)。
|
|
54
67
|
|
|
55
68
|
示例:
|
|
56
69
|
|
|
57
70
|
```ts
|
|
58
71
|
import { Intl } from "intlayer";
|
|
59
72
|
|
|
73
|
+
// 数字格式化
|
|
60
74
|
const numberFormat = new Intl.NumberFormat("en-GB", {
|
|
61
75
|
style: "currency",
|
|
62
76
|
currency: "GBP",
|
|
63
77
|
});
|
|
64
78
|
numberFormat.format(1234.5); // "£1,234.50"
|
|
79
|
+
|
|
80
|
+
// 语言、地区等的显示名称
|
|
81
|
+
const displayNames = new Intl.DisplayNames("fr", { type: "language" });
|
|
82
|
+
displayNames.of("en"); // "anglais"
|
|
83
|
+
|
|
84
|
+
// 用于排序的比较器
|
|
85
|
+
const collator = new Intl.Collator("fr", { sensitivity: "base" });
|
|
86
|
+
collator.compare("é", "e"); // 0(相等)
|
|
87
|
+
|
|
88
|
+
// 复数规则
|
|
89
|
+
const pluralRules = new Intl.PluralRules("fr");
|
|
90
|
+
pluralRules.select(1); // "one"
|
|
91
|
+
pluralRules.select(2); // "other"
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## 额外的 Intl 工具
|
|
95
|
+
|
|
96
|
+
除了格式化辅助工具外,您还可以直接使用缓存的 Intl 包装器来使用其他 Intl 功能:
|
|
97
|
+
|
|
98
|
+
### `Intl.DisplayNames`
|
|
99
|
+
|
|
100
|
+
用于获取语言、地区、货币和书写系统的本地化名称:
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import { Intl } from "intlayer";
|
|
104
|
+
|
|
105
|
+
const languageNames = new Intl.DisplayNames("en", { type: "language" });
|
|
106
|
+
languageNames.of("fr"); // "French"
|
|
107
|
+
|
|
108
|
+
const regionNames = new Intl.DisplayNames("fr", { type: "region" });
|
|
109
|
+
regionNames.of("US"); // "États-Unis"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### `Intl.Collator`
|
|
113
|
+
|
|
114
|
+
用于基于区域设置的字符串比较和排序:
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { Intl } from "intlayer";
|
|
118
|
+
|
|
119
|
+
const collator = new Intl.Collator("de", {
|
|
120
|
+
sensitivity: "base",
|
|
121
|
+
numeric: true,
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
const words = ["äpfel", "zebra", "100", "20"];
|
|
125
|
+
words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### `Intl.PluralRules`
|
|
129
|
+
|
|
130
|
+
用于确定不同区域设置中的复数形式:
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
import { Intl } from "intlayer";
|
|
134
|
+
|
|
135
|
+
const pluralRules = new Intl.PluralRules("ar");
|
|
136
|
+
pluralRules.select(0); // "zero"
|
|
137
|
+
pluralRules.select(1); // "one"
|
|
138
|
+
pluralRules.select(2); // "two"
|
|
139
|
+
pluralRules.select(3); // "few"
|
|
140
|
+
pluralRules.select(11); // "many"
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## 区域设置工具
|
|
144
|
+
|
|
145
|
+
### `getLocaleName(displayLocale, targetLocale?)`
|
|
146
|
+
|
|
147
|
+
获取某个区域设置在另一种区域设置中的本地化名称:
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { getLocaleName } from "intlayer";
|
|
151
|
+
|
|
152
|
+
getLocaleName("fr", "en"); // "French"
|
|
153
|
+
getLocaleName("en", "fr"); // "anglais"
|
|
154
|
+
getLocaleName("de", "es"); // "alemán"
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
- **displayLocale**: 要获取名称的语言环境
|
|
158
|
+
- **targetLocale**: 用于显示名称的语言环境(默认为 displayLocale)
|
|
159
|
+
|
|
160
|
+
### `getLocaleLang(locale?)`
|
|
161
|
+
|
|
162
|
+
从语言环境字符串中提取语言代码:
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
import { getLocaleLang } from "intlayer";
|
|
166
|
+
|
|
167
|
+
getLocaleLang("en-US"); // "en"
|
|
168
|
+
getLocaleLang("fr-CA"); // "fr"
|
|
169
|
+
getLocaleLang("de"); // "de"
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
- **locale**: 要提取语言代码的语言环境(默认为当前语言环境)
|
|
173
|
+
|
|
174
|
+
### `getLocaleFromPath(inputUrl)`
|
|
175
|
+
|
|
176
|
+
从 URL 或路径名中提取语言环境段:
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
import { getLocaleFromPath } from "intlayer";
|
|
180
|
+
|
|
181
|
+
getLocaleFromPath("/en/dashboard"); // "en"
|
|
182
|
+
getLocaleFromPath("/fr/dashboard"); // "fr"
|
|
183
|
+
getLocaleFromPath("/dashboard"); // "en"(默认语言环境)
|
|
184
|
+
getLocaleFromPath("https://example.com/es/about"); // "es"
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
- **inputUrl**:要处理的完整 URL 字符串或路径名
|
|
188
|
+
- **returns**:检测到的语言环境,如果未找到语言环境则返回默认语言环境
|
|
189
|
+
|
|
190
|
+
### `getPathWithoutLocale(inputUrl, locales?)`
|
|
191
|
+
|
|
192
|
+
从 URL 或路径名中移除语言环境段:
|
|
193
|
+
|
|
194
|
+
```ts
|
|
195
|
+
import { getPathWithoutLocale } from "intlayer";
|
|
196
|
+
|
|
197
|
+
getPathWithoutLocale("/en/dashboard"); // "/dashboard"
|
|
198
|
+
getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
|
|
199
|
+
getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
- **inputUrl**:要处理的完整 URL 字符串或路径名
|
|
203
|
+
- **locales**:可选的支持语言数组(默认为配置的语言)
|
|
204
|
+
- **returns**:去除语言段后的 URL
|
|
205
|
+
|
|
206
|
+
### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
|
|
207
|
+
|
|
208
|
+
为当前语言生成本地化 URL:
|
|
209
|
+
|
|
210
|
+
```ts
|
|
211
|
+
import { getLocalizedUrl } from "intlayer";
|
|
212
|
+
|
|
213
|
+
getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
|
|
214
|
+
getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
|
|
215
|
+
getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
- **url**:要本地化的原始 URL
|
|
219
|
+
- **currentLocale**:当前语言
|
|
220
|
+
- **locales**:可选的支持语言数组(默认为配置的语言)
|
|
221
|
+
- **defaultLocale**:可选的默认语言环境(默认为配置的默认语言环境)
|
|
222
|
+
- **prefixDefault**:是否为默认语言环境添加前缀(默认为配置值)
|
|
223
|
+
|
|
224
|
+
### `getHTMLTextDir(locale?)`
|
|
225
|
+
|
|
226
|
+
返回指定语言环境的文本方向:
|
|
227
|
+
|
|
228
|
+
```ts
|
|
229
|
+
import { getHTMLTextDir } from "intlayer";
|
|
230
|
+
|
|
231
|
+
getHTMLTextDir("en-US"); // "ltr"
|
|
232
|
+
getHTMLTextDir("ar"); // "rtl"
|
|
233
|
+
getHTMLTextDir("he"); // "rtl"
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
- **locale**:要获取文本方向的语言环境(默认为当前语言环境)
|
|
237
|
+
- **returns**:返回 `"ltr"`、`"rtl"` 或 `"auto"`
|
|
238
|
+
|
|
239
|
+
## 内容处理工具
|
|
240
|
+
|
|
241
|
+
### `getContent(node, nodeProps, locale?)`
|
|
242
|
+
|
|
243
|
+
使用所有可用插件(翻译、枚举、插入等)转换内容节点:
|
|
244
|
+
|
|
245
|
+
```ts
|
|
246
|
+
import { getContent } from "intlayer";
|
|
247
|
+
|
|
248
|
+
const content = getContent(
|
|
249
|
+
contentNode,
|
|
250
|
+
{ dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
|
|
251
|
+
"fr"
|
|
252
|
+
);
|
|
65
253
|
```
|
|
66
254
|
|
|
67
|
-
|
|
255
|
+
- **node**:要转换的内容节点
|
|
256
|
+
- **nodeProps**:转换上下文的属性
|
|
257
|
+
- **locale**:可选的语言环境(默认为配置的默认语言环境)
|
|
258
|
+
|
|
259
|
+
### `getLocalisedContent(node, locale, nodeProps, fallback?)`
|
|
260
|
+
|
|
261
|
+
仅使用翻译插件转换内容节点:
|
|
262
|
+
|
|
263
|
+
```ts
|
|
264
|
+
import { getLocalisedContent } from "intlayer";
|
|
265
|
+
|
|
266
|
+
const content = getLocalisedContent(
|
|
267
|
+
contentNode,
|
|
268
|
+
"fr",
|
|
269
|
+
{ dictionaryKey: "common" },
|
|
270
|
+
true // 如果缺少翻译则回退到默认语言环境
|
|
271
|
+
);
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
- **node**:要转换的内容节点
|
|
275
|
+
- **locale**:用于翻译的语言环境
|
|
276
|
+
- **nodeProps**:转换上下文的属性
|
|
277
|
+
- **fallback**:是否回退到默认语言环境(默认为 false)
|
|
278
|
+
|
|
279
|
+
### `getTranslation(languageContent, locale?, fallback?)`
|
|
280
|
+
|
|
281
|
+
从语言内容对象中提取特定语言环境的内容:
|
|
282
|
+
|
|
283
|
+
```ts
|
|
284
|
+
import { getTranslation } from "intlayer";
|
|
285
|
+
|
|
286
|
+
const content = getTranslation(
|
|
287
|
+
{
|
|
288
|
+
en: "Hello",
|
|
289
|
+
fr: "Bonjour",
|
|
290
|
+
de: "Hallo",
|
|
291
|
+
},
|
|
292
|
+
"fr",
|
|
293
|
+
true
|
|
294
|
+
); // "Bonjour"
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
- **languageContent**:映射语言环境到内容的对象
|
|
298
|
+
- **locale**:目标语言环境(默认为配置的默认语言环境)
|
|
299
|
+
- **fallback**:是否回退到默认语言环境(默认为 true)
|
|
300
|
+
|
|
301
|
+
### `getIntlayer(dictionaryKey, locale?, plugins?)`
|
|
302
|
+
|
|
303
|
+
通过键检索并转换字典中的内容:
|
|
304
|
+
|
|
305
|
+
```ts
|
|
306
|
+
import { getIntlayer } from "intlayer";
|
|
307
|
+
|
|
308
|
+
const content = getIntlayer("common", "fr");
|
|
309
|
+
const nestedContent = getIntlayer("common", "fr", customPlugins);
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
- **dictionaryKey**:要检索的字典键
|
|
313
|
+
- **locale**:可选的语言环境(默认为配置的默认语言环境)
|
|
314
|
+
- **plugins**:可选的自定义转换插件数组
|
|
315
|
+
|
|
316
|
+
### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
|
|
317
|
+
|
|
318
|
+
异步从远程字典中检索内容:
|
|
319
|
+
|
|
320
|
+
```ts
|
|
321
|
+
import { getIntlayerAsync } from "intlayer";
|
|
322
|
+
|
|
323
|
+
const content = await getIntlayerAsync("common", "fr");
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
- **dictionaryKey**:要检索的字典键
|
|
327
|
+
- **locale**:可选的语言环境(默认为配置的默认语言环境)
|
|
328
|
+
- **plugins**:可选的自定义转换插件数组
|
|
329
|
+
|
|
330
|
+
## 格式化工具
|
|
68
331
|
|
|
69
332
|
以下所有辅助函数均从 `intlayer` 导出。
|
|
70
333
|
|
|
@@ -81,7 +344,7 @@ numberFormat.format(1234.5); // "£1,234.50"
|
|
|
81
344
|
import { number } from "intlayer";
|
|
82
345
|
|
|
83
346
|
number(123456.789); // "123,456.789"(在 en-US 中)
|
|
84
|
-
number("1000000", { locale: "fr" }); // "1
|
|
347
|
+
number("1000000", { locale: "fr" }); // "1 000 000"
|
|
85
348
|
number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
|
|
86
349
|
```
|
|
87
350
|
|
|
@@ -89,7 +352,7 @@ number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
|
|
|
89
352
|
|
|
90
353
|
将数字格式化为百分比字符串。
|
|
91
354
|
|
|
92
|
-
行为:大于1的值被解释为完整的百分比并进行归一化(例如,`25` → `25%`,`0.25` → `25%`)。
|
|
355
|
+
行为:大于 1 的值被解释为完整的百分比并进行归一化(例如,`25` → `25%`,`0.25` → `25%`)。
|
|
93
356
|
|
|
94
357
|
- **value**: `number | string`
|
|
95
358
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
@@ -106,7 +369,7 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
|
|
|
106
369
|
|
|
107
370
|
### `currency(value, options?)`
|
|
108
371
|
|
|
109
|
-
|
|
372
|
+
将数值格式化为本地化货币。默认使用 `USD`,保留两位小数。
|
|
110
373
|
|
|
111
374
|
- **value**: `number | string`
|
|
112
375
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
@@ -118,7 +381,7 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
|
|
|
118
381
|
import { currency } from "intlayer";
|
|
119
382
|
|
|
120
383
|
currency(1234.5, { currency: "EUR" }); // "€1,234.50"
|
|
121
|
-
currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5
|
|
384
|
+
currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
|
|
122
385
|
```
|
|
123
386
|
|
|
124
387
|
### `date(date, optionsOrPreset?)`
|
|
@@ -126,7 +389,7 @@ currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); //
|
|
|
126
389
|
使用 `Intl.DateTimeFormat` 格式化日期/时间值。
|
|
127
390
|
|
|
128
391
|
- **date**: `Date | string | number`
|
|
129
|
-
- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }`
|
|
392
|
+
- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` 或者以下预设之一:
|
|
130
393
|
- 预设值: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
|
|
131
394
|
|
|
132
395
|
示例:
|
|
@@ -134,7 +397,7 @@ currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); //
|
|
|
134
397
|
```ts
|
|
135
398
|
import { date } from "intlayer";
|
|
136
399
|
|
|
137
|
-
date(new Date(), "short"); //
|
|
400
|
+
date(new Date(), "short"); // 例如,"08/02/25, 14:30"
|
|
138
401
|
date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
|
|
139
402
|
```
|
|
140
403
|
|
|
@@ -142,11 +405,11 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
|
|
|
142
405
|
|
|
143
406
|
使用 `Intl.RelativeTimeFormat` 格式化两个时间点之间的相对时间。
|
|
144
407
|
|
|
145
|
-
- 传入 "now"
|
|
408
|
+
- 传入 "now" 作为第一个参数,目标时间作为第二个参数,可以获得自然的表达方式。
|
|
146
409
|
- **from**: `Date | string | number`
|
|
147
410
|
- **to**: `Date | string | number`(默认为 `new Date()`)
|
|
148
411
|
- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
|
|
149
|
-
-
|
|
412
|
+
- 默认 `unit` 为 `"second"`。
|
|
150
413
|
|
|
151
414
|
示例:
|
|
152
415
|
|
|
@@ -163,11 +426,11 @@ relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 hours a
|
|
|
163
426
|
|
|
164
427
|
### `units(value, options?)`
|
|
165
428
|
|
|
166
|
-
使用 `Intl.NumberFormat`
|
|
429
|
+
使用 `Intl.NumberFormat` 的 `style: 'unit'` 将数值格式化为本地化的单位字符串。
|
|
167
430
|
|
|
168
431
|
- **value**: `number | string`
|
|
169
432
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
170
|
-
- 常用字段:`unit`(例如 `"kilometer"
|
|
433
|
+
- 常用字段:`unit`(例如 `"kilometer"`,`"byte"`),`unitDisplay`(`"short" | "narrow" | "long"`)
|
|
171
434
|
- 默认值:`unit: 'day'`,`unitDisplay: 'short'`,`useGrouping: false`
|
|
172
435
|
|
|
173
436
|
示例:
|
|
@@ -181,10 +444,10 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"(依赖于区
|
|
|
181
444
|
|
|
182
445
|
### `compact(value, options?)`
|
|
183
446
|
|
|
184
|
-
|
|
447
|
+
使用紧凑表示法格式化数字(例如,`1.2K`,`1M`)。
|
|
185
448
|
|
|
186
|
-
- **value
|
|
187
|
-
|
|
449
|
+
- **value**:`number | string`
|
|
450
|
+
- **options**:`Intl.NumberFormatOptions & { locale?: LocalesValues }`(内部使用 `notation: 'compact'`)
|
|
188
451
|
|
|
189
452
|
示例:
|
|
190
453
|
|
|
@@ -195,45 +458,190 @@ compact(1200); // "1.2K"
|
|
|
195
458
|
compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
|
|
196
459
|
```
|
|
197
460
|
|
|
461
|
+
### `list(values, options?)`
|
|
462
|
+
|
|
463
|
+
使用 `Intl.ListFormat` 将值数组格式化为本地化的列表字符串。
|
|
464
|
+
|
|
465
|
+
- **values**: `(string | number)[]`
|
|
466
|
+
- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
|
|
467
|
+
- 常用字段:`type`(`"conjunction" | "disjunction" | "unit"`),`style`(`"long" | "short" | "narrow"`)
|
|
468
|
+
- 默认值:`type: 'conjunction'`,`style: 'long'`
|
|
469
|
+
|
|
470
|
+
示例:
|
|
471
|
+
|
|
472
|
+
```ts
|
|
473
|
+
import { list } from "intlayer";
|
|
474
|
+
|
|
475
|
+
list(["apple", "banana", "orange"]); // "apple, banana, and orange"
|
|
476
|
+
list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
|
|
477
|
+
list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
|
|
478
|
+
```
|
|
479
|
+
|
|
198
480
|
## 说明
|
|
199
481
|
|
|
200
|
-
-
|
|
201
|
-
-
|
|
202
|
-
-
|
|
482
|
+
- 所有辅助函数都接受 `string` 类型的输入;它们会在内部被强制转换为数字或日期。
|
|
483
|
+
- 如果未提供,区域设置默认使用您配置的 `internationalization.defaultLocale`。
|
|
484
|
+
- 这些工具是轻量封装;对于高级格式化,请直接传递标准的 `Intl` 选项。
|
|
203
485
|
|
|
204
|
-
##
|
|
486
|
+
## 入口点和重新导出(`@index.ts`)
|
|
205
487
|
|
|
206
|
-
|
|
488
|
+
格式化函数位于核心包中,并从更高级的包中重新导出,以保持跨运行时的导入简洁:
|
|
207
489
|
|
|
208
490
|
示例:
|
|
209
491
|
|
|
210
492
|
```ts
|
|
211
493
|
// 应用代码(推荐)
|
|
212
|
-
import {
|
|
494
|
+
import {
|
|
495
|
+
number,
|
|
496
|
+
currency,
|
|
497
|
+
date,
|
|
498
|
+
relativeTime,
|
|
499
|
+
units,
|
|
500
|
+
compact,
|
|
501
|
+
list,
|
|
502
|
+
Intl,
|
|
503
|
+
getLocaleName,
|
|
504
|
+
getLocaleLang,
|
|
505
|
+
getLocaleFromPath,
|
|
506
|
+
getPathWithoutLocale,
|
|
507
|
+
getLocalizedUrl,
|
|
508
|
+
getHTMLTextDir,
|
|
509
|
+
getContent,
|
|
510
|
+
getLocalisedContent,
|
|
511
|
+
getTranslation,
|
|
512
|
+
getIntlayer,
|
|
513
|
+
getIntlayerAsync,
|
|
514
|
+
} from "intlayer";
|
|
213
515
|
```
|
|
214
516
|
|
|
215
517
|
### React
|
|
216
518
|
|
|
217
519
|
客户端组件:
|
|
218
520
|
|
|
521
|
+
```tsx
|
|
522
|
+
import {
|
|
523
|
+
useNumber,
|
|
524
|
+
useCurrency,
|
|
525
|
+
useDate,
|
|
526
|
+
usePercentage,
|
|
527
|
+
useCompact,
|
|
528
|
+
useList,
|
|
529
|
+
useRelativeTime,
|
|
530
|
+
useUnit,
|
|
531
|
+
} from "react-intlayer/format";
|
|
532
|
+
// 或在 Next.js 应用中
|
|
533
|
+
import {
|
|
534
|
+
useNumber,
|
|
535
|
+
useCurrency,
|
|
536
|
+
useDate,
|
|
537
|
+
usePercentage,
|
|
538
|
+
useCompact,
|
|
539
|
+
useList,
|
|
540
|
+
useRelativeTime,
|
|
541
|
+
useUnit,
|
|
542
|
+
} from "next-intlayer/client/format";
|
|
543
|
+
|
|
544
|
+
const MyComponent = () => {
|
|
545
|
+
const number = useNumber();
|
|
546
|
+
const currency = useCurrency();
|
|
547
|
+
const date = useDate();
|
|
548
|
+
const percentage = usePercentage();
|
|
549
|
+
const compact = useCompact();
|
|
550
|
+
const list = useList();
|
|
551
|
+
const relativeTime = useRelativeTime();
|
|
552
|
+
const unit = useUnit();
|
|
553
|
+
|
|
554
|
+
return (
|
|
555
|
+
<div>
|
|
556
|
+
<p>{number(123456.789)}</p>
|
|
557
|
+
<p>{currency(1234.5, { currency: "EUR" })}</p>
|
|
558
|
+
<p>{date(new Date(), "short")}</p>
|
|
559
|
+
<p>{percentage(0.25)}</p>
|
|
560
|
+
<p>{compact(1200)}</p>
|
|
561
|
+
<p>{list(["apple", "banana", "orange"])}</p>
|
|
562
|
+
<p>{relativeTime(new Date(), new Date() + 1000)}</p>
|
|
563
|
+
<p>{unit(123456.789, { unit: "kilometer" })}</p>
|
|
564
|
+
</div>
|
|
565
|
+
);
|
|
566
|
+
};
|
|
567
|
+
```
|
|
568
|
+
|
|
569
|
+
服务器组件(或 React 服务器运行时):
|
|
570
|
+
|
|
571
|
+
```ts
|
|
572
|
+
import {
|
|
573
|
+
useNumber,
|
|
574
|
+
useCurrency,
|
|
575
|
+
useDate,
|
|
576
|
+
usePercentage,
|
|
577
|
+
useCompact,
|
|
578
|
+
useList,
|
|
579
|
+
useRelativeTime,
|
|
580
|
+
useUnit,
|
|
581
|
+
} from "react-intlayer/server/format";
|
|
582
|
+
// 或在 Next.js 应用中
|
|
583
|
+
import {
|
|
584
|
+
useNumber,
|
|
585
|
+
useCurrency,
|
|
586
|
+
useDate,
|
|
587
|
+
usePercentage,
|
|
588
|
+
useCompact,
|
|
589
|
+
useList,
|
|
590
|
+
useRelativeTime,
|
|
591
|
+
useUnit,
|
|
592
|
+
} from "next-intlayer/server/format";
|
|
593
|
+
```
|
|
594
|
+
|
|
595
|
+
> 这些钩子将会从 `IntlayerProvider` 或 `IntlayerServerProvider` 中获取语言环境
|
|
596
|
+
|
|
597
|
+
### Vue
|
|
598
|
+
|
|
599
|
+
客户端组件:
|
|
600
|
+
|
|
219
601
|
```ts
|
|
220
|
-
import {
|
|
221
|
-
|
|
222
|
-
|
|
602
|
+
import {
|
|
603
|
+
useNumber,
|
|
604
|
+
useCurrency,
|
|
605
|
+
useDate,
|
|
606
|
+
usePercentage,
|
|
607
|
+
useCompact,
|
|
608
|
+
useList,
|
|
609
|
+
useRelativeTime,
|
|
610
|
+
useUnit,
|
|
611
|
+
} from "vue-intlayer/format";
|
|
223
612
|
```
|
|
224
613
|
|
|
225
|
-
|
|
614
|
+
> 这些组合式函数将会使用注入的 `IntlayerProvider` 中的语言环境
|
|
615
|
+
|
|
616
|
+
## 文档历史
|
|
617
|
+
|
|
618
|
+
| 版本 | 日期 | 变更内容 |
|
|
619
|
+
| ----- | ---------- | ------------------- |
|
|
620
|
+
| 5.8.0 | 2025-08-20 | 添加了 vue 格式化器 |
|
|
621
|
+
| 5.8.0 | 2025-08-18 | 添加了格式化器文档 |
|
|
622
|
+
|
|
623
|
+
客户端组件:
|
|
226
624
|
|
|
227
625
|
```ts
|
|
228
|
-
import {
|
|
229
|
-
|
|
230
|
-
|
|
626
|
+
import {
|
|
627
|
+
useNumber,
|
|
628
|
+
useCurrency,
|
|
629
|
+
useDate,
|
|
630
|
+
usePercentage,
|
|
631
|
+
useCompact,
|
|
632
|
+
useList,
|
|
633
|
+
useRelativeTime,
|
|
634
|
+
useUnit,
|
|
635
|
+
} from "vue-intlayer/format";
|
|
231
636
|
```
|
|
232
637
|
|
|
233
|
-
>
|
|
638
|
+
> 这些组合式函数将会使用注入的 `IntlayerProvider` 中的语言环境
|
|
234
639
|
|
|
235
640
|
## 文档历史
|
|
236
641
|
|
|
237
|
-
| 版本 | 日期 | 变更内容
|
|
238
|
-
| ----- | ---------- |
|
|
239
|
-
| 5.8.0 | 2025-08-
|
|
642
|
+
| 版本 | 日期 | 变更内容 |
|
|
643
|
+
| ----- | ---------- | ---------------------------------------------------------------------- |
|
|
644
|
+
| 5.8.0 | 2025-08-20 | 添加列表格式化器文档 |
|
|
645
|
+
| 5.8.0 | 2025-08-20 | 添加额外的 Intl 工具(DisplayNames、Collator、PluralRules) |
|
|
646
|
+
| 5.8.0 | 2025-08-20 | 添加语言环境工具(getLocaleName、getLocaleLang、getLocaleFromPath 等) |
|
|
647
|
+
| 5.8.0 | 2025-08-20 | 添加内容处理工具(getContent、getTranslation、getIntlayer 等) |
|
|
@@ -25,8 +25,8 @@ Intlayer 的核心理念是采用每个组件的内容管理。因此,Intlayer
|
|
|
25
25
|
.
|
|
26
26
|
└── Components
|
|
27
27
|
└── MyComponent
|
|
28
|
-
├── index.content.
|
|
29
|
-
└── index.
|
|
28
|
+
├── index.content.ts
|
|
29
|
+
└── index.tsx
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
为此,Intlayer 的作用是找到项目中所有的 `内容声明文件`,无论格式如何,然后从中生成 `字典`。
|
|
@@ -45,12 +45,10 @@ Intlayer 的核心理念是采用每个组件的内容管理。因此,Intlayer
|
|
|
45
45
|
- 使用应用插件,例如 [`vite-intlayer` 包](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/vite-intlayer/index.md),或其在 [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/next-intlayer/index.md) 中的等价插件。当您使用这些插件之一时,Intlayer 会在启动(开发模式)或构建(生产模式)应用时自动构建您的字典。
|
|
46
46
|
|
|
47
47
|
1. 内容文件的声明
|
|
48
|
-
|
|
49
48
|
- 内容文件可以以多种格式定义,例如 TypeScript、ECMAScript、CommonJS 或 JSON。
|
|
50
49
|
- 内容文件可以在项目中的任何地方定义,这有助于更好的维护和扩展性。重要的是要遵守内容文件的文件扩展名约定。默认扩展名为 `*.content.{js|cjs|mjs|ts|tsx|json}`,但可以在 [配置文件](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md) 中修改。
|
|
51
50
|
|
|
52
51
|
2. `字典` 的生成
|
|
53
|
-
|
|
54
52
|
- 字典是从内容文件生成的。默认情况下,Intlayer 字典生成在项目的 `.intlayer/dictionaries` 目录中。
|
|
55
53
|
- 这些字典以不同格式生成,以满足所有需求并优化应用性能。
|
|
56
54
|
|
|
@@ -198,25 +198,22 @@ const ComponentExample = () => {
|
|
|
198
198
|
- 可以使用 VSCode 扩展创建 `.content.{{ts|mjs|cjs|json}}` 文件
|
|
199
199
|
- IDE 中的自动补全 AI 工具(如 GitHub Copilot)可以帮助你声明内容,减少复制/粘贴
|
|
200
200
|
|
|
201
|
-
2.
|
|
201
|
+
2. **清理代码库**
|
|
202
|
+
- 降低复杂性
|
|
203
|
+
- 提高可维护性
|
|
202
204
|
|
|
203
|
-
3.
|
|
204
|
-
|
|
205
|
-
4. **更轻松地复制组件及其相关内容(例如:登录/注册组件等)**
|
|
205
|
+
3. **更轻松地复制组件及其相关内容(例如:登录/注册组件等)**
|
|
206
206
|
- 限制影响其他组件内容的风险
|
|
207
207
|
- 通过复制/粘贴内容从一个应用到另一个应用,无需外部依赖
|
|
208
208
|
|
|
209
|
-
|
|
210
|
-
-
|
|
209
|
+
4. **避免因未使用的组件而污染代码库,产生未使用的键/值**
|
|
210
|
+
- 如果你不使用一个组件,Intlayer 不会导入它的相关内容
|
|
211
211
|
- 如果你删除一个组件,你会更容易记得删除其相关内容,因为它们会存在于同一个文件夹中
|
|
212
212
|
|
|
213
|
-
|
|
213
|
+
5. **降低 AI 代理声明多语言内容的推理成本**
|
|
214
214
|
- AI 代理无需扫描整个代码库来确定内容的实现位置
|
|
215
215
|
- 翻译可以通过 IDE 中的自动补全 AI 工具(如 GitHub Copilot)轻松完成
|
|
216
216
|
|
|
217
|
-
7. **优化加载性能**
|
|
218
|
-
- 如果组件是懒加载的,其相关内容也会同时加载
|
|
219
|
-
|
|
220
217
|
## Intlayer 的附加功能
|
|
221
218
|
|
|
222
219
|
| 功能 | 描述 |
|