@intlayer/docs 8.11.2 → 8.11.3

package/docs/vi/intlayer_with_vite+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Solid i18n - Cách dịch ứng dụng Solid năm 2026
-description: Khám phá cách làm cho trang web Vite và Solid của bạn đa ngôn ngữ. Theo dõi tài liệu để quốc tế hóa (i18n) và dịch nó.
+updatedAt: 2026-05-31
+title: Vite + Solid i18n - Hướng dẫn đầy đủ để dịch Solid
+description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Vite and Solid ứng dụng của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
   - Quốc tế hóa
   - Tài liệu
@@ -56,16 +56,47 @@ history:
 
 <!-- Xem [Mẫu Ứng dụng](https://github.com/aymericzip/intlayer-solid-template) trên GitHub. -->
 
-## Intlayer là gì?
+## Tại sao Intlayer thay thế các lựa chọn thay thế?
 
-**Intlayer** là một thư viện quốc tế hóa (i18n) mã nguồn mở sáng tạo, được thiết kế để đơn giản hóa việc hỗ trợ đa ngôn ngữ trong các ứng dụng web hiện đại.
+So với các giải pháp chính như `@solid-primitives/i18n` hoặc `i18next`, Intlayer là giải pháp đi kèm với các tính năng tối ưu hóa tích hợp như:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Độ che phủ toàn diện">
 
-- **Dễ dàng quản lý bản dịch** bằng cách sử dụng từ điển khai báo ở cấp độ component.
-- **Định vị động metadata**, các route và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu được tạo tự động, cải thiện tính năng tự động hoàn thành và phát hiện lỗi.
-- **Hưởng lợi từ các tính năng nâng cao**, như phát hiện và chuyển đổi locale động.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với Solid bằng cách cung cấp **phạm vi nội dung cấp thành phần**, **bản dịch phản ứng** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n).
+
+</Accordion>
+<Accordion header="Kích thước bundle">
+
+Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
+
+</Accordion>
+<Accordion header="Khả năng bảo trì">
+
+Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
+
+</Accordion>
+<Accordion header="Đại lý AI">
+
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+
+</Accordion>
+<Accordion header="Tự động hóa">
+
+Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
+
+</Accordion>
+<Accordion header="Hiệu suất">
+
+Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
+
+</Accordion>
+<Accordion header="Mở rộng quy mô không có nhà phát triển">
+
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -75,7 +106,9 @@ Với Intlayer, bạn có thể:
 
 <TOC/>
 
-### Bước 1: Cài Đặt Các Phụ Thuộc
+<Steps>
+
+<Step number={1} title="Cài Đặt Các Phụ Thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
 
@@ -113,7 +146,9 @@ Gói cốt lõi cung cấp các công cụ quốc tế hóa cho quản lý cấu
 - **vite-intlayer**  
   Bao gồm plugin Vite để tích hợp Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện locale ưu tiên của người dùng, quản lý cookie, và xử lý chuyển hướng URL.
 
-### Bước 2: Cấu hình dự án của bạn
+</Step>
+
+<Step number={2} title="Cấu hình dự án của bạn">
 
 Tạo một file cấu hình để cấu hình các ngôn ngữ cho ứng dụng của bạn:
 
@@ -137,7 +172,9 @@ export default config;
 
 > Thông qua tệp cấu hình này, bạn có thể thiết lập các URL địa phương hóa, chuyển hướng middleware, tên cookie, vị trí và phần mở rộng của các khai báo nội dung của bạn, tắt các log của Intlayer trên console, và nhiều hơn nữa. Để xem danh sách đầy đủ các tham số có sẵn, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
 
-### Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn
+</Step>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Vite của bạn">
 
 Thêm plugin intlayer vào cấu hình của bạn.
 
@@ -154,7 +191,9 @@ export default defineConfig({
 
 > Plugin `intlayer()` của Vite được sử dụng để tích hợp Intlayer với Vite. Nó đảm bảo việc xây dựng các file khai báo nội dung và giám sát chúng trong chế độ phát triển. Nó định nghĩa các biến môi trường Intlayer trong ứng dụng Vite. Ngoài ra, nó còn cung cấp các bí danh để tối ưu hiệu suất.
 
-### Bước 4: Khai báo Nội dung của Bạn
+</Step>
+
+<Step number={4} title="Khai báo Nội dung của Bạn">
 
 Tạo và quản lý các khai báo nội dung để lưu trữ bản dịch:
 
@@ -181,7 +220,9 @@ export default appContent;
 
 > Để biết thêm chi tiết, hãy tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
 
-### Bước 5: Sử dụng Intlayer trong Mã của Bạn
+</Step>
+
+<Step number={5} title="Sử dụng Intlayer trong Mã của Bạn">
 
 Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:
 
@@ -241,7 +282,9 @@ export default App;
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### (Tùy chọn) Bước 6: Thay đổi ngôn ngữ của nội dung
+</Step>
+
+<Step number={6} title="Thay đổi ngôn ngữ của nội dung" isOptional={true}>
 
 Để thay đổi ngôn ngữ của nội dung, bạn có thể sử dụng hàm `setLocale` được cung cấp bởi hook `useLocale`. Hàm này cho phép bạn đặt locale của ứng dụng và cập nhật nội dung tương ứng.
 
@@ -270,7 +313,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (Tùy chọn) Bước 7: Thêm định tuyến địa phương hóa vào ứng dụng của bạn
+</Step>
+
+<Step number={7} title="Thêm định tuyến địa phương hóa vào ứng dụng của bạn" isOptional={true}>
 
 Mục đích của bước này là tạo các tuyến đường duy nhất cho mỗi ngôn ngữ. Điều này hữu ích cho SEO và URL thân thiện với SEO.
 Ví dụ:
@@ -335,7 +380,9 @@ const App: Component = () => (
 export default App;
 ```
 
-### (Tùy chọn) Bước 8: Thay đổi URL khi ngôn ngữ thay đổi
+</Step>
+
+<Step number={8} title="Thay đổi URL khi ngôn ngữ thay đổi" isOptional={true}>
 
 Để thay đổi URL khi locale thay đổi, bạn có thể sử dụng prop `onLocaleChange` được cung cấp bởi hook `useLocale`. Bạn có thể sử dụng các hook `useNavigate` và `useLocation` từ `@solidjs/router` để cập nhật đường dẫn URL.
 
@@ -372,7 +419,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (Tùy chọn) Bước 9: Chuyển đổi thuộc tính Ngôn ngữ và Hướng của HTML
+</Step>
+
+<Step number={9} title="Chuyển đổi thuộc tính Ngôn ngữ và Hướng của HTML" isOptional={true}>
 
 Cập nhật các thuộc tính `lang` và `dir` của thẻ `<html>` để khớp với locale hiện tại để hỗ trợ khả năng truy cập và SEO.
 
@@ -395,7 +444,9 @@ const AppContent: Component = () => {
 };
 ```
 
-### (Tùy chọn) Bước 10: Tạo thành phần Liên kết Địa phương hóa
+</Step>
+
+<Step number={10} title="Tạo thành phần Liên kết Địa phương hóa" isOptional={true}>
 
 Tạo một thành phần `Link` tùy chỉnh tự động thêm tiền tố các URL nội bộ bằng ngôn ngữ hiện tại.
 
@@ -416,7 +467,9 @@ export const Link: ParentComponent<AnchorProps> = (props) => {
 };
 ```
 
-### (Tùy chọn) Bước 11: Render Markdown
+</Step>
+
+<Step number={11} title="Render Markdown" isOptional={true}>
 
 Intlayer hỗ trợ render nội dung Markdown trực tiếp trong ứng dụng Solid của bạn bằng cách sử dụng trình phân tích cú pháp nội bộ riêng. Theo mặc định, Markdown được xử lý như văn bản thuần túy. Để render nó dưới dạng HTML phong phú, hãy bọc ứng dụng của bạn bằng `MarkdownProvider`.
 
@@ -495,7 +548,9 @@ Tiện ích mở rộng này cung cấp:
 
 ---
 
-### (Tùy chọn) Bước 1 : Trích xuất nội dung các thành phần của bạn
+</Step>
+
+<Step number={1} title="Trích xuất nội dung các thành phần của bạn" isOptional={true}>
 
 Nếu bạn có một cơ sở mã hiện có, việc chuyển đổi hàng nghìn tệp có thể tốn nhiều thời gian.
 
@@ -670,3 +725,7 @@ Chỉnh lệnh nếu dùng pnpm hoặc yarn. Có thể gọi từ CI hoặc bư
 Để tiến xa hơn, bạn có thể triển khai [trình soạn thảo trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc tách nội dung của bạn ra bên ngoài bằng cách sử dụng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>

package/docs/vi/intlayer_with_vite+svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Svelte i18n - Cách dịch ứng dụng Svelte năm 2026
-description: Khám phá cách làm cho trang web Vite và Svelte của bạn đa ngôn ngữ. Theo dõi tài liệu để quốc tế hóa (i18n) và dịch nó.
+updatedAt: 2026-05-31
+title: Vite + Svelte i18n - Hướng dẫn đầy đủ để dịch Svelte
+description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Vite and Svelte ứng dụng của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
   - Quốc tế hóa
   - Tài liệu
@@ -62,16 +62,47 @@ history:
 
 <TOC/>
 
-## Intlayer là gì?
+## Tại sao Intlayer thay thế các lựa chọn thay thế?
 
-**Intlayer** là một thư viện quốc tế hóa (i18n) mã nguồn mở sáng tạo, được thiết kế để đơn giản hóa việc hỗ trợ đa ngôn ngữ trong các ứng dụng web hiện đại.
+So với các giải pháp chính như `svelte-i18n` hay `i18next`, Intlayer là giải pháp đi kèm với các tính năng tối ưu hóa tích hợp như:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Bảo hiểm toàn diện">
 
-- **Dễ dàng quản lý bản dịch** bằng cách sử dụng các từ điển khai báo ở cấp độ component.
-- **Địa phương hóa động metadata**, các tuyến đường và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu được tạo tự động, cải thiện tự động hoàn thành và phát hiện lỗi.
-- **Tận hưởng các tính năng nâng cao**, như phát hiện và chuyển đổi ngôn ngữ động.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với Svelte bằng cách cung cấp **phạm vi nội dung cấp thành phần**, **bản dịch phản ứng** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n).
+
+</Accordion>
+<Accordion header="Kích thước bundle">
+
+Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
+
+</Accordion>
+<Accordion header="Khả năng bảo trì">
+
+Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
+
+</Accordion>
+<Accordion header="Đại lý AI">
+
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+
+</Accordion>
+<Accordion header="Tự động hóa">
+
+Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
+
+</Accordion>
+<Accordion header="Hiệu suất">
+
+Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
+
+</Accordion>
+<Accordion header="Mở rộng quy mô không có nhà phát triển">
+
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -87,7 +118,9 @@ Với Intlayer, bạn có thể:
 
 Xem [Mẫu Ứng Dụng](https://github.com/aymericzip/intlayer-vite-svelte-template) trên GitHub.
 
-### Bước 1: Cài Đặt Các Phụ Thuộc
+<Steps>
+
+<Step number={1} title="Cài Đặt Các Phụ Thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
 
@@ -125,7 +158,9 @@ bun x intlayer init
 - **vite-intlayer**
   Bao gồm plugin Vite để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện ngôn ngữ ưu tiên của người dùng, quản lý cookie và xử lý chuyển hướng URL.
 
-### Bước 2: Cấu hình dự án của bạn
+</Step>
+
+<Step number={2} title="Cấu hình dự án của bạn">
 
 Tạo một file cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
@@ -149,7 +184,9 @@ export default config;
 
 > Thông qua file cấu hình này, bạn có thể thiết lập các URL có địa phương hóa, chuyển hướng middleware, tên cookie, vị trí và phần mở rộng của các khai báo nội dung, tắt các log của Intlayer trên console, và nhiều hơn nữa. Để xem danh sách đầy đủ các tham số có sẵn, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
 
-### Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn
+</Step>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Vite của bạn">
 
 Thêm plugin intlayer vào cấu hình của bạn.
 
@@ -166,7 +203,9 @@ export default defineConfig({
 
 > Plugin `intlayer()` của Vite được sử dụng để tích hợp Intlayer với Vite. Nó đảm bảo việc xây dựng các file khai báo nội dung và giám sát chúng trong chế độ phát triển. Nó định nghĩa các biến môi trường Intlayer trong ứng dụng Vite. Ngoài ra, nó cung cấp các alias để tối ưu hiệu năng.
 
-### Bước 4: Khai báo Nội dung của bạn
+</Step>
+
+<Step number={4} title="Khai báo Nội dung của bạn">
 
 Tạo và quản lý các khai báo nội dung để lưu trữ các bản dịch:
 
@@ -208,7 +247,9 @@ export default appContent;
 
 > Để biết thêm chi tiết, tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
 
-### Bước 5: Sử dụng Intlayer trong mã của bạn
+</Step>
+
+<Step number={5} title="Sử dụng Intlayer trong mã của bạn">
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -232,7 +273,9 @@ export default appContent;
 > Nếu ứng dụng của bạn đã tồn tại, bạn có thể sử dụng [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) kết hợp với [lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md) để chuyển đổi hàng nghìn component chỉ trong một giây.
 ```
 
-### (Tùy chọn) Bước 6: Thay đổi ngôn ngữ của nội dung
+</Step>
+
+<Step number={6} title="Thay đổi ngôn ngữ của nội dung" isOptional={true}>
 
 ```svelte fileName="src/App.svelte"
 <script lang="ts">
@@ -261,7 +304,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (Tùy chọn) Bước 7: Hiển thị Markdown
+</Step>
+
+<Step number={7} title="Hiển thị Markdown" isOptional={true}>
 
 Intlayer hỗ trợ hiển thị nội dung Markdown trực tiếp trong ứng dụng Svelte của bạn. Theo mặc định, Markdown được xử lý như văn bản thuần túy. Để chuyển đổi Markdown thành HTML phong phú, bạn có thể tích hợp `@humanspeak/svelte-markdown` hoặc một trình phân tích markdown khác.
 
@@ -282,13 +327,17 @@ Intlayer hỗ trợ hiển thị nội dung Markdown trực tiếp trong ứng d
 
 > Bạn cũng có thể truy cập dữ liệu front-matter của markdown bằng cách sử dụng thuộc tính `content.markdownContent.metadata.xxx`.
 
-### (Tùy chọn) Bước 8: Thiết lập trình chỉnh sửa intlayer / CMS
+</Step>
+
+<Step number={8} title="Thiết lập trình chỉnh sửa intlayer / CMS" isOptional={true}>
 
 Để thiết lập trình chỉnh sửa intlayer, bạn phải làm theo [tài liệu trình chỉnh sửa intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md).
 
 Để thiết lập CMS intlayer, bạn phải làm theo [tài liệu CMS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
 
-### (Tùy chọn) Bước 7: Thêm định tuyến có bản địa hóa vào ứng dụng của bạn
+</Step>
+
+<Step number={7} title="Thêm định tuyến có bản địa hóa vào ứng dụng của bạn" isOptional={true}>
 
 Để xử lý định tuyến có bản địa hóa trong ứng dụng Svelte của bạn, bạn có thể sử dụng `svelte-spa-router` cùng với `localeFlatMap` của Intlayer để tạo các tuyến đường cho từng ngôn ngữ.
 
@@ -397,7 +446,9 @@ export default defineConfig({
 });
 ```
 
-### (Tùy chọn) Bước 8: Thay đổi URL khi thay đổi ngôn ngữ
+</Step>
+
+<Step number={8} title="Thay đổi URL khi thay đổi ngôn ngữ" isOptional={true}>
 
 Để cho phép người dùng chuyển đổi ngôn ngữ và cập nhật URL tương ứng, bạn có thể tạo một component `LocaleSwitcher`. Component này sẽ sử dụng `getLocalizedUrl` từ `intlayer` và `push` từ `svelte-spa-router`.
 
@@ -463,7 +514,9 @@ Tiện ích mở rộng này cung cấp:
 
 ### Đi xa hơn
 
-### (Tùy chọn) Bước 1 : Trích xuất nội dung các thành phần của bạn
+</Step>
+
+<Step number={1} title="Trích xuất nội dung các thành phần của bạn" isOptional={true}>
 
 Nếu bạn có một cơ sở mã hiện có, việc chuyển đổi hàng nghìn tệp có thể tốn nhiều thời gian.
 
@@ -636,3 +689,7 @@ Chỉnh lệnh nếu dùng pnpm hoặc yarn. Có thể gọi từ CI hoặc bư
 ### Tiến xa hơn
 
 Để tiến xa hơn, bạn có thể triển khai [trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc tách nội dung của bạn ra bên ngoài bằng cách sử dụng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/vi/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - Cách dịch ứng dụng Vanilla JS vào năm 2026
-description: Khám phá cách làm cho website Vite và Vanilla JS của bạn đa ngôn ngữ. Làm theo tài liệu để quốc tế hóa (i18n) và dịch nó.
+updatedAt: 2026-05-31
+title: i18n Vite + Vanilla JS - Hướng dẫn đầy đủ để dịch Vanilla JS
+description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Vite and Vanilla JS ứng dụng của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
   - Quốc tế hóa
   - Tài liệu
@@ -58,22 +58,55 @@ history:
 
 <TOC/>
 
-## Intlayer là gì?
+## Tại sao Intlayer thay thế các lựa chọn thay thế?
 
-**Intlayer** là một thư viện quốc tế hóa (i18n) mã nguồn mở và sáng tạo được thiết kế để đơn giản hóa việc hỗ trợ đa ngôn ngữ trong các ứng dụng web hiện đại.
+So với các giải pháp chính như `i18next` hay `i18n.js`, Intlayer là giải pháp đi kèm với các tính năng tối ưu hóa tích hợp như:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Phủ sóng toàn bộ Vite">
 
-- **Dễ dàng quản lý các bản dịch** bằng cách sử dụng các từ điển khai báo ở cấp độ thành phần.
-- **Bản địa hóa động metadata**, route và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu dữ liệu được tạo tự động, cải thiện tính năng tự động hoàn thành và phát hiện lỗi.
-- **Tận dụng các tính năng nâng cao**, như phát hiện và chuyển đổi ngôn ngữ động.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với Vite bằng cách cung cấp **quản lý nội dung không phụ thuộc vào khung**, **hỗ trợ TypeScript** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n).
+
+</Accordion>
+<Accordion header="Kích thước bundle">
+
+Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
+
+</Accordion>
+<Accordion header="Khả năng bảo trì">
+
+Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
+
+</Accordion>
+<Accordion header="Đại lý AI">
+
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+
+</Accordion>
+<Accordion header="Tự động hóa">
+
+Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
+
+</Accordion>
+<Accordion header="Hiệu suất">
+
+Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
+
+</Accordion>
+<Accordion header="Mở rộng quy mô không có nhà phát triển">
+
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng Vite và Vanilla JS
 
-### Bước 1: Cài đặt các phụ thuộc
+<Steps>
+
+<Step number={1} title="Cài đặt các phụ thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Bao gồm plugin Vite để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện ngôn ngữ ưa thích của người dùng, quản lý cookie và xử lý chuyển hướng URL.
 
-### Bước 2: Cấu hình dự án của bạn
+</Step>
+
+<Step number={2} title="Cấu hình dự án của bạn">
 
 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:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Thông qua tệp cấu hình này, bạn có thể thiết lập URL được bản địa hóa, chuyển hướng middleware, tên cookie, vị trí và phần mở rộng của các khai báo nội dung, tắt log Intlayer trong console, và nhiều hơn nữa. Để biết danh sách đầy đủ các tham số khả dụng, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
 
-### Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn
+</Step>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Vite của bạn">
 
 Thêm plugin intlayer vào cấu hình của bạn.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > Plugin Vite `intlayer()` được sử dụng để tích hợp Intlayer với Vite. Nó đảm bảo việc xây dựng các tệp khai báo nội dung và theo dõi chúng trong chế độ phát triển. Nó định nghĩa các biến môi trường Intlayer trong ứng dụng Vite. Ngoài ra, nó cung cấp các alias để tối ưu hóa hiệu suất.
 
-### Bước 4: Khởi tạo Intlayer trong entry point của bạn
+</Step>
+
+<Step number={4} title="Khởi tạo Intlayer trong entry point của bạn">
 
 Gọi `installIntlayer()` **trước khi** bất kỳ nội dung nào được render để ngôn ngữ singleton toàn cầu sẵn sàng.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### Bước 5: Khai báo nội dung của bạn
+</Step>
+
+<Step number={5} title="Khai báo nội dung của bạn">
 
 Tạo và quản lý các khai báo nội dung để lưu trữ các bản dịch:
 
@@ -253,7 +294,9 @@ export default appContent;
 >
 > Để biết thêm chi tiết, hãy tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
 
-### Bước 6: Sử dụng Intlayer trong JavaScript của bạn
+</Step>
+
+<Step number={6} title="Sử dụng Intlayer trong JavaScript của bạn">
 
 `vanilla-intlayer` ánh xạ API của `react-intlayer`: `useIntlayer(key, locale?)` trả về nội dung đã dịch trực tiếp. Chuỗi hàm `.onChange()` vào kết quả để đăng ký theo dõi các thay đổi ngôn ngữ - tương đương với việc re-render trong React.
 
@@ -289,7 +332,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Tùy chọn) Bước 7: Thay đổi ngôn ngữ nội dung của bạn
+</Step>
+
+<Step number={7} title="Thay đổi ngôn ngữ nội dung của bạn" isOptional={true}>
 
 Để thay đổi ngôn ngữ nội dung, hãy sử dụng hàm `setLocale` được cung cấp bởi `useLocale`.
 
@@ -324,7 +369,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (Tùy chọn) Bước 8: Render nội dung Markdown và HTML
+</Step>
+
+<Step number={8} title="Render nội dung Markdown và HTML" isOptional={true}>
 
 Intlayer hỗ trợ khai báo nội dung dưới dạng `md()` và `html()`. Trong Vanilla JS, đầu ra đã biên dịch được chèn dưới dạng HTML thô qua `innerHTML`.
 
@@ -383,7 +430,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (Tùy chọn) Bước 9: Thêm Localized Routing vào ứng dụng của bạn
+</Step>
+
+<Step number={9} title="Thêm Localized Routing vào ứng dụng của bạn" isOptional={true}>
 
 Để tạo các route duy nhất cho mỗi ngôn ngữ (hữu ích cho SEO), bạn có thể sử dụng `intlayerProxy` trong cấu hình Vite của mình để phát hiện ngôn ngữ ở phía server.
 
@@ -403,7 +452,9 @@ export default defineConfig({
 });
 ```
 
-### (Tùy chọn) Bước 10: Thay đổi URL khi ngôn ngữ thay đổi
+</Step>
+
+<Step number={10} title="Thay đổi URL khi ngôn ngữ thay đổi" isOptional={true}>
 
 Để cập nhật URL trình duyệt khi ngôn ngữ thay đổi, hãy gọi `useRewriteURL()` sau khi cài đặt Intlayer:
 
@@ -417,7 +468,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (Tùy chọn) Bước 11: Chuyển đổi thuộc tính Language và Direction của HTML
+</Step>
+
+<Step number={11} title="Chuyển đổi thuộc tính Language và Direction của HTML" isOptional={true}>
 
 Cập nhật các thuộc tính `lang` và `dir` của thẻ `<html>` để khớp với ngôn ngữ hiện tại nhằm hỗ trợ truy cập và SEO.
 
@@ -435,7 +488,9 @@ useLocale({
 });
 ```
 
-### (Tùy chọn) Bước 12: Lazy-load từ điển theo ngôn ngữ
+</Step>
+
+<Step number={12} title="Lazy-load từ điển theo ngôn ngữ" isOptional={true}>
 
 Đối với các ứng dụng lớn, bạn có thể muốn chia từ điển của mỗi ngôn ngữ thành một phần (chunk) riêng. Sử dụng `useDictionaryDynamic` cùng với `import()` động của Vite:
 
@@ -458,7 +513,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > Mỗi bundle ngôn ngữ chỉ được tải khi ngôn ngữ đó được kích hoạt và kết quả được lưu vào cache - các lần chuyển đổi sau đó sang cùng một ngôn ngữ sẽ diễn ra tức thì.
 
-### (Tùy chọn) Bước 13: Trích xuất nội dung từ các thành phần của bạn
+</Step>
+
+<Step number={13} title="Trích xuất nội dung từ các thành phần của bạn" isOptional={true}>
 
 Nếu bạn có một codebase hiện có, việc chuyển đổi hàng ngàn tệp có thể tốn thời gian.
 
@@ -673,3 +730,7 @@ Extension này cung cấp:
 ### Đi xa hơn
 
 Để tìm hiểu sâu hơn, bạn có thể triển khai [trình soạn thảo trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc bên ngoài hóa nội dung của bạn bằng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
+
+</Step>
+
+</Steps>