@intlayer/docs 6.0.1 → 6.0.2-canary.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/dist/cjs/blog.cjs.map +1 -1
- package/dist/cjs/common.cjs +6 -5
- package/dist/cjs/common.cjs.map +1 -1
- package/dist/cjs/generated/blog.entry.cjs +318 -1863
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +1317 -6282
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/cjs/generated/frequentQuestions.entry.cjs +197 -1182
- package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
- package/dist/cjs/generated/legal.entry.cjs +43 -84
- package/dist/cjs/generated/legal.entry.cjs.map +1 -1
- package/dist/esm/blog.mjs.map +1 -1
- package/dist/esm/common.mjs +2 -5
- package/dist/esm/common.mjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +318 -1863
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +1317 -6282
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/esm/generated/frequentQuestions.entry.mjs +197 -1182
- package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
- package/dist/esm/generated/legal.entry.mjs +43 -84
- package/dist/esm/generated/legal.entry.mjs.map +1 -1
- package/dist/types/blog.d.ts +1 -1
- package/dist/types/blog.d.ts.map +1 -1
- package/dist/types/common.d.ts +1 -1
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -1
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +2 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/dist/types/generated/frequentQuestions.entry.d.ts +1 -1
- package/dist/types/generated/frequentQuestions.entry.d.ts.map +1 -1
- package/dist/types/generated/legal.entry.d.ts +1 -1
- package/dist/types/generated/legal.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_CMS.md +261 -85
- package/docs/ar/releases/v6.md +273 -0
- package/docs/ar/roadmap.md +1 -3
- package/docs/ar/vs_code_extension.md +94 -63
- package/docs/de/intlayer_CMS.md +247 -65
- package/docs/de/releases/v6.md +298 -0
- package/docs/de/roadmap.md +1 -3
- package/docs/de/vs_code_extension.md +89 -58
- package/docs/en/configuration.md +9 -2
- package/docs/en/intlayer_CMS.md +205 -23
- package/docs/en/intlayer_cli.md +4 -4
- package/docs/en/intlayer_visual_editor.md +7 -6
- package/docs/en/intlayer_with_nextjs_14.md +17 -1
- package/docs/en/intlayer_with_nextjs_15.md +17 -1
- package/docs/en/releases/v6.md +268 -0
- package/docs/en/roadmap.md +1 -3
- package/docs/en/vs_code_extension.md +79 -49
- package/docs/en-GB/intlayer_CMS.md +216 -52
- package/docs/en-GB/releases/v6.md +297 -0
- package/docs/en-GB/roadmap.md +1 -3
- package/docs/en-GB/vs_code_extension.md +79 -48
- package/docs/es/intlayer_CMS.md +257 -84
- package/docs/es/releases/v6.md +274 -0
- package/docs/es/roadmap.md +1 -3
- package/docs/es/vs_code_extension.md +90 -60
- package/docs/fr/intlayer_CMS.md +250 -68
- package/docs/fr/releases/v6.md +274 -0
- package/docs/fr/roadmap.md +1 -3
- package/docs/fr/vs_code_extension.md +94 -63
- package/docs/hi/intlayer_CMS.md +253 -77
- package/docs/hi/releases/v6.md +273 -0
- package/docs/hi/roadmap.md +1 -3
- package/docs/hi/vs_code_extension.md +92 -61
- package/docs/it/intlayer_CMS.md +251 -73
- package/docs/it/releases/v6.md +273 -0
- package/docs/it/roadmap.md +1 -3
- package/docs/it/vs_code_extension.md +94 -63
- package/docs/ja/intlayer_CMS.md +282 -97
- package/docs/ja/releases/v6.md +273 -0
- package/docs/ja/roadmap.md +1 -3
- package/docs/ja/vs_code_extension.md +99 -68
- package/docs/ko/intlayer_CMS.md +267 -93
- package/docs/ko/releases/v6.md +273 -0
- package/docs/ko/roadmap.md +1 -3
- package/docs/ko/vs_code_extension.md +88 -57
- package/docs/pt/intlayer_CMS.md +261 -83
- package/docs/pt/releases/v6.md +273 -0
- package/docs/pt/roadmap.md +1 -3
- package/docs/pt/vs_code_extension.md +89 -58
- package/docs/ru/intlayer_CMS.md +240 -65
- package/docs/ru/releases/v6.md +274 -0
- package/docs/ru/roadmap.md +1 -1
- package/docs/ru/vs_code_extension.md +83 -52
- package/docs/tr/intlayer_CMS.md +278 -96
- package/docs/tr/intlayer_with_nextjs_page_router.md +1 -1
- package/docs/tr/intlayer_with_tanstack.md +3 -0
- package/docs/tr/releases/v6.md +273 -0
- package/docs/tr/roadmap.md +1 -1
- package/docs/tr/vs_code_extension.md +100 -71
- package/docs/zh/intlayer_CMS.md +257 -76
- package/docs/zh/releases/v6.md +273 -0
- package/docs/zh/roadmap.md +1 -3
- package/docs/zh/vs_code_extension.md +99 -68
- package/package.json +9 -8
- package/src/blog.ts +1 -1
- package/src/common.ts +2 -6
- package/src/generated/blog.entry.ts +323 -1864
- package/src/generated/docs.entry.ts +1317 -6278
- package/src/generated/frequentQuestions.entry.ts +202 -1183
- package/src/generated/legal.entry.ts +48 -85
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-09-22
|
|
3
|
+
updatedAt: 2025-09-22
|
|
4
|
+
title: 新版 Intlayer v6 - 新特性介绍
|
|
5
|
+
description: 了解 Intlayer v6 的新功能。性能、开发者体验的重大提升,以及增强国际化工作流程的新特性。
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- 本地化
|
|
9
|
+
- 开发
|
|
10
|
+
- 性能
|
|
11
|
+
- 开发者体验
|
|
12
|
+
- 功能
|
|
13
|
+
- React
|
|
14
|
+
- Next.js
|
|
15
|
+
- JavaScript
|
|
16
|
+
- TypeScript
|
|
17
|
+
slugs:
|
|
18
|
+
- doc
|
|
19
|
+
- releases
|
|
20
|
+
- v6
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
# 新版 Intlayer v6 - 新特性介绍
|
|
24
|
+
|
|
25
|
+
欢迎使用 Intlayer v6!本次发布重点提升了性能、开发者体验和可靠性。以下是主要亮点,包括迁移说明和可复制粘贴的示例。
|
|
26
|
+
|
|
27
|
+
## 亮点
|
|
28
|
+
|
|
29
|
+
- 新命令:`npx intlayer content test` 用于检测缺失的翻译
|
|
30
|
+
- 新增全局 `autoFill` 选项,用于自动生成缺失的翻译
|
|
31
|
+
- 填充命令默认跳过已有翻译:`npx intlayer fill`
|
|
32
|
+
- VS Code 扩展:新增 Intlayer 活动栏(搜索和词典)、工具栏/上下文操作、自动显示、填充/测试命令
|
|
33
|
+
- 通过 Promise 并行化实现构建速度提升 10 倍
|
|
34
|
+
- 远程词典缓存,避免应用启动时重复获取
|
|
35
|
+
- 改进日志记录:设置 `log.mode: 'verbose'` 以检查行为
|
|
36
|
+
- 更严格的验证,防止词典问题导致应用崩溃
|
|
37
|
+
- 使用 `build.importMode = 'live'` 和 `pnpm intlayer live` 实现与 CMS 的实时更新
|
|
38
|
+
- 修复:Vue.js 集成、Lynx 适配器、Windows 上的可视化编辑器
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 新功能:测试缺失的翻译
|
|
43
|
+
|
|
44
|
+
快速审核项目,找出缺失的键/语言。
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npx intlayer content test
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
输出:
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
pnpm intlayer content test
|
|
54
|
+
缺失的翻译:
|
|
55
|
+
- blog-data - 日语 (ja)、韩语 (ko)、中文 (zh)、德语 (de)、意大利语 (it) - src/components/BlogPage/blogData.content.ts
|
|
56
|
+
- demo-page - 法语 (fr)、意大利语 (it) - src/components/DemoPage/demo.content.ts
|
|
57
|
+
- locale-switcher - 意大利语 (it)、葡萄牙语 (pt) - src/components/LocaleSwitcher/localeSwitcher.content.ts
|
|
58
|
+
语言环境:英语 (en)、俄语 (ru)、日语 (ja)、法语 (fr)、韩语 (ko)、中文 (zh)、西班牙语 (es)、德语 (de)、阿拉伯语 (ar)、意大利语 (it)、英式英语 (en-GB)、葡萄牙语 (pt)、印地语 (hi)
|
|
59
|
+
必需语言环境:英语 (en)
|
|
60
|
+
缺少的语言环境:日语 (ja)、韩语 (ko)、中文 (zh)、德语 (de)、意大利语 (it)、法语 (fr)、葡萄牙语 (pt)
|
|
61
|
+
缺少的必需语言环境:-
|
|
62
|
+
缺少的语言环境总数:7
|
|
63
|
+
缺少的必需语言环境总数:0
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
查看更多 CLI 选项请参阅文档:[CLI 参考](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_cli.md) → “测试缺失的翻译”。以及 [测试](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/testing.md) 指南。
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 新功能:全局 autoFill 自动补全缺失翻译
|
|
71
|
+
|
|
72
|
+
现在您可以全局启用 autoFill,任何缺失翻译的字典都会自动补全。
|
|
73
|
+
|
|
74
|
+
```ts fileName="intlayer.config.ts"
|
|
75
|
+
import { type IntlayerConfig, Locales } from "intlayer";
|
|
76
|
+
|
|
77
|
+
const config: IntlayerConfig = {
|
|
78
|
+
internationalization: {
|
|
79
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
80
|
+
defaultLocale: Locales.ENGLISH,
|
|
81
|
+
requiredLocales: [Locales.ENGLISH, Locales.FRENCH],
|
|
82
|
+
},
|
|
83
|
+
content: {
|
|
84
|
+
// 为所有词典自动生成缺失的翻译
|
|
85
|
+
autoFill: "./{{fileName}}.content.ts",
|
|
86
|
+
//
|
|
87
|
+
// autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",
|
|
88
|
+
//
|
|
89
|
+
// autoFill: true, // 自动为所有词典生成缺失的翻译,类似使用 "./{{fileName}}.content.json"
|
|
90
|
+
//
|
|
91
|
+
// autoFill: {
|
|
92
|
+
// en: "./{{fileName}}.en.content.json",
|
|
93
|
+
// fr: "./{{fileName}}.fr.content.json",
|
|
94
|
+
// es: "./{{fileName}}.es.content.json",
|
|
95
|
+
// },
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
export default config;
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
您仍然可以使用内容文件中的 `autoFill` 字段对每个字典进行微调。完整参考请见 `doc/autoFill` 和 `doc/dictionary/content_file`。
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## 填充命令:更安全的默认设置
|
|
107
|
+
|
|
108
|
+
填充命令现在默认只填充缺失的翻译,跳过已有内容。
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npx intlayer fill
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
```bash
|
|
115
|
+
受影响的字典键处理:access-key-creation-form-schema, doc-search-metadata, doc-search-page
|
|
116
|
+
- [access-key-creation-form-schema] 字典没有文件路径。跳过。
|
|
117
|
+
- [access-key-creation-form-schema] 正在处理内容声明:src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts
|
|
118
|
+
- [access-key-creation-form-schema] 无需填充的语言 - 跳过字典
|
|
119
|
+
- [doc-search-metadata] 字典没有文件路径。跳过。
|
|
120
|
+
- [doc-search-metadata] 正在处理内容声明:src/app/[locale]/(docs)/doc/search/metadata.content.ts
|
|
121
|
+
- [doc-search-metadata] 无需填充的语言环境 - 跳过字典
|
|
122
|
+
- [doc-search-page] 字典没有文件路径。跳过。
|
|
123
|
+
- [doc-search-page] 正在处理内容声明:src/app/[locale]/(docs)/doc/search/page.content.ts
|
|
124
|
+
- [doc-search-page] [俄语 (ru)] 正在准备将字典从英语 (en) 翻译为俄语 (ru)
|
|
125
|
+
[intlayer] 已对 src/app/[locale]/(docs)/doc/search/page.content.ts 应用 Prettier 格式化
|
|
126
|
+
- [doc-search-page] 内容声明已写入 src/app/[locale]/(docs)/doc/search/page.content.ts
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
CI 示例可在 [CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/CI_CD.md) 中查看。
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## 更新的 VS Code 扩展
|
|
134
|
+
|
|
135
|
+
该扩展现在在活动栏中包含了一个专用的 Intlayer 选项卡,并带来了多个工作流改进:
|
|
136
|
+
|
|
137
|
+
- Intlayer 活动栏包含两个视图:
|
|
138
|
+
- 搜索网页视图 (`intlayer.searchBar`),用于实时字典/内容搜索
|
|
139
|
+
- 字典树 (`intlayer.dictionaries`),列出环境、字典和贡献文件
|
|
140
|
+
- 字典视图上的工具栏:构建、拉取、推送、填充、刷新、测试、创建字典文件
|
|
141
|
+
- 上下文菜单:字典上的拉取/推送;文件上的填充
|
|
142
|
+
- 自动显示:在适用时,当前编辑器文件会在词典树中高亮显示
|
|
143
|
+
- 命令面板新增命令:填充词典和测试词典
|
|
144
|
+
|
|
145
|
+
详情请参见[官方 VS Code 扩展](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/vs_code_extension.md)文档。
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## 性能提升:快 10 倍
|
|
150
|
+
|
|
151
|
+
- 本地和远程词典并行解析
|
|
152
|
+
- 远程词典缓存,避免应用启动时重复获取
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npx intlayer build
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
输出:
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
[intlayer] 准备 Intlayer (v6.0.1)
|
|
162
|
+
[intlayer] 词典:
|
|
163
|
+
[intlayer] ✓ 本地内容:163/163
|
|
164
|
+
[intlayer] ✓ 远程内容:100/100
|
|
165
|
+
[intlayer] - access-key-creation-form [local: ✔ built] [distant: ✔ imported]
|
|
166
|
+
[intlayer] - access-key-creation-form-schema [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
167
|
+
[intlayer] - access-key-form [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
168
|
+
[intlayer] - ai-ab-testing-section [远程: ✔ 导入完成]
|
|
169
|
+
[intlayer] - application-not-running-view [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
170
|
+
[intlayer] - application-template-message [本地: ✔ 构建完成] [远程: ✔ 获取完成]
|
|
171
|
+
[intlayer] - aside-navigation [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
172
|
+
[intlayer] - ask-reset-password [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
173
|
+
[intlayer] - ask-reset-password-schema [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
174
|
+
[intlayer] - 自动完成部分 [本地: ✔ 构建完成] [远程: ✔ 获取完成]
|
|
175
|
+
[intlayer] - 可用技术部分 [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
176
|
+
[intlayer] - 博客数据 [本地: ✔ 构建完成]
|
|
177
|
+
[intlayer] - 博客元数据 [本地: ✔ 构建完成]
|
|
178
|
+
[intlayer] - 博客导航列表 [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
179
|
+
[intlayer] - 博客页面 [远程: ✔ 获取完成]
|
|
180
|
+
[intlayer] - 博客搜索元数据 [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
181
|
+
[intlayer] - 博客搜索页面 [本地: ✔ 构建完成] [远程: ✔ 导入完成]
|
|
182
|
+
...
|
|
183
|
+
[intlayer] 内容已加载 (总计: 8401毫秒 - 本地: 4050毫秒 - 远程: 4222毫秒)
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
## 日志改进
|
|
189
|
+
|
|
190
|
+
日志系统已得到改进,能够提供有关构建和运行时转换过程中发生情况的更详细信息。
|
|
191
|
+
|
|
192
|
+
> 启用详细日志以更好地了解构建和运行时转换过程中发生的情况。
|
|
193
|
+
|
|
194
|
+
```ts fileName="intlayer.config.ts"
|
|
195
|
+
export default {
|
|
196
|
+
log: {
|
|
197
|
+
mode: "verbose", // 选项: "default" | "verbose" | "disabled"
|
|
198
|
+
},
|
|
199
|
+
};
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
有关所有日志选项,请参见[配置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
## 更强的验证
|
|
207
|
+
|
|
208
|
+
字典处理现在执行更强健的验证。当字典处理失败时,Intlayer 会避免破坏您的应用程序,并显示可操作的错误信息。
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## 使用 CMS 的实时更新(生产安全)
|
|
213
|
+
|
|
214
|
+
在生产环境中提供实时内容更新(例如,编辑更新),无需重新构建您的应用程序。
|
|
215
|
+
|
|
216
|
+
1. 启用实时导入模式:
|
|
217
|
+
|
|
218
|
+
```ts fileName="intlayer.config.ts"
|
|
219
|
+
import { type IntlayerConfig } from "intlayer";
|
|
220
|
+
|
|
221
|
+
const config: IntlayerConfig = {
|
|
222
|
+
build: {
|
|
223
|
+
importMode: "live", // "static" | "dynamic" | "live"
|
|
224
|
+
},
|
|
225
|
+
editor: {
|
|
226
|
+
liveSync: true, // 启用服务器端实时同步
|
|
227
|
+
},
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
export default config;
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
2. 运行您的应用程序并实时处理并行执行:
|
|
234
|
+
|
|
235
|
+
```bash
|
|
236
|
+
npx intlayer live --process 'vite preview'
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
注意:
|
|
240
|
+
|
|
241
|
+
- 只有标记为使用实时模式的字典会被实时获取。其他字典则经过性能优化。
|
|
242
|
+
- 如果无法访问实时 API,则回退到动态导入。
|
|
243
|
+
|
|
244
|
+
请参阅[CMS 和实时同步](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)和[配置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)以获取完整指南。
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## 迁移说明
|
|
249
|
+
|
|
250
|
+
- 移除:`dictionaryOutput`(之前为 `i18next` 或 `next-intl`)。此功能将在未来版本中以可插拔适配器形式回归。请从配置中删除该字段。
|
|
251
|
+
- 相关移除:`i18nextResourcesDir`(详见 `doc/configuration` 更新日志)。
|
|
252
|
+
- 推荐使用新的全局选项 `content.autoFill` 来大规模生成缺失的翻译。
|
|
253
|
+
- 使用 `npx intlayer content test` 来检测 PR 中缺失的翻译。
|
|
254
|
+
- 若需详细诊断,请设置 `log.mode = 'verbose'`。
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## 修复
|
|
259
|
+
|
|
260
|
+
- Vue.js 集成稳定性提升
|
|
261
|
+
- Lynx 适配器改进
|
|
262
|
+
- Windows 上的可视化编辑器
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## 有用的链接
|
|
267
|
+
|
|
268
|
+
- [CLI 参考](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_cli.md)
|
|
269
|
+
- [自动填充](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/autoFill.md)
|
|
270
|
+
- [配置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)
|
|
271
|
+
- [内容文件参考](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)
|
|
272
|
+
- [官方 VS Code 扩展](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/vs_code_extension.md)
|
|
273
|
+
- [CMS 与实时同步](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)
|
package/docs/zh/roadmap.md
CHANGED
|
@@ -112,18 +112,16 @@ Intlayer 提供多种方法来插入和管理动态内容,确保内容交付
|
|
|
112
112
|
Intlayer 支持使用 **TypeScript**(也支持 JavaScript)和 **JSON** 来声明内容。
|
|
113
113
|
|
|
114
114
|
- **TypeScript**:
|
|
115
|
-
|
|
116
115
|
- 确保您的内容结构正确且没有遗漏的翻译。
|
|
117
116
|
- 提供严格或更灵活的验证模式。
|
|
118
117
|
- 允许从变量、函数或外部 API 动态获取数据。
|
|
119
118
|
|
|
120
119
|
- **JSON**:
|
|
121
|
-
|
|
122
120
|
- 由于其标准化格式,便于与外部工具(如可视化编辑器)集成。
|
|
123
121
|
|
|
124
122
|
> 资源:
|
|
125
123
|
>
|
|
126
|
-
> - [内容声明格式](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/
|
|
124
|
+
> - [内容声明格式](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)
|
|
127
125
|
|
|
128
126
|
### 7. 清理、包优化和动态导入
|
|
129
127
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-03-17
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-09-22
|
|
4
4
|
title: 官方 VS Code 扩展
|
|
5
|
-
description:
|
|
5
|
+
description: 学习如何在 VS Code 中使用 Intlayer 扩展来提升您的开发工作流程。快速在本地化内容之间导航并高效管理您的字典。
|
|
6
6
|
keywords:
|
|
7
7
|
- VS Code 扩展
|
|
8
8
|
- Intlayer
|
|
@@ -31,27 +31,75 @@ slugs:
|
|
|
31
31
|
|
|
32
32
|
### 即时导航
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
**无缝集成** – 与 **react-intlayer** 和 **next-intlayer**
|
|
36
|
-
**多语言支持** –
|
|
37
|
-
**VS Code 集成** – 与 VS Code
|
|
34
|
+
**支持“转到定义”** – 在 `useIntlayer` 键上使用 `⌘ + 点击`(Mac)或 `Ctrl + 点击`(Windows/Linux)即可立即打开对应的内容文件。
|
|
35
|
+
**无缝集成** – 与 **react-intlayer** 和 **next-intlayer** 项目完美配合。
|
|
36
|
+
**多语言支持** – 支持不同语言的本地化内容。
|
|
37
|
+
**VS Code 集成** – 与 VS Code 的导航和命令面板无缝集成。
|
|
38
38
|
|
|
39
39
|
### 词典管理命令
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
直接在 VS Code 中管理您的内容词典:
|
|
42
42
|
|
|
43
|
-
- **构建词典**
|
|
44
|
-
- **推送词典**
|
|
45
|
-
- **拉取词典**
|
|
43
|
+
- **构建词典** – 根据您的项目结构生成内容文件。
|
|
44
|
+
- **推送词典** – 将最新的词典内容上传到您的代码仓库。
|
|
45
|
+
- **拉取词典** – 从代码仓库同步最新的词典内容到本地环境。
|
|
46
|
+
- **填充词典** – 使用项目中的内容填充词典。
|
|
47
|
+
- **测试词典** – 识别缺失或不完整的翻译。
|
|
46
48
|
|
|
47
49
|
### 内容声明生成器
|
|
48
50
|
|
|
49
|
-
|
|
51
|
+
轻松生成不同格式的结构化词典文件:
|
|
50
52
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
如果您当前正在开发一个组件,它会为您生成 `.content.{ts,tsx,js,jsx,mjs,cjs,json}` 文件。
|
|
54
|
+
|
|
55
|
+
组件示例:
|
|
56
|
+
|
|
57
|
+
```tsx fileName="src/components/MyComponent/index.tsx"
|
|
58
|
+
const MyComponent = () => {
|
|
59
|
+
const { myTranslatedContent } = useIntlayer("my-component");
|
|
60
|
+
|
|
61
|
+
return <span>{myTranslatedContent}</span>;
|
|
62
|
+
};
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
生成的 TypeScript 格式文件:
|
|
66
|
+
|
|
67
|
+
```tsx fileName="src/components/MyComponent/index.content.ts"
|
|
68
|
+
import { t, type Dictionary } from "intlayer";
|
|
69
|
+
|
|
70
|
+
const componentContent = {
|
|
71
|
+
key: "my-component",
|
|
72
|
+
content: {
|
|
73
|
+
myTranslatedContent: t({
|
|
74
|
+
en: "Hello World",
|
|
75
|
+
es: "Hola Mundo",
|
|
76
|
+
fr: "Bonjour le monde",
|
|
77
|
+
}),
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export default componentContent;
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
可用格式:
|
|
85
|
+
|
|
86
|
+
- **TypeScript (`.ts`)**
|
|
87
|
+
- **ES 模块 (`.esm`)**
|
|
88
|
+
- **CommonJS (`.cjs`)**
|
|
89
|
+
- **JSON (`.json`)**
|
|
90
|
+
|
|
91
|
+
### Intlayer 选项卡(活动栏)
|
|
92
|
+
|
|
93
|
+
通过点击 VS Code 活动栏中的 Intlayer 图标打开 Intlayer 选项卡。它包含两个视图:
|
|
94
|
+
|
|
95
|
+
- **搜索**:一个实时搜索栏,用于快速筛选字典及其内容。输入时结果会即时更新。
|
|
96
|
+
- **字典**:一个树状视图,显示您的环境/项目、字典键以及贡献条目的文件。您可以:
|
|
97
|
+
- 点击文件以在编辑器中打开它。
|
|
98
|
+
- 使用工具栏执行操作:构建、拉取、推送、填充、刷新、测试和创建字典文件。
|
|
99
|
+
- 使用上下文菜单执行特定项目操作:
|
|
100
|
+
- 在字典上:拉取或推送
|
|
101
|
+
- 在文件上:填充字典
|
|
102
|
+
- 当您切换编辑器时,如果文件属于某个字典,树状视图会自动展开显示该文件。
|
|
55
103
|
|
|
56
104
|
## 安装
|
|
57
105
|
|
|
@@ -62,91 +110,74 @@ slugs:
|
|
|
62
110
|
3. 搜索 **"Intlayer"**。
|
|
63
111
|
4. 点击 **安装**。
|
|
64
112
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
```sh
|
|
68
|
-
code --install-extension intlayer
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## 使用
|
|
113
|
+
## 使用方法
|
|
72
114
|
|
|
73
115
|
### 快速导航
|
|
74
116
|
|
|
75
117
|
1. 打开一个使用 **react-intlayer** 的项目。
|
|
76
|
-
2.
|
|
118
|
+
2. 找到对 `useIntlayer()` 的调用,例如:
|
|
77
119
|
|
|
78
120
|
```tsx
|
|
79
121
|
const content = useIntlayer("app");
|
|
80
122
|
```
|
|
81
123
|
|
|
82
|
-
3. 在键(例如 `"app"`)上执行
|
|
124
|
+
3. 在键(例如 `"app"`)上执行 **Command+点击**(macOS 上为 `⌘+点击`)或 **Ctrl+点击**(Windows/Linux 上)。
|
|
83
125
|
4. VS Code 会自动打开对应的字典文件,例如 `src/app.content.ts`。
|
|
84
126
|
|
|
85
127
|
### 管理内容字典
|
|
86
128
|
|
|
87
|
-
|
|
129
|
+
### Intlayer 侧边栏(活动栏)
|
|
88
130
|
|
|
89
|
-
|
|
131
|
+
使用侧边栏浏览和管理字典:
|
|
132
|
+
|
|
133
|
+
- 打开活动栏中的 Intlayer 图标。
|
|
134
|
+
- 在**搜索**中,输入内容以实时过滤词典和条目。
|
|
135
|
+
- 在**词典**中,浏览环境、词典和文件。使用工具栏进行构建、拉取、推送、填充、刷新、测试和创建词典文件。右键点击可进行上下文操作(对词典执行拉取/推送,对文件执行填充)。当前编辑器文件在适用时会自动在树视图中显示。
|
|
136
|
+
|
|
137
|
+
#### 构建词典
|
|
138
|
+
|
|
139
|
+
生成所有词典内容文件:
|
|
90
140
|
|
|
91
141
|
```sh
|
|
92
142
|
Cmd + Shift + P(macOS)/ Ctrl + Shift + P(Windows/Linux)
|
|
93
143
|
```
|
|
94
144
|
|
|
95
|
-
|
|
145
|
+
搜索**构建词典**并执行该命令。
|
|
96
146
|
|
|
97
|
-
####
|
|
147
|
+
#### 推送词典
|
|
98
148
|
|
|
99
|
-
|
|
149
|
+
上传最新的词典内容:
|
|
100
150
|
|
|
101
|
-
1.
|
|
102
|
-
2.
|
|
103
|
-
3.
|
|
151
|
+
1. 打开**命令面板**。
|
|
152
|
+
2. 搜索**推送词典**。
|
|
153
|
+
3. 选择要推送的词典并确认。
|
|
104
154
|
|
|
105
|
-
####
|
|
155
|
+
#### 拉取词典
|
|
106
156
|
|
|
107
|
-
|
|
157
|
+
同步最新的词典内容:
|
|
108
158
|
|
|
109
159
|
1. 打开 **命令面板**。
|
|
110
|
-
2. 搜索
|
|
111
|
-
3.
|
|
112
|
-
|
|
113
|
-
## 开发与贡献
|
|
114
|
-
|
|
115
|
-
想要贡献代码?我们欢迎社区的贡献!
|
|
116
|
-
|
|
117
|
-
仓库地址:https://github.com/aymericzip/intlayer-vs-code-extension
|
|
118
|
-
|
|
119
|
-
### 快速开始
|
|
120
|
-
|
|
121
|
-
克隆仓库并安装依赖:
|
|
160
|
+
2. 搜索 **拉取词典(Pull Dictionaries)**。
|
|
161
|
+
3. 选择要拉取的词典。
|
|
122
162
|
|
|
123
|
-
|
|
124
|
-
git clone https://github.com/aymericzip/intlayer-vs-code-extension.git
|
|
125
|
-
cd intlayer-vs-code-extension
|
|
126
|
-
npm install
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
> 使用 `npm` 包管理器以兼容用于构建和发布扩展的 `vsce` 包。
|
|
130
|
-
|
|
131
|
-
### 开发模式运行
|
|
132
|
-
|
|
133
|
-
1. 在 **VS Code** 中打开项目。
|
|
134
|
-
2. 按 `F5` 启动一个新的 **扩展开发主机** 窗口。
|
|
163
|
+
#### 填充词典
|
|
135
164
|
|
|
136
|
-
|
|
165
|
+
使用项目中的内容填充词典:
|
|
137
166
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
发现了错误或有功能请求?请在我们的**GitHub仓库**中提交问题:
|
|
167
|
+
1. 打开 **命令面板**。
|
|
168
|
+
2. 搜索 **填充词典(Fill Dictionaries)**。
|
|
169
|
+
3. 运行命令以填充词典。
|
|
143
170
|
|
|
144
|
-
|
|
171
|
+
#### 测试词典
|
|
145
172
|
|
|
146
|
-
|
|
173
|
+
验证词典并查找缺失的翻译:
|
|
147
174
|
|
|
148
|
-
|
|
175
|
+
1. 打开 **命令面板**。
|
|
176
|
+
2. 搜索 **测试词典(Test Dictionaries)**。
|
|
177
|
+
3. 查看报告的问题并进行修复。
|
|
149
178
|
|
|
150
179
|
## 文档历史
|
|
151
180
|
|
|
152
|
-
|
|
181
|
+
| 版本 | 日期 | 变更 |
|
|
182
|
+
| ------ | ---------- | -------------- |
|
|
183
|
+
| 5.5.10 | 2025-06-29 | 初始化历史记录 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intlayer/docs",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.2-canary.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Intlayer documentation",
|
|
6
6
|
"keywords": [
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"legal"
|
|
49
49
|
],
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"intlayer": "6.0.
|
|
52
|
-
"@intlayer/
|
|
51
|
+
"@intlayer/config": "6.0.2-canary.0",
|
|
52
|
+
"@intlayer/core": "6.0.2-canary.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@types/node": "^24.2.1",
|
|
@@ -63,16 +63,17 @@
|
|
|
63
63
|
"tsx": "^4.19.4",
|
|
64
64
|
"typescript": "^5.9.2",
|
|
65
65
|
"vitest": "^3.2.4",
|
|
66
|
-
"@intlayer/
|
|
66
|
+
"@intlayer/api": "6.0.2-canary.0",
|
|
67
|
+
"@intlayer/cli": "6.0.2-canary.0",
|
|
67
68
|
"@utils/ts-config": "1.0.4",
|
|
68
|
-
"@intlayer/api": "6.0.1",
|
|
69
69
|
"@utils/ts-config-types": "1.0.4",
|
|
70
70
|
"@utils/tsup-config": "1.0.4"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"@intlayer/api": "6.0.
|
|
74
|
-
"@intlayer/cli": "6.0.
|
|
75
|
-
"@intlayer/
|
|
73
|
+
"@intlayer/api": "6.0.2-canary.0",
|
|
74
|
+
"@intlayer/cli": "6.0.2-canary.0",
|
|
75
|
+
"@intlayer/core": "6.0.2-canary.0",
|
|
76
|
+
"@intlayer/config": "6.0.2-canary.0"
|
|
76
77
|
},
|
|
77
78
|
"engines": {
|
|
78
79
|
"node": ">=14.18"
|
package/src/blog.ts
CHANGED
package/src/common.ts
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
getMarkdownMetadata,
|
|
4
|
-
Locales,
|
|
5
|
-
LocalesValues,
|
|
6
|
-
} from 'intlayer';
|
|
1
|
+
import { Locales, LocalesValues } from '@intlayer/config';
|
|
2
|
+
import { getLocalizedUrl, getMarkdownMetadata } from '@intlayer/core';
|
|
7
3
|
import { join } from 'path';
|
|
8
4
|
|
|
9
5
|
export const defaultLocale = Locales.ENGLISH;
|