@intlayer/docs 9.5.4-canary.0 → 9.5.5

package/docs/vi/packages/astro-intlayer/exports.md

@@ -1,12 +1,12 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
-title: Tài liệu gói astro-intlayer
-description: Tích hợp Astro cho Intlayer, cung cấp cấu hình cho định tuyến theo locale và quản lý từ điển.
+updatedAt: 2026-09-19
+title: Tài liệu Gói astro-intlayer
+description: Tích hợp Astro cho Intlayer, cung cấp cấu hình định tuyến theo ngôn ngữ, middleware, hooks, client store và quản lý từ điển.
 keywords:
   - astro-intlayer
   - astro
-  - internationalization
+  - quốc tế hóa
   - i18n
 slugs:
   - doc
@@ -14,15 +14,18 @@ slugs:
   - astro-intlayer
   - exports
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Thêm tài liệu cho useIntlayer, useDictionary, useLocale hooks, middleware và formatters"
   - version: 8.0.0
     date: 2026-01-21
-    changes: "Hợp nhất tài liệu cho tất cả các exports"
+    changes: "Hợp nhất tài liệu cho tất cả các bản xuất"
 author: aymericzip
 ---
 
 # Gói astro-intlayer
 
-Gói `astro-intlayer` cung cấp các công cụ cần thiết để tích hợp Intlayer vào các ứng dụng Astro. Nó cấu hình định tuyến theo locale và quản lý từ điển.
+Gói `astro-intlayer` cung cấp các công cụ cần thiết để tích hợp Intlayer vào các ứng dụng Astro. Nó cấu hình định tuyến dựa trên ngôn ngữ, quản lý từ điển, viết lại trang trong quá trình build, middleware xử lý yêu cầu và các hook để truy cập nội dung đa ngôn ngữ trên cả các thành phần `.astro` được render trên máy chủ và các script phía client.
 
 ## Cài đặt
 
@@ -30,26 +33,175 @@ Gói `astro-intlayer` cung cấp các công cụ cần thiết để tích hợp
 npm install astro-intlayer
 ```
 
-## Các export
+## Các bản xuất (Exports)
 
-### Tích hợp
+### Tích hợp (Integration)
 
-Gói `astro-intlayer` cung cấp integration cho Astro để thiết lập Intlayer trong dự án của bạn.
+Gói `astro-intlayer` cung cấp tích hợp Astro để thiết lập Intlayer trong dự án của bạn.
 
-Nhập:
+Nhập (Import):
 
 ```tsx
-import "astro-intlayer";
+import { intlayer } from "astro-intlayer";
 ```
 
-hoặc thêm vào `astro.config.mjs`:
+hoặc nhập mặc định trong `astro.config.mjs`:
 
 ```ts
+import { defineConfig } from "astro/config";
+import intlayer from "astro-intlayer";
+
 export default defineConfig({
   integrations: [intlayer()],
 });
 ```
 
-| Hàm        | Mô tả                                                            |
-| ---------- | ---------------------------------------------------------------- |
-| `intlayer` | Integration cho Astro để thiết lập Intlayer trong dự án của bạn. |
+| Hàm        | Mô tả                                                                                                                                                                                           | Tài liệu liên quan                                                                                            |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `intlayer` | Tích hợp Astro chuẩn bị từ điển, cấu hình plugin Vite (alias, proxy định tuyến, cắt tỉa mã build), tự động đăng ký middleware yêu cầu và xuất các trang prerender tại các URL được bản địa hóa. | [intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/intlayer.md) |
+
+### Hooks (Máy chủ & Client)
+
+Nhập (Import):
+
+```tsx
+import { useIntlayer, useDictionary, useLocale } from "astro-intlayer";
+```
+
+| Hook            | Mô tả                                                                                                                                                                               | Tài liệu liên quan                                                                                                      |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `useIntlayer`   | Chọn một từ điển theo khóa và trả về nội dung được bản địa hóa. Trong frontmatter `.astro`, nó đọc ngôn ngữ từ `Astro.locals`. Trong `<script>` client, nó đọc từ store của client. | [useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useIntlayer.md)     |
+| `useDictionary` | Chuyển đổi một đối tượng từ điển và trả về nội dung cho ngôn ngữ đã giải quyết. Hoạt động trong frontmatter và script phía client.                                                  | [useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useDictionary.md) |
+| `useLocale`     | Trả về ngôn ngữ hiện tại, ngôn ngữ mặc định, danh sách các ngôn ngữ khả dụng và hàm để cập nhật ngôn ngữ.                                                                           | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useLocale.md)         |
+
+### Middleware (astro-intlayer/middleware)
+
+Nhập (Import):
+
+```tsx
+import { onRequest } from "astro-intlayer/middleware";
+```
+
+| Bản xuất    | Kiểu                | Mô tả                                                                                                                                                  | Tài liệu liên quan                                                                                              |
+| ----------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| `onRequest` | `MiddlewareHandler` | Middleware của Astro phát hiện ngôn ngữ của yêu cầu và gán vào `Astro.locals.intlayer`. Được đăng ký tự động bởi `intlayer()` hoặc được nhập thủ công. | [onRequest](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/onRequest.md) |
+
+### Tiện ích (Utilities)
+
+Nhập (Import):
+
+```tsx
+import { getIntlayerLocals } from "astro-intlayer";
+```
+
+| Hàm                 | Mô tả                                                                                                 | Tài liệu liên quan |
+| ------------------- | ----------------------------------------------------------------------------------------------------- | ------------------ |
+| `getIntlayerLocals` | Hàm hỗ trợ lấy đối tượng `IntlayerLocals` hiện tại từ phạm vi lưu trữ yêu cầu bên ngoài Astro.locals. | -                  |
+
+### Tiện ích Client (astro-intlayer/client)
+
+Nhập (Import):
+
+```tsx
+import {
+  useIntlayer,
+  useDictionary,
+  useDictionaryDynamic,
+  useLocale,
+  useLocaleStorage,
+  useLocaleCookie,
+  getIntlayer,
+  getDictionary,
+  installIntlayer,
+  setLocaleInStorage,
+  setLocaleCookie,
+  localeInStorage,
+  localeCookie,
+} from "astro-intlayer/client";
+```
+
+Khi được nhập trong trình duyệt hoặc bên trong thẻ `<script>` của client, `astro-intlayer` tự động ánh xạ tới `astro-intlayer/client` (được cung cấp bởi `vanilla-intlayer`), cung cấp các hàm lấy từ điển phía client, bộ lắng nghe store và các công cụ lưu trữ ngôn ngữ.
+
+### Trình định dạng (astro-intlayer/format)
+
+Nhập (Import):
+
+```tsx
+import {
+  useIntl,
+  useDate,
+  useNumber,
+  useCurrency,
+  usePercentage,
+  useRelativeTime,
+  useList,
+  useUnit,
+  useCompact,
+} from "astro-intlayer/format";
+```
+
+| Hook              | Mô tả                                                                                                         |
+| ----------------- | ------------------------------------------------------------------------------------------------------------- |
+| `useIntl`         | Trả về một phiên bản Intl gắn liền với ngôn ngữ yêu cầu hoặc client với khả năng lưu vào bộ nhớ cache.        |
+| `useDate`         | Trả về hàm định dạng ngày tháng được liên kết sẵn với ngôn ngữ hiện tại (`Intl.DateTimeFormat`).              |
+| `useNumber`       | Trả về hàm định dạng số được liên kết sẵn với ngôn ngữ hiện tại (`Intl.NumberFormat`).                        |
+| `useCurrency`     | Trả về hàm định dạng tiền tệ được liên kết sẵn với ngôn ngữ hiện tại.                                         |
+| `usePercentage`   | Trả về hàm định dạng phần trăm được liên kết sẵn với ngôn ngữ hiện tại.                                       |
+| `useRelativeTime` | Trả về hàm định dạng thời gian tương đối được liên kết sẵn với ngôn ngữ hiện tại (`Intl.RelativeTimeFormat`). |
+| `useList`         | Trả về hàm định dạng danh sách được liên kết sẵn với ngôn ngữ hiện tại (`Intl.ListFormat`).                   |
+| `useUnit`         | Trả về hàm định dạng đơn vị đo lường được liên kết sẵn với ngôn ngữ hiện tại.                                 |
+| `useCompact`      | Trả về hàm định dạng số thu gọn được liên kết sẵn với ngôn ngữ hiện tại (ví dụ: `1.5K`).                      |
+
+### Tiện ích HTML (astro-intlayer/html)
+
+Nhập (Import):
+
+```tsx
+import { renderHTML, useHTML, useHTMLRenderer } from "astro-intlayer/html";
+```
+
+| Bản xuất          | Kiểu       | Mô tả                                               |
+| ----------------- | ---------- | --------------------------------------------------- |
+| `renderHTML`      | `Function` | Hàm tiện ích độc lập để render các nút HTML.        |
+| `useHTML`         | `Hook`     | Hook để lấy context nhà cung cấp HTML và cấu hình.  |
+| `useHTMLRenderer` | `Hook`     | Hook để lấy hàm render HTML đã được cấu hình trước. |
+
+### Tiện ích Markdown (astro-intlayer/markdown)
+
+Nhập (Import):
+
+```tsx
+import {
+  compileMarkdown,
+  renderMarkdown,
+  parseMarkdown,
+  useMarkdown,
+  useMarkdownRenderer,
+} from "astro-intlayer/markdown";
+```
+
+| Bản xuất              | Kiểu       | Mô tả                                                      |
+| --------------------- | ---------- | ---------------------------------------------------------- |
+| `compileMarkdown`     | `Function` | Biên dịch chuỗi markdown thành cấu trúc phân tích cú pháp. |
+| `renderMarkdown`      | `Function` | Render nội dung markdown thành các nút đầu ra.             |
+| `parseMarkdown`       | `Function` | Phân tích cú pháp nội dung markdown thô thành AST.         |
+| `useMarkdown`         | `Hook`     | Hook để lấy context nhà cung cấp markdown.                 |
+| `useMarkdownRenderer` | `Hook`     | Hook để lấy hàm render Markdown đã được cấu hình trước.    |
+
+### Kiểu dữ liệu (Types)
+
+Nhập (Import):
+
+```tsx
+import type {
+  IntlayerLocals,
+  UseLocaleProps,
+  UseLocaleResult,
+} from "astro-intlayer";
+```
+
+| Kiểu              | Mô tả                                                                                                |
+| ----------------- | ---------------------------------------------------------------------------------------------------- |
+| `IntlayerLocals`  | Đối tượng được gắn vào `Astro.locals.intlayer` chứa `locale`, `defaultLocale` và `availableLocales`. |
+| `UseLocaleProps`  | Các thuộc tính cấu hình tùy chọn được chấp nhận bởi `useLocale()`.                                   |
+| `UseLocaleResult` | Kiểu trả về của `useLocale()`, cung cấp các thuộc tính ngôn ngữ và các phương thức cập nhật.         |

package/docs/vi/packages/astro-intlayer/intlayer.md

@@ -0,0 +1,76 @@
+---
+createdAt: 2026-01-21
+updatedAt: 2026-09-19
+title: Tài liệu Tích hợp intlayer | astro-intlayer
+description: Xem cách cấu hình và sử dụng tích hợp Astro intlayer trong tệp astro.config.mjs.
+keywords:
+  - intlayer
+  - astro
+  - astro-intlayer
+  - tích hợp
+  - i18n
+  - Quốc tế hóa
+  - Tài liệu
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - intlayer
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Cập nhật tài liệu tích hợp với thông tin chi tiết về middleware và hooks"
+  - version: 8.0.0
+    date: 2026-01-21
+    changes: "Khởi tạo tài liệu"
+author: aymericzip
+---
+
+# Tài liệu Tích hợp Astro intlayer
+
+Tích hợp `intlayer` cho Astro cấu hình dự án của bạn cho việc quốc tế hóa đa ngôn ngữ (i18n). Nó xử lý việc chuẩn bị từ điển tại thời điểm build, đưa vào các plugin Vite, tự động đăng ký middleware yêu cầu và xuất các trang prerender được bản địa hóa.
+
+## Cách sử dụng
+
+Thêm `intlayer()` vào tệp `astro.config.mjs` của bạn:
+
+```ts fileName="astro.config.mjs"
+import { defineConfig } from "astro/config";
+import { intlayer } from "astro-intlayer";
+
+export default defineConfig({
+  integrations: [intlayer()],
+});
+```
+
+Lệnh codemod của Astro CLI (`astro add astro-intlayer`) cũng tạo ra import mặc định được hỗ trợ:
+
+```ts
+import intlayer from "astro-intlayer";
+```
+
+## Mô tả chi tiết
+
+Tích hợp móc nối vào vòng đời build và runtime của Astro:
+
+1. **Thiết lập cấu hình (`astro:config:setup`)**:
+   - **Chuẩn bị từ điển**: Chuẩn bị các từ điển Intlayer và các kiểu được tạo trước khi quá trình build chạy.
+   - **Các plugin Vite**: Đưa vào các plugin cho alias của Vite (cho phép import từ điển liền mạch), proxy định tuyến ngôn ngữ và cắt tỉa mã nguồn khi build.
+   - **Đăng ký Middleware**: Tự động đưa `astro-intlayer/middleware` vào chuỗi middleware của dự án, điền thông tin vào `Astro.locals.intlayer` trên mỗi yêu cầu đến.
+2. **Hoàn tất Build (`astro:build:done`)**:
+   - **Viết lại trang**: Kiểm tra các quy tắc viết lại URL theo ngôn ngữ và tạo ra các trang HTML được prerender tại các đường dẫn ngôn ngữ tương ứng.
+
+## Những gì được cung cấp sẵn
+
+Sau khi cấu hình, ứng dụng Astro của bạn có thể sử dụng ngay:
+
+- Các hook `useIntlayer`, `useDictionary` và `useLocale` bên trong frontmatter của thành phần `.astro`.
+- Đối tượng `Astro.locals.intlayer` trong các endpoint và trang Astro.
+- Các bản import phía client trong các khối `<script>` phản ánh cùng một API với các cập nhật phản ứng.
+- Các bộ định dạng tích hợp sẵn trong `astro-intlayer/format` (`useDate`, `useNumber`, `useCurrency`, v.v.).
+
+## Tài liệu liên quan
+
+- [Hook `useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useIntlayer.md)
+- [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useLocale.md)
+- [Middleware `onRequest`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/onRequest.md)

package/docs/vi/packages/astro-intlayer/onRequest.md

@@ -0,0 +1,76 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: Tài liệu Middleware onRequest | astro-intlayer
+description: Xem cách sử dụng middleware onRequest trong các ứng dụng Astro để giải quyết ngôn ngữ yêu cầu và điền vào Astro.locals.intlayer.
+keywords:
+  - onRequest
+  - middleware
+  - astro
+  - astro-intlayer
+  - Astro.locals
+  - Quốc tế hóa
+  - Tài liệu
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - onRequest
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Khởi tạo tài liệu"
+author: aymericzip
+---
+
+# Tài liệu Middleware Astro onRequest
+
+Middleware `onRequest` từ `astro-intlayer/middleware` giải quyết ngôn ngữ của mỗi yêu cầu HTTP đến và điền vào `Astro.locals.intlayer`.
+
+Khi bạn đăng ký tích hợp `intlayer()` trong `astro.config.mjs`, middleware này sẽ được tự động đưa vào. Bạn chỉ cần nhập trực tiếp nếu bạn đang kết hợp thủ công middleware của Astro bằng `sequence(...)`.
+
+## Cách sử dụng
+
+```ts fileName="src/middleware.ts"
+import { onRequest as intlayer } from "astro-intlayer/middleware";
+import { sequence } from "astro:middleware";
+
+export const onRequest = sequence(intlayer, async (context, next) => {
+  // Truy cập ngôn ngữ đã được giải quyết trong middleware tùy chỉnh của bạn
+  const { locale } = context.locals.intlayer;
+  console.log(`Xử lý yêu cầu cho ngôn ngữ: ${locale}`);
+
+  return next();
+});
+```
+
+## Mô tả chi tiết
+
+Middleware thực hiện các tác vụ sau:
+
+1. **Phát hiện ngôn ngữ**:
+   - **URL**: Phân tích tiền tố đường dẫn URL hoặc tham số truy vấn `?locale=` (trừ khi `routing.mode` được đặt thành `no-prefix`).
+   - **Cookies / Headers**: Kiểm tra cookie ngôn ngữ đã lưu hoặc giá trị header tùy chỉnh.
+   - **Accept-Language**: Sử dụng tùy chọn ngôn ngữ của trình duyệt nếu không tìm thấy cài đặt trước đó.
+   - Đối với các trang được prerender (`context.isPrerendered`), ngôn ngữ được trích xuất nghiêm ngặt từ URL để tránh cảnh báo khi build trong Astro.
+2. **Điền Context**: Điền vào `Astro.locals.intlayer` với:
+   - `locale`: Ngôn ngữ đã được giải quyết.
+   - `defaultLocale`: Ngôn ngữ dự phòng mặc định.
+   - `availableLocales`: Mảng các ngôn ngữ đã được cấu hình.
+3. **Phạm vi AsyncLocalStorage**: Bao bọc quá trình xử lý yêu cầu tiếp theo trong phạm vi `AsyncLocalStorage`, cho phép `useIntlayer()`, `useDictionary()` và `useLocale()` truy cập trạng thái yêu cầu mà không cần truyền tham số.
+
+## Kiểu `IntlayerLocals`
+
+```ts
+export type IntlayerLocals = {
+  locale: DeclaredLocales;
+  defaultLocale: DeclaredLocales;
+  availableLocales: DeclaredLocales[];
+};
+```
+
+## Tài liệu liên quan
+
+- [Tích hợp `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/intlayer.md)
+- [Hook `useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useIntlayer.md)
+- [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useLocale.md)

package/docs/vi/packages/astro-intlayer/useDictionary.md

@@ -0,0 +1,94 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: Tài liệu Hook useDictionary | astro-intlayer
+description: Xem cách sử dụng hook useDictionary trong các thành phần và script Astro để giải quyết các đối tượng từ điển.
+keywords:
+  - useDictionary
+  - từ điển
+  - astro
+  - astro-intlayer
+  - Intlayer
+  - intlayer
+  - Quốc tế hóa
+  - Tài liệu
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - useDictionary
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Khởi tạo tài liệu"
+author: aymericzip
+---
+
+# Tài liệu Hook useDictionary
+
+Hook `useDictionary` giải quyết một đối tượng từ điển được nhập hoặc định nghĩa inline và trả về nội dung của nó cho ngôn ngữ hiện tại trong các ứng dụng Astro.
+
+Không giống như `useIntlayer`, lấy từ điển theo khóa từ sổ đăng ký từ điển toàn cục, `useDictionary` hoạt động trực tiếp với một đối tượng từ điển.
+
+## Cách sử dụng
+
+```astro fileName="src/pages/index.astro"
+---
+import { useDictionary } from "astro-intlayer";
+import homeContent from "../content/home.content";
+
+const content = useDictionary(homeContent);
+---
+
+<main>
+  <h1>{content.title}</h1>
+  <p>{content.description}</p>
+</main>
+```
+
+Bạn cũng có thể truyền các từ điển inline được định nghĩa bằng `t()`:
+
+```astro fileName="src/components/Footer.astro"
+---
+import { useDictionary } from "astro-intlayer";
+import { t } from "intlayer";
+
+const footer = useDictionary({
+  key: "footer",
+  content: {
+    copyright: t({
+      vi: "Đã đăng ký bản quyền.",
+      en: "All rights reserved.",
+      fr: "Tous droits réservés.",
+    }),
+  },
+});
+---
+
+<footer>
+  <p>{footer.copyright}</p>
+</footer>
+```
+
+## Tham số
+
+```ts
+useDictionary(dictionary, localeOrSelector?)
+```
+
+1. **`dictionary`**: Một đối tượng từ điển hoặc nhóm từ điển đủ điều kiện.
+2. **`localeOrSelector`** (tùy chọn): Một ngôn ngữ cụ thể hoặc đối tượng bộ chọn (`{ item }`, `{ variant }`, tùy chọn với `locale`).
+
+## Mô tả chi tiết
+
+Hook thực hiện các nhiệm vụ sau:
+
+1. **Phát hiện ngôn ngữ**: Trên máy chủ, nó lấy ngôn ngữ từ `Astro.locals.intlayer`. Trong trình duyệt, nó sử dụng ngôn ngữ trong store của client.
+2. **Xử lý nội dung**: Giải quyết các bản dịch (`t()`), phép liệt kê, điều kiện và các cấu trúc lồng nhau theo ngôn ngữ đã được giải quyết.
+3. **Bộ chọn**: Áp dụng bất kỳ bộ chọn mục hoặc biến thể nào được cung cấp trong đối số.
+
+## Tài liệu liên quan
+
+- [Tích hợp `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/intlayer.md)
+- [Hook `useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useIntlayer.md)
+- [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useLocale.md)

package/docs/vi/packages/astro-intlayer/useIntlayer.md

@@ -0,0 +1,98 @@
+---
+createdAt: 2026-09-19
+updatedAt: 2026-09-19
+title: Tài liệu Hook useIntlayer | astro-intlayer
+description: Xem cách sử dụng hook useIntlayer trong các thành phần Astro và script client để truy cập nội dung được bản địa hóa.
+keywords:
+  - useIntlayer
+  - từ điển
+  - astro
+  - astro-intlayer
+  - Intlayer
+  - intlayer
+  - Quốc tế hóa
+  - Tài liệu
+slugs:
+  - doc
+  - packages
+  - astro-intlayer
+  - useIntlayer
+history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Khởi tạo tài liệu"
+author: aymericzip
+---
+
+# Tài liệu Hook useIntlayer
+
+Hook `useIntlayer` cho phép bạn truy xuất nội dung từ điển được bản địa hóa theo khóa trong các ứng dụng Astro.
+
+Nó có thể được gọi trong hai ngữ cảnh riêng biệt bằng cùng một đường dẫn nhập:
+
+1. **Máy chủ / Frontmatter**: Bên trong các tệp `.astro`, nó tự động phân giải nội dung bằng ngôn ngữ yêu cầu được lưu trữ trong `Astro.locals.intlayer`.
+2. **Trình duyệt / Script Client `<script>`**: Bên trong các script client hoặc các thành phần framework UI, nó phân giải sang triển khai store phía client (`vanilla-intlayer`).
+
+## Cách sử dụng
+
+### Trong Frontmatter của Thành phần Astro
+
+```astro fileName="src/pages/index.astro"
+---
+import { useIntlayer } from "astro-intlayer";
+
+const content = useIntlayer("home");
+---
+
+<main>
+  <h1>{content.title}</h1>
+  <p>{content.description}</p>
+</main>
+```
+
+### Trong các khối `<script>` của Client
+
+```astro fileName="src/components/InteractiveWidget.astro"
+---
+import { useIntlayer } from "astro-intlayer";
+
+const content = useIntlayer("home");
+---
+
+<button id="alert-btn">{content.buttonText}</button>
+
+<script>
+  import { useIntlayer } from "astro-intlayer";
+
+  const content = useIntlayer("home");
+
+  document.getElementById("alert-btn")?.addEventListener("click", () => {
+    alert(content.buttonText);
+  });
+</script>
+```
+
+## Tham số
+
+```ts
+useIntlayer(key, localeOrSelector?)
+```
+
+1. **`key`**: Khóa duy nhất của từ điển (như được định nghĩa trong các tệp khai báo `.content.ts` của bạn).
+2. **`localeOrSelector`** (tùy chọn): Một ngôn ngữ cụ thể hoặc đối tượng bộ chọn (`{ item }`, `{ variant }`, tùy chọn với `locale`). Khi được cung cấp, nó sẽ ghi đè ngôn ngữ được phát hiện từ ngữ cảnh yêu cầu hoặc store client.
+
+## Mô tả chi tiết
+
+Hook thực hiện các nhiệm vụ sau:
+
+1. **Giải quyết ngôn ngữ**:
+   - Trên máy chủ, đọc ngôn ngữ hoạt động từ `Astro.locals.intlayer` thông qua phạm vi `AsyncLocalStorage` được khởi tạo bởi `astro-intlayer/middleware`.
+   - Trong trình duyệt, đọc ngôn ngữ hoạt động từ bộ nhớ hoặc store của client.
+2. **Truy xuất từ điển**: Đưa vào nội dung từ điển khớp với khóa đã chỉ định.
+3. **Xử lý bản dịch**: Giải quyết các bản dịch (`t()`), phép liệt kê, điều kiện và markdown thành nội dung sẵn sàng hiển thị.
+
+## Tài liệu liên quan
+
+- [Tích hợp `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/intlayer.md)
+- [Hook `useDictionary`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useDictionary.md)
+- [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/astro-intlayer/useLocale.md)