@intlayer/docs 6.1.4 → 6.1.6-canary.0

package/docs/tr/vs_code_extension.md

@@ -1,10 +1,10 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
-title: Resmi VS Code Uzantısı
-description: Geliştirme iş akışınızı geliştirmek için VS Code'da Intlayer uzantısını nasıl kullanacağınızı öğrenin. Yerelleştirilmiş içerikler arasında hızlıca gezin ve sözlüklerinizi verimli bir şekilde yönetin.
+updatedAt: 2025-09-30
+title: Resmi VS Code Eklentisi
+description: Geliştirme iş akışınızı geliştirmek için VS Code'da Intlayer eklentisinin nasıl kullanılacağını öğrenin. Yerelleştirilmiş içerikler arasında hızlıca gezin ve sözlüklerinizi verimli bir şekilde yönetin.
 keywords:
-  - VS Code Uzantısı
+  - VS Code Eklentisi
   - Intlayer
   - Yerelleştirme
   - Geliştirme Araçları
@@ -17,105 +17,49 @@ slugs:
   - vs-code-extension
 ---
 
-# Resmi VS Code Uzantısı
+# Resmi VS Code Eklentisi
 
 ## Genel Bakış
 
-[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension), projelerinizde yerelleştirilmiş içeriklerle çalışırken geliştirici deneyimini iyileştirmek için tasarlanmış **Intlayer**'ın resmi Visual Studio Code uzantısıdır.
+[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension), projelerinizde yerelleştirilmiş içeriklerle çalışırken geliştirici deneyimini iyileştirmek için tasarlanmış **Intlayer**'ın resmi Visual Studio Code eklentisidir.
 
-![Intlayer VS Code Uzantısı](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code Eklentisi](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
-Uzantı bağlantısı: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
+Eklenti bağlantısı: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Özellikler
 
-### Anında Gezinme
+![Sözlükleri doldur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Tanıma Git Desteği** – `useIntlayer` anahtarında `⌘ + Tıklama` (Mac) veya `Ctrl + Tıklama` (Windows/Linux) kullanarak ilgili içerik dosyasını anında açın.  
-**Sorunsuz Entegrasyon** – **react-intlayer** ve **next-intlayer** projeleriyle sorunsuz çalışır.  
-**Çok Dilli Destek** – Farklı dillerde yerelleştirilmiş içerikleri destekler.  
-**VS Code Entegrasyonu** – VS Code’un gezinme ve komut paleti ile sorunsuz entegre olur.
+- **Anında Gezinme** – `useIntlayer` anahtarına tıkladığınızda doğru içerik dosyasına hızlıca atlayın.
+- **Sözlükleri Doldur** – Projenizden içeriklerle sözlükleri doldurun.
 
-### Sözlük Yönetim Komutları
+![Komutları listele](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-İçerik sözlüklerinizi doğrudan VS Code’dan yönetin:
+- **Intlayer Komutlarına Kolay Erişim** – İçerik sözlüklerini kolayca oluşturun, gönderin, çekin, doldurun ve test edin.
 
-- **Sözlükleri Oluştur** – Proje yapınıza göre içerik dosyaları oluşturur.
-- **Sözlükleri Gönder** – En son sözlük içeriğini deponuza yükler.
-- **Sözlükleri Çek** – En son sözlük içeriğini deponuzdan yerel ortamınıza senkronize eder.
-- **Sözlükleri Doldur** – Sözlükleri projenizden içerik ile doldurur.
-- **Sözlükleri Test Et** – Eksik veya tamamlanmamış çevirileri tespit eder.
+![İçerik dosyası oluştur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### İçerik Beyanı Oluşturucu
+- **İçerik Beyanı Oluşturucu** – Sözlük içerik dosyalarını çeşitli formatlarda oluşturun (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Farklı formatlarda yapılandırılmış sözlük dosyalarını kolayca oluşturun:
+![Sözlükleri test et](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Eğer şu anda bir bileşen üzerinde çalışıyorsanız, sizin için `.content.{ts,tsx,js,jsx,mjs,cjs,json}` dosyasını oluşturacaktır.
+- **Sözlükleri Test Et** – Eksik çeviriler için sözlükleri test edin.
 
-Bileşen örneği:
+![Sözlüğü yeniden oluştur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Sözlüklerinizi güncel tutun** – Projenizden en son içeriklerle sözlüklerinizi güncel tutun.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-TypeScript formatında oluşturulan dosya:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Mevcut formatlar:
-
-- **TypeScript (`.ts`)**
-- **ES Modülü (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Intlayer Sekmesi (Aktivite Çubuğu)
+![Intlayer Sekmesi (Aktivite Çubuğu)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-VS Code Aktivite Çubuğundaki Intlayer simgesine tıklayarak Intlayer sekmesini açın. Bu sekme iki görünüm içerir:
-
-- **Arama**: Sözlükleri ve içeriklerini hızlıca filtrelemek için canlı bir arama çubuğu. Yazdıkça sonuçlar anında güncellenir.
-- **Sözlükler**: Ortamlarınız/projeleriniz, sözlük anahtarları ve giriş sağlayan dosyaların ağaç görünümü. Şunları yapabilirsiniz:
-  - Bir dosyaya tıklayarak düzenleyicide açabilirsiniz.
-  - Araç çubuğunu kullanarak şu işlemleri yapabilirsiniz: Derle (Build), Çek (Pull), Gönder (Push), Doldur (Fill), Yenile (Refresh), Test Et (Test) ve Sözlük Dosyası Oluştur (Create Dictionary File).
-  - Öğeye özel işlemler için bağlam menüsünü kullanabilirsiniz:
-    - Bir sözlük üzerinde: Çek (Pull) veya Gönder (Push)
-    - Bir dosya üzerinde: Sözlüğü Doldur (Fill Dictionary)
-  - Düzenleyiciler arasında geçiş yaptığınızda, dosya bir sözlüğe aitse ağaç görünümü ilgili dosyayı gösterecektir.
-
-## Kurulum
-
-**Intlayer**'ı doğrudan VS Code Marketplace'ten yükleyebilirsiniz:
-
-1. **VS Code**'u açın.
-2. **Extensions Marketplace**'e gidin.
-3. **"Intlayer"** için arama yapın.
-4. **Install** (Yükle) butonuna tıklayın.
+- **Intlayer Sekmesi (Aktivite Çubuğu)** – Araç çubuğu ve bağlam eylemleri (Oluştur, Çek, Gönder, Doldur, Yenile, Test Et, Dosya Oluştur) ile özel bir yan sekmeden sözlükleri göz atın ve arayın.
 
 ## Kullanım
 
-### Hızlı Gezinme
+### Hızlı Navigasyon
 
 1. **react-intlayer** kullanan bir projeyi açın.
-2. `useIntlayer()` çağrısını bulun, örneğin:
+2. Şu gibi bir `useIntlayer()` çağrısı bulun:
 
    ```tsx
    const content = useIntlayer("app");
@@ -124,60 +68,55 @@ VS Code Aktivite Çubuğundaki Intlayer simgesine tıklayarak Intlayer sekmesini
 3. Anahtar üzerinde **Command-click** (`⌘+Click` macOS'ta) veya **Ctrl+Click** (Windows/Linux'ta) yapın (örneğin, `"app"`).
 4. VS Code otomatik olarak ilgili sözlük dosyasını açacaktır, örneğin `src/app.content.ts`.
 
-### İçerik Sözlüklerini Yönetme
-
-### Intlayer Sekmesi (Activity Bar)
+### Intlayer Sekmesi (Aktivite Çubuğu)
 
-Sözlükleri gözden geçirmek ve yönetmek için yan sekmeyi kullanın:
+Yan sekmeyi kullanarak sözlüklerde gezinin ve yönetin:
 
-- Activity Bar'daki Intlayer simgesini açın.
+- Aktivite Çubuğunda Intlayer simgesini açın.
 - **Arama** bölümünde, sözlükleri ve girdileri gerçek zamanlı olarak filtrelemek için yazın.
-- **Sözlükler** bölümünde, ortamları, sözlükleri ve dosyaları gezinin. Araç çubuğunu Kullanarak Oluştur, Çek, Gönder, Doldur, Yenile, Test Et ve Sözlük Dosyası Oluştur işlemlerini yapabilirsiniz. Bağlam menüsü için sağ tıklayın (sözlüklerde Çek/Gönder, dosyalarda Doldur). Geçerli düzenleyici dosyası, uygun olduğunda ağaçta otomatik olarak gösterilir.
+- **Sözlükler** bölümünde, ortamları, sözlükleri ve dosyaları göz atın. Araç çubuğunu kullanarak Oluştur, Çek, Gönder, Doldur, Yenile, Test Et ve Sözlük Dosyası Oluştur işlemlerini yapabilirsiniz. Bağlam eylemleri için sağ tıklayın (sözlüklerde Çek/Gönder, dosyalarda Doldur). Geçerli düzenleyici dosyası uygun olduğunda ağaçta otomatik olarak gösterilir.
 
-#### Sözlükleri Oluşturma
+### Komutlara Erişim
 
-Tüm sözlük içerik dosyalarını oluşturmak için:
+Komutlara **Komut Paleti** üzerinden erişebilirsiniz.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-**Sözlükleri Oluştur** komutunu arayın ve çalıştırın.
-
-#### Sözlükleri Gönderme
-
-En son sözlük içeriğini yüklemek için:
-
-1. **Komut Paletini** açın.
-2. **Sözlükleri Gönder** araması yapın.
-3. Göndermek istediğiniz sözlükleri seçin ve onaylayın.
-
-#### Sözlükleri Çekme
+- **Sözlükleri Oluştur**
+- **Sözlükleri Gönder**
+- **Sözlükleri Çek**
+- **Sözlükleri Doldur**
+- **Sözlükleri Test Et**
+- **Sözlük Dosyası Oluştur**
 
-En son sözlük içeriğini senkronize edin:
+### Ortam Değişkenlerini Yükleme
 
-1. **Komut Paletini** açın.
-2. **Sözlükleri Çek** araması yapın.
-3. Çekmek istediğiniz sözlükleri seçin.
+Intlayer, AI API anahtarlarınızı ve ayrıca Intlayer istemci kimliği ile gizli anahtarınızı ortam değişkenlerinde saklamanızı önerir.
 
-#### Sözlükleri Doldurma
+Eklenti, Intlayer komutlarını doğru bağlamda çalıştırmak için çalışma alanınızdan ortam değişkenlerini yükleyebilir.
 
-Sözlükleri projenizden gelen içerikle doldurun:
+- **Yükleme sırası (öncelik sırasına göre)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Yıkıcı olmayan**: mevcut `process.env` değerleri üzerine yazılmaz.
+- **Kapsam**: dosyalar, yapılandırılmış temel dizinden çözülür (varsayılan olarak çalışma alanı kökü).
 
-1. **Komut Paletini** açın.
-2. **Sözlükleri Doldur** araması yapın.
-3. Sözlükleri doldurmak için komutu çalıştırın.
+#### Aktif ortamı seçme
 
-#### Sözlükleri Test Etme
+- **Komut Paleti**: paleti açın ve `Intlayer: Select Environment` komutunu çalıştırın, ardından ortamı seçin (örneğin, `development`, `staging`, `production`). Eklenti, yukarıdaki öncelik listesinde bulunan ilk uygun dosyayı yüklemeye çalışacak ve “.env.<env>.local dosyasından ortam yüklendi” gibi bir bildirim gösterecektir.
+- **Ayarlar**: `Ayarlar → Eklentiler → Intlayer` yolunu izleyin ve şunları ayarlayın:
+  - **Ortam**: `.env.<env>*` dosyalarını çözümlemek için kullanılan ortam adı.
+  - (İsteğe bağlı) **Env Dosyası**: açıkça belirtilmiş bir `.env` dosyası yolu. Sağlandığında, çıkarılan listedeki dosyalardan öncelikli olarak kullanılır.
 
-Sözlükleri doğrulayın ve eksik çevirileri bulun:
+#### Monorepo ve özel dizinler
 
-1. **Komut Paletini** açın.
-2. **Sözlükleri Test Et** araması yapın.
-3. Raporlanan sorunları inceleyin ve gerektiği şekilde düzeltin.
+Eğer `.env` dosyalarınız çalışma alanı kökünün dışında bulunuyorsa, `Ayarlar → Eklentiler → Intlayer` yolunda **Temel Dizin**i ayarlayın. Yükleyici, `.env` dosyalarını bu dizine göre arayacaktır.
 
 ## Doküman Geçmişi
 
-| Sürüm  | Tarih      | Değişiklikler     |
-| ------ | ---------- | ----------------- |
-| 5.5.10 | 2025-06-29 | Geçmiş başlatıldı |
+| Sürüm  | Tarih      | Değişiklikler                              |
+| ------ | ---------- | ------------------------------------------ |
+| 6.1.5  | 2025-09-30 | Demo gif eklendi                           |
+| 6.1.0  | 2025-09-24 | Ortam seçimi bölümü eklendi                |
+| 6.0.0  | 2025-09-22 | Intlayer Sekmesi / Doldur & Test komutları |
+| 5.5.10 | 2025-06-29 | Başlangıç geçmişi                          |

package/docs/zh/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: 在 React 和 Next.js 中制作多语言（i18n）组件
+description: 学习如何声明和获取本地化内容，以使用 Intlayer 构建多语言 React 或 Next.js 组件。
+keywords:
+  - i18n
+  - 组件
+  - react
+  - 多语言
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# 如何使用 Intlayer 制作多语言（i18n）组件
+
+本指南展示了在两种常见环境中制作多语言 UI 组件的最简步骤：
+
+- React（Vite/单页应用）
+- Next.js（应用路由）
+
+您将首先声明内容，然后在组件中获取内容。
+
+## 1) 声明您的内容（适用于 React 和 Next.js）
+
+在组件附近创建一个内容声明文件。这可以让翻译内容靠近使用位置，并且支持类型安全。
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+如果您更喜欢配置文件，也支持 JSON 格式。
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "一个多语言的 React 组件",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) 获取您的内容
+
+### 情况 A — React 应用 (Vite/SPA)
+
+默认方法：使用 `useIntlayer` 通过键来获取内容。这使组件保持简洁且类型安全。
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+服务器端渲染或在提供者外部使用时：使用 `react-intlayer/server`，并在需要时传入明确的 `locale`。
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+另一种方式：如果你更喜欢在调用处组织结构，可以使用 `useDictionary` 读取整个声明的对象。
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### 方案 B — Next.js（App 路由）
+
+优先使用服务器组件以确保数据安全和性能。在服务器文件中使用来自 `next-intlayer/server` 的 `useIntlayer`，在客户端组件中使用来自 `next-intlayer` 的 `useIntlayer`。
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+提示：对于页面元数据和 SEO，您还可以使用 `getIntlayer` 获取内容，并通过 `getMultilingualUrls` 生成多语言 URL。
+
+## 为什么 Intlayer 的组件方法是最佳选择
+
+- **内容共置**：内容声明与组件紧密相邻，减少偏差并提升设计系统中的复用性。
+- **类型安全**：键和值结构均为强类型；缺失的翻译会在构建时而非运行时暴露。
+- **服务器优先**：原生支持服务器组件，提升安全性和性能；客户端钩子依然保持良好的使用体验。
+- **摇树优化**：仅打包组件实际使用的内容，保持大型应用的负载体积小。
+- **开发体验与工具**：内置中间件、SEO助手，以及可选的可视化编辑器/AI翻译，简化日常工作流程。
+
+请参阅针对 Next.js 的对比和模式总结：https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## 相关指南和参考资料
+
+- React 设置（Vite）：https://intlayer.org/doc/environment/vite-and-react
+- React Router v7：https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack 入门：https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js 设置：https://intlayer.org/doc/environment/nextjs
+- 为什么选择 Intlayer 而不是 next-intl 或 next-i18next：https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+这些页面包含端到端的设置、提供者、路由和 SEO 辅助工具。

package/docs/zh/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: 官方 VS Code 扩展
-description: 学习如何在 VS Code 中使用 Intlayer 扩展来提升您的开发工作流程。快速在本地化内容之间导航并高效管理您的字典。
+description: 学习如何在 VS Code 中使用 Intlayer 扩展以提升您的开发工作流程。快速在本地化内容之间导航并高效管理您的词典。
 keywords:
   - VS Code 扩展
   - Intlayer
@@ -23,92 +23,36 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) 是 **Intlayer** 的官方 Visual Studio Code 扩展，旨在提升开发者在项目中处理本地化内容时的体验。
 
-![Intlayer VS Code 扩展](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code 扩展](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
-扩展链接：[https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
+扩展链接: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## 功能
 
-### 即时导航
+![填充词典](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**支持“转到定义”** – 在 `useIntlayer` 键上使用 `⌘ + 点击`（Mac）或 `Ctrl + 点击`（Windows/Linux）即可立即打开对应的内容文件。  
-**无缝集成** – 与 **react-intlayer** 和 **next-intlayer** 项目完美配合。  
-**多语言支持** – 支持不同语言的本地化内容。  
-**VS Code 集成** – 与 VS Code 的导航和命令面板无缝集成。
-
-### 词典管理命令
-
-直接在 VS Code 中管理您的内容词典：
-
-- **构建词典** – 根据您的项目结构生成内容文件。
-- **推送词典** – 将最新的词典内容上传到您的代码仓库。
-- **拉取词典** – 从代码仓库同步最新的词典内容到本地环境。
+- **即时导航** – 点击 `useIntlayer` 键时，快速跳转到正确的内容文件。
 - **填充词典** – 使用项目中的内容填充词典。
-- **测试词典** – 识别缺失或不完整的翻译。
-
-### 内容声明生成器
-
-轻松生成不同格式的结构化词典文件：
-
-如果您当前正在开发一个组件，它会为您生成 `.content.{ts,tsx,js,jsx,mjs,cjs,json}` 文件。
-
-组件示例：
-
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-生成的 TypeScript 格式文件：
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+![列出命令](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-export default componentContent;
-```
+- **轻松访问 Intlayer 命令** – 轻松构建、推送、拉取、填充和测试内容词典。
 
-可用格式：
+![创建内容文件](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-- **TypeScript (`.ts`)**
-- **ES 模块 (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+- **内容声明生成器** – 以多种格式创建词典内容文件（`.ts`、`.esm`、`.cjs`、`.json`）。
 
-### Intlayer 选项卡（活动栏）
+![测试词典](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-通过点击 VS Code 活动栏中的 Intlayer 图标打开 Intlayer 选项卡。它包含两个视图：
+- **测试词典** – 测试词典中缺失的翻译。
 
-- **搜索**：一个实时搜索栏，用于快速筛选字典及其内容。输入时结果会即时更新。
-- **字典**：一个树状视图，显示您的环境/项目、字典键以及贡献条目的文件。您可以：
-  - 点击文件以在编辑器中打开它。
-  - 使用工具栏执行操作：构建、拉取、推送、填充、刷新、测试和创建字典文件。
-  - 使用上下文菜单执行特定项目操作：
-    - 在字典上：拉取或推送
-    - 在文件上：填充字典
-  - 当您切换编辑器时，如果文件属于某个字典，树状视图会自动展开显示该文件。
+![重建词典](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-## 安装
+- **保持词典最新** – 使您的词典内容保持与项目最新内容同步。
 
-您可以直接从 VS Code 市场安装 **Intlayer**：
+![Intlayer 侧边栏标签 (活动栏)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-1. 打开 **VS Code**。
-2. 进入 **扩展市场**。
-3. 搜索 **"Intlayer"**。
-4. 点击 **安装**。
+- **Intlayer 侧边栏标签 (活动栏)** – 通过专用侧边标签浏览和搜索词典，带有工具栏和上下文操作（构建、拉取、推送、填充、刷新、测试、创建文件）。
 
 ## 使用方法
 
@@ -121,63 +65,65 @@ export default componentContent;
    const content = useIntlayer("app");
    ```
 
-3. 在键（例如 `"app"`）上执行 **Command+点击**（macOS 上为 `⌘+点击`）或 **Ctrl+点击**（Windows/Linux 上）。
+3. **命令点击**（macOS 上为 `⌘+点击`，Windows/Linux 上为 **Ctrl+点击**）键（例如 `"app"`）。
 4. VS Code 会自动打开对应的字典文件，例如 `src/app.content.ts`。
 
-### 管理内容字典
-
 ### Intlayer 侧边栏（活动栏）
 
 使用侧边栏浏览和管理字典：
 
 - 打开活动栏中的 Intlayer 图标。
-- 在**搜索**中，输入内容以实时过滤词典和条目。
-- 在**词典**中，浏览环境、词典和文件。使用工具栏进行构建、拉取、推送、填充、刷新、测试和创建词典文件。右键点击可进行上下文操作（对词典执行拉取/推送，对文件执行填充）。当前编辑器文件在适用时会自动在树视图中显示。
+- 在 **搜索** 中输入内容，实时过滤字典和条目。
+- 在 **字典** 中浏览环境、字典和文件。使用工具栏进行构建（Build）、拉取（Pull）、推送（Push）、填充（Fill）、刷新（Refresh）、测试（Test）和创建字典文件。右键点击可进行上下文操作（字典上的拉取/推送，文件上的填充）。当前编辑器文件在适用时会自动在树中高亮显示。
 
-#### 构建词典
+### 访问命令
 
-生成所有词典内容文件：
+你可以通过 **命令面板** 访问这些命令。
 
 ```sh
 Cmd + Shift + P（macOS）/ Ctrl + Shift + P（Windows/Linux）
 ```
 
-搜索**构建词典**并执行该命令。
-
-#### 推送词典
-
-上传最新的词典内容：
+- **构建字典**
+- **推送字典**
+- **拉取字典**
+- **填充字典**
+- **测试字典**
+- **创建字典文件**
 
-1. 打开**命令面板**。
-2. 搜索**推送词典**。
-3. 选择要推送的词典并确认。
+### 加载环境变量
 
-#### 拉取词典
+Intlayer 建议将您的 AI API 密钥，以及 Intlayer 客户端 ID 和密钥存储在环境变量中。
 
-同步最新的词典内容：
+该扩展可以从您的工作区加载环境变量，以便在正确的上下文中运行 Intlayer 命令。
 
-1. 打开 **命令面板**。
-2. 搜索 **拉取词典（Pull Dictionaries）**。
-3. 选择要拉取的词典。
+- **加载顺序（优先级）**：`.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **非破坏性**：不会覆盖已有的 `process.env` 值。
+- **作用域**：文件从配置的基础目录解析（默认为工作区根目录）。
 
-#### 填充词典
+#### 选择活动环境
 
-使用项目中的内容填充词典：
+- **命令面板**：打开命令面板并运行 `Intlayer: Select Environment`，然后选择环境（例如，`development`、`staging`、`production`）。扩展将尝试加载上述优先级列表中第一个可用的文件，并显示类似“已从 .env.<env>.local 加载环境”的通知。
+- **设置**：进入 `设置 → 扩展 → Intlayer`，并设置：
+  - **环境**：用于解析 `.env.<env>*` 文件的环境名称。
+  - （可选）**环境文件**：显式指定一个 `.env` 文件路径。提供后，该路径优先于推断的列表。
 
-1. 打开 **命令面板**。
-2. 搜索 **填充词典（Fill Dictionaries）**。
-3. 运行命令以填充词典。
+#### Monorepos 和自定义目录
 
-#### 测试词典
+- **命令面板**：打开命令面板并运行 `Intlayer: Select Environment`，然后选择环境（例如，`development`、`staging`、`production`）。扩展将尝试加载上述优先列表中的第一个可用文件，并显示类似“已从 .env.<env>.local 加载环境”的通知。
+- **设置**：进入 `设置 → 扩展 → Intlayer`，并设置：
+  - **环境**：用于解析 `.env.<env>*` 文件的环境名称。
+  - （可选）**Env 文件**：显式指定一个 `.env` 文件路径。提供后，该路径优先于推断的列表。
 
-验证词典并查找缺失的翻译：
+#### 多包仓库和自定义目录
 
-1. 打开 **命令面板**。
-2. 搜索 **测试词典（Test Dictionaries）**。
-3. 查看报告的问题并进行修复。
+如果你的 `.env` 文件位于工作区根目录之外，请在 `设置 → 扩展 → Intlayer` 中设置 **基础目录**。加载器将相对于该目录查找 `.env` 文件。
 
 ## 文档历史
 
-| 版本   | 日期       | 变更           |
-| ------ | ---------- | -------------- |
-| 5.5.10 | 2025-06-29 | 初始化历史记录 |
+| 版本   | 日期       | 变更内容                         |
+| ------ | ---------- | -------------------------------- |
+| 6.1.5  | 2025-09-30 | 添加演示动图                     |
+| 6.1.0  | 2025-09-24 | 新增环境选择章节                 |
+| 6.0.0  | 2025-09-22 | Intlayer 标签页 / 填充与测试命令 |
+| 5.5.10 | 2025-06-29 | 初始化历史                       |