@intlayer/docs 9.5.5 → 9.5.7

package/docs/vi/cli/init.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-12-30
-updatedAt: 2025-12-30
+updatedAt: 2026-09-21
 title: Khởi tạo Intlayer
 description: Tìm hiểu cách khởi tạo Intlayer trong dự án của bạn.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - cli
   - init
 history:
+  - version: 9.5.6
+    date: 2026-09-21
+    changes: "Thêm lệnh con init infra"
   - version: 8.6.4
     date: 2026-03-31
     changes: "Thêm tùy chọn --no-gitignore"
@@ -125,6 +128,26 @@ bun x intlayer init --no-gitignore
 
 Thao tác này sẽ thiết lập tất cả các tệp cấu hình nhưng sẽ không sửa đổi tệp `.gitignore` của bạn.
 
+### Thiết lập cơ sở hạ tầng (ứng dụng máy tính để bàn hoặc tự lưu trữ):
+
+```bash
+npx intlayer init infra
+```
+
+Tải xuống và chạy trình cài đặt được lưu trữ (`https://intlayer.org/install.sh`, hoặc `install.ps1` trên Windows), hỏi bạn cách muốn chạy Intlayer:
+
+- **Ứng dụng máy tính để bàn** - cài đặt bảng điều khiển gốc trên máy của bạn, kết nối với Intlayer Cloud.
+- **Docker tất cả trong một (All-in-one)** - bảng điều khiển + API + MongoDB + Redis + MinIO trong một vùng chứa duy nhất.
+- **Docker Compose** - một vùng chứa cho mỗi dịch vụ, để tự lưu trữ có thể mở rộng.
+
+Bỏ qua menu với `--mode`:
+
+```bash
+npx intlayer init infra --mode compose
+```
+
+Bước tương tự cũng được cung cấp bởi `npx intlayer init --interactive`. Xem [tài liệu tham khảo `init infra`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/infra.md) để biết cài đặt của trình cài đặt và [hướng dẫn tự lưu trữ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/self_hosting.md) để biết những gì mỗi chế độ thiết lập.
+
 ## Ví dụ đầu ra:
 
 ```bash

package/docs/vi/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-09-21
 title: Nội dung HTML
 description: Tìm hiểu cách khai báo và sử dụng nội dung HTML với các component tùy chỉnh trong Intlayer. Theo dõi tài liệu này để nhúng nội dung giống HTML phong phú với việc thay thế component động trong dự án quốc tế hóa của bạn.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -235,6 +237,83 @@ Khi bạn truy cập nội dung qua `useIntlayer`, các nút HTML đã được
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Trong Remix 3, các nút HTML giải quyết thành một chuỗi HTML. Chèn chuỗi đó bằng prop `innerHTML` của Remix JSX hoặc với `html.raw` trong chế độ xem `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return <div innerHTML={myHtmlContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return html.raw`<div>${myHtmlContent.value}</div>`;
+    };
+    ```
+
+    > Remix mặc định thoát các giá trị được nội suy. `innerHTML` và `html.raw` là hai cách từ chối thoát, đây là điều mà một chuỗi HTML cần.
+
+    Sử dụng phương thức `.use()` để ghi đè các thẻ hoặc ánh xạ các thành phần tùy chỉnh. Các ghi đè là các hàm trả về một chuỗi HTML:
+
+    ```tsx
+    <div
+      innerHTML={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Trong Astro, các nút HTML giải quyết thành một chuỗi HTML. Chèn chuỗi đó bằng chỉ thị `set:html` trong mẫu hoặc với `innerHTML` trong `<script>` phía client.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myHtmlContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myHtmlContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myHtmlContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myHtmlContent.value;
+    </script>
+    ```
+
+    > Astro mặc định thoát `{biểu thức}`. `set:html` là cách từ chối thoát, đây là điều mà một chuỗi HTML cần.
+
+    Sử dụng phương thức `.use()` để ghi đè các thẻ hoặc ánh xạ các thành phần tùy chỉnh. Các ghi đè là các hàm trả về một chuỗi HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Cấu hình toàn cục với `HTMLProvider`
@@ -470,6 +549,41 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix không có cây thành phần để chứa provider, do đó cấu hình được cài đặt một lần, dưới dạng singleton, khi máy chủ khởi động. Nó cấu hình renderer được trả về bởi `useHTMLRenderer()`. Các nút `html` được trả về bởi `useIntlayer` được kết xuất nguyên trạng; ghi đè các thẻ của chúng trên mỗi nút bằng `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Sử dụng `installIntlayerHTMLDynamic(async () => …)` để tải chậm chính renderer; trình tải chỉ chạy trong lần gọi đầu tiên.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro không có cây thành phần để chứa provider, do đó cấu hình được cài đặt một lần, dưới dạng singleton, trong middleware (máy chủ) và trong `<script>` phía client (trình duyệt). Nó cấu hình renderer được trả về bởi `useHTMLRenderer()`. Các nút `html` được trả về bởi `useIntlayer` được kết xuất nguyên trạng; ghi đè các thẻ của chúng trên mỗi nút bằng `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Chạy một lần khi máy chủ khởi động; bản thân middleware Intlayer
+    // được đăng ký bởi tích hợp, trước tệp này.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Sử dụng `installIntlayerHTMLDynamic(async () => …)` để tải chậm chính renderer; trình tải chỉ chạy trong lần gọi đầu tiên.
+
+  </Tab>
 </Tabs>
 
 ### Kết xuất Thủ công & Công cụ Nâng cao
@@ -642,15 +756,69 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useHTMLRenderer()`
+
+    Lấy một hàm renderer được cấu hình sẵn bởi `installIntlayerHTML()`. Nó trả về một chuỗi HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Tiện ích `renderHTML()`
+
+    Tiện ích độc lập bỏ qua cấu hình toàn cục.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useHTMLRenderer()`
+
+    Lấy một hàm renderer được cấu hình sẵn bởi `installIntlayerHTML()`. Nó trả về một chuỗi HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Tiện ích `renderHTML()`
+
+    Tiện ích độc lập bỏ qua cấu hình toàn cục.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Tham chiếu Tùy chọn
 
 Các tùy chọn này có thể được truyền cho `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, và `renderHTML`.
 
-| Tùy chọn     | Kiểu                  | Mặc định | Mô tả                                                                                                                |
-| :----------- | :-------------------- | :------- | :------------------------------------------------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`     | Bản đồ các thẻ HTML hoặc tên component tùy chỉnh tới các component tương ứng.                                        |
-| `renderHTML` | `Function`            | `null`   | Một hàm render/kết xuất tùy chỉnh để thay thế hoàn toàn bộ parser HTML mặc định (Chỉ dành cho Vue/Svelte providers). |
+| Tùy chọn     | Kiểu                  | Mặc định | Mô tả                                                                                                                          |
+| :----------- | :-------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------- |
+| `components` | `Record<string, any>` | `{}`     | Bản đồ các thẻ HTML hoặc tên component tùy chỉnh tới các component tương ứng.                                                  |
+| `renderHTML` | `Function`            | `null`   | Hàm hiển thị tùy chỉnh để thay thế hoàn toàn trình phân tích cú pháp HTML mặc định (nhà cung cấp Vue, Svelte, Remix và Astro). |
 
 > Lưu ý: Đối với React và Preact, các thẻ HTML chuẩn được cung cấp tự động. Bạn chỉ cần truyền prop `components` nếu bạn muốn ghi đè chúng hoặc thêm các component tùy chỉnh.

package/docs/vi/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Tìm hiểu cách khai báo và sử dụng nội dung Markdown trong trang web đa ngôn ngữ của bạn với Intlayer. Làm theo các bước trong tài liệu trực tuyến này để tích hợp Markdown một cách liền mạch vào dự án của bạn.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Render Markdown hỗ trợ **MDX** — sử dụng bất kỳ component JSX/fram
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Trong Remix 3, các nút Markdown được hiển thị trên máy chủ thành một chuỗi HTML. Chèn chuỗi đó bằng prop `innerHTML` của Remix JSX hoặc với `html.raw` trong chế độ xem `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix mặc định thoát các giá trị được nội suy. `innerHTML` và `html.raw` là hai cách từ chối thoát, đây là điều mà một chuỗi Markdown được hiển thị cần.
+
+    Bạn cũng có thể cung cấp các ghi đè cục bộ cho các thẻ cụ thể bằng phương thức `.use()`. Các ghi đè là các hàm trả về một chuỗi HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` là chuỗi HTML đã hiển thị, trong khi `String()` / `.toString()` trả về nguồn Markdown thô:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Trong Astro, các nút Markdown được hiển thị thành một chuỗi HTML. Chèn chuỗi đó bằng chỉ thị `set:html` trong mẫu hoặc với `innerHTML` trong `<script>` phía client.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro mặc định thoát `{biểu thức}`. `set:html` là cách từ chối thoát, đây là điều mà một chuỗi Markdown được hiển thị cần.
+
+    Bạn cũng có thể cung cấp các ghi đè cục bộ cho các thẻ cụ thể bằng phương thức `.use()`. Các ghi đè là các hàm trả về một chuỗi HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` là chuỗi HTML đã hiển thị, trong khi `String()` / `.toString()` trả về nguồn Markdown thô:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Các tiện ích hỗ trợ (Chỉ Chuỗi Markdown)
@@ -698,6 +805,60 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Lấy một hàm renderer được cấu hình sẵn bởi `installIntlayerMarkdown()`. Nó trả về một chuỗi HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Tiện ích `renderMarkdown()`
+
+    Tiện ích độc lập bỏ qua cấu hình toàn cục.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Lấy một hàm renderer được cấu hình sẵn bởi `installIntlayerMarkdown()`. Nó trả về một chuỗi HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Tiện ích `renderMarkdown()`
+
+    Tiện ích độc lập bỏ qua cấu hình toàn cục.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Cấu hình Toàn cục với `MarkdownProvider`
@@ -997,6 +1158,73 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
     > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix không có cây thành phần để chứa provider, do đó cấu hình được cài đặt một lần, dưới dạng singleton, khi máy chủ khởi động. Nó cấu hình renderer được trả về bởi `useMarkdownRenderer()`. Các nút `md` được trả về bởi `useIntlayer` được hiển thị bằng trình biên dịch mặc định; ghi đè các thẻ của chúng trên mỗi nút bằng `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    Bạn cũng có thể sử dụng trình hiển thị markdown của riêng mình:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Sử dụng `installIntlayerMarkdownDynamic(async () => …)` để tải chậm chính renderer; trình tải chỉ chạy trong lần gọi đầu tiên.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro không có cây thành phần để chứa provider, do đó cấu hình được cài đặt một lần, dưới dạng singleton, trong middleware (máy chủ) và trong `<script>` phía client (trình duyệt). Nó cấu hình renderer được trả về bởi `useMarkdownRenderer()`. Các nút `md` được trả về bởi `useIntlayer` được hiển thị bằng trình biên dịch mặc định; ghi đè các thẻ của chúng trên mỗi nút bằng `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Chạy một lần khi máy chủ khởi động; bản thân middleware Intlayer
+    // được đăng ký bởi tích hợp, trước tệp này.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Bạn cũng có thể sử dụng trình hiển thị markdown của riêng mình:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Sử dụng `installIntlayerMarkdownDynamic(async () => …)` để tải chậm chính renderer; trình tải chỉ chạy trong lần gọi đầu tiên.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1325,6 +1553,40 @@ Bạn có thể sử dụng hàm `parseMarkdown` từ gói Intlayer của framew
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 hiển thị trên máy chủ và phát trực tuyến HTML, vì vậy không có AST nào cần truyền sang máy khách. Phân tích cú pháp một lần và hiển thị AST ở bất kỳ nơi nào trang được xây dựng:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Phân tích cú pháp markdown thành AST có thể tuần tự hóa (ví dụ: một lần khi tải mô-đun)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Hiển thị AST: trình hiển thị chấp nhận chuỗi thô hoặc AST đã được phân tích cú pháp
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Các trang Astro được hiển thị trên máy chủ, vì vậy không có AST nào cần truyền sang máy khách. Phân tích cú pháp Markdown trong frontmatter và hiển thị nó bằng `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Phân tích cú pháp markdown thành AST có thể tuần tự hóa
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Hiển thị AST: trình hiển thị chấp nhận chuỗi thô hoặc AST đã được phân tích cú pháp -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Mẫu này đảm bảo logic phân tích cú pháp Markdown được thực thi hoàn toàn trên server, giảm đáng kể thời gian thực thi phía client và cải thiện tốc độ hydrat hóa ban đầu.

package/docs/vi/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Analog i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Analog đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, `angular-intlayer` cung cấp `provideIntlayer()`, được đăng ký trong `src/app/app.config.ts` để mọi component và trang dựa trên tệp đều có thể đọc nội dung thông qua signal `useIntlayer`. Analog được xây dựng trên Vite, vì vậy plugin `intlayer()` của `vite-intlayer` được thêm cạnh `analog()` trong `vite.config.ts` để theo dõi, xây dựng lại các khai báo nội dung và chạy proxy locale. Các khai báo nội dung được đặt cùng với các component và trang trong `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Cấu hình
+
 Tạo một tệp cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/vi/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Angular 19 đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, `angular-intlayer` cung cấp `provideIntlayer()`, được đăng ký trong `src/app/app.config.ts` để mọi component đều có thể đọc nội dung của nó thông qua signal `useIntlayer`. Angular CLI được chuyển sang builder Webpack tùy chỉnh, và `webpack.config.ts` hợp nhất plugin Intlayer vào bản dựng để theo dõi và xây dựng lại các khai báo nội dung của bạn. Các khai báo nội dung được đặt cùng với các component trong `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Cấu hình
+
 Tạo một tệp cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/vi/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Angular 22 đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, `angular-intlayer` cung cấp `provideIntlayer()`, được đăng ký trong `src/app/app.config.ts` để mọi component đều có thể đọc nội dung của nó thông qua signal `useIntlayer`. Angular CLI được chuyển sang builder esbuild tùy chỉnh, và `esbuild.plugins.ts` đăng ký plugin Intlayer vào bản dựng để theo dõi và xây dựng lại các khai báo nội dung của bạn. Các khai báo nội dung được đặt cùng với các component trong `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một tập tin cấu hình để thiết lập ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}