\n```\n\n> Nếu bạn muốn sử dụng nội dung của mình trong một thuộc tính `chuỗi`, chẳng hạn như `alt`, `title`, `href`, `aria-label`, v. b., bạn có thể sử dụng giá trị của hàm, như:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Lưu ý về thiết lập định tuyến:**\n> Cấu trúc thư mục bạn sử dụng phụ thuộc vào cài đặt `middleware.routing` trong `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (mặc định):** Giữ ngôn ngữ mặc định ở root (không có tiền tố) và thêm tiền tố cho các ngôn ngữ khác. Sử dụng `[...locale]` để bao gồm tất cả các trường hợp.\n> - **`prefix-all`:** Tất cả các URL đều có tiền tố ngôn ngữ. Bạn có thể sử dụng `[locale]` tiêu chuẩn nếu không cần xử lý root riêng biệt.\n> - **`search-param` hoặc `no-prefix`:** Không yêu cầu các thư mục ngôn ngữ. Ngôn ngữ được quản lý qua tham số truy vấn hoặc cookie.\n\n### Bước 6: Tạo một Lit Custom Element\n\nTạo một Lit custom element. Gọi `installIntlayer` trong `connectedCallback` bằng cách sử dụng thuộc tính `locale` dựa trên máy chủ để khởi tạo singleton quản lý bản dịch ở phía client.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // Khởi tạo với ngôn ngữ được máy chủ phát hiện\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> Thuộc tính `locale` được truyền từ trang Astro (phát hiện phía máy chủ) và được sử dụng trong `connectedCallback` để khởi động `installIntlayer`, thiết lập ngôn ngữ ban đầu cho tất cả các `ReactiveController` hook bên trong thành phần.\n\n> `useIntlayer` được đăng ký như một `ReactiveController`. Nó sẽ tự động yêu cầu thành phần render lại khi ngôn ngữ thay đổi, do đó không cần thêm logic đăng ký (subscription) nào.\n\n### Bước 7: Thêm bộ chuyển đổi ngôn ngữ\n\nChức năng chuyển đổi ngôn ngữ được tích hợp trực tiếp vào phương thức `render()` của Lit custom element (xem Bước 6 ở trên). Nó sử dụng `useLocale` từ `lit-intlayer` và điều hướng đến URL bản địa hóa khi người dùng chọn ngôn ngữ mới:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Bên trong lớp LitElement, sau khi thiết lập useLocale từ Bước 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Điều hướng đến URL bản địa hóa khi thay đổi ngôn ngữ\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Lưu ý về tính phản ứng trong Lit:**\n> `useLocale` trả về một `ReactiveController`. Khi `setLocale` được gọi, controller sẽ tự động yêu cầu một bản cập nhật render, cập nhật trạng thái của các nút mà không cần thao tác DOM thủ công.\n\n> **Lưu ý về tính bền vững:**\n> Việc sử dụng `onLocaleChange` để chuyển hướng qua `window.location.href` đảm bảo rằng một URL ngôn ngữ mới sẽ được truy cập. Điều này cho phép middleware Intlayer thiết lập cookie ngôn ngữ và ghi nhớ lựa chọn của người dùng cho các lần truy cập sau.\n\n### Bước 8: Sitemap và Robots.txt\n\nIntlayer cung cấp các tiện ích để tự động tạo sơ đồ trang web (sitemap) bản địa hóa và file robots.txt của bạn.\n\n#### Sitemap\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nTạo `src/pages/sitemap.xml.ts` để tạo sơ đồ trang web bao gồm tất cả các route bản địa hóa của bạn.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nTạo `src/pages/robots.txt.ts` để kiểm soát hoạt động thu thập thông tin của các công cụ tìm kiếm.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### Cấu hình TypeScript\n\nIntlayer sử dụng cơ chế mở rộng module (module augmentation) để tận dụng TypeScript, làm cho cơ sở mã của bạn mạnh mẽ hơn. Nếu bạn đang sử dụng cú pháp decorators, hãy đảm bảo rằng bạn đã bật `experimentalDecorators` trong compiler options.\n\n\n\n\n\nĐảm bảo cấu hình TypeScript của bạn bao gồm các kiểu dữ liệu được tạo tự động.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Bắt buộc để hỗ trợ decorators trong Lit\n },\n \"include\": [\n // ... cấu hình TypeScript hiện tại của bạn\n \".intlayer/**/*.ts\", // Bao gồm các kiểu dữ liệu được tạo tự động\n ],\n}\n```\n\n### Cấu hình Git\n\nKhuyên bạn nên bỏ qua các file được tạo bởi Intlayer. Điều này ngăn chúng được commit vào kho lưu trữ Git của bạn.\n\nĐể làm điều đó, hãy thêm các hướng dẫn sau vào file `.gitignore` của bạn:\n\n```bash\n# Bỏ qua các file được tạo bởi Intlayer\n.intlayer\n```\n\n### Tiện ích mở rộng VS Code\n\nĐể cải thiện trải nghiệm phát triển của bạn với Intlayer, bạn có thể cài đặt **tiện ích mở rộng Intlayer chính thức cho VS Code**.\n\n[Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nTiện ích này sẽ cung cấp:\n\n- **Tự động hoàn thành** cho các khóa dịch.\n- **Phát hiện lỗi thời gian thực** cho các bản dịch còn thiếu.\n- **Xem trước trực tiếp** nội dung đã dịch.\n- **Các hành động nhanh** để tạo và cập nhật bản dịch dễ dàng.\n\nĐể biết thêm thông tin về cách sử dụng tiện ích này, hãy xem [tài liệu tiện ích VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\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\n\nNế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.\n\nĐể đơn giản hóa quy trình này, Intlayer đề xuất một [trình biên dịch](/vi/doc/compiler) / [trình trích xuất](/vi/doc/concept/cli/extract) để chuyển đổi các thành phần của bạn và trích xuất nội dung.\n\nĐể thiết lập, bạn có thể thêm phần `compiler` vào tệp `intlayer.config.ts` của mình:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Phần còn lại của cấu hình\n compiler: {\n /**\n * Cho biết trình biên dịch có nên được bật hay không.\n */\n enabled: true,\n\n /**\n * Xác định đường dẫn các tệp đầu ra\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Cho biết các thành phần có nên được lưu sau khi chuyển đổi hay không. Bằng cách đó, trình biên dịch có thể được chạy chỉ một lần để chuyển đổi ứng dụng, sau đó có thể được gỡ bỏ.\n */\n saveComponents: false,\n\n /**\n * Tiền tố khóa từ điển\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nChạy trình trích xuất để chuyển đổi các thành phần và trích xuất nội dung\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nCập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Thêm plugin trình biên dịch\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Hoặc npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### Tìm hiểu sâu hơn\n\nNếu bạn muốn tìm hiểu thêm, bạn cũng có thể triển khai [Visual Editor](/vi/doc/concept/editor) hoặc sử dụng [CMS](/vi/doc/concept/cms) để quản lý nội dung bên ngoài.\n","about":"Tìm hiểu cách thêm đa ngôn ngữ (i18n) vào trang web Astro + Lit của bạn bằng Intlayer. Làm theo hướng dẫn này để trang web của bạn có thể sử dụng nhiều ngôn ngữ.","url":"https://intlayer.org/vi/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"đa ngôn ngữ, tài liệu, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Nhà phát triển (Developers), Quản trị nội dung (Content Managers)"}}

Ngày tạo:2026-04-24Cập nhật lần cuối:2026-05-06