\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (Tùy chọn) Bước 6: Thiết lập routing\n\nCác bước sau đây hướng dẫn cách thiết lập routing dựa trên locale trong SvelteKit. Điều này cho phép URL của bạn bao gồm tiền tố locale (ví dụ: `/en/about`, `/fr/about`) để cải thiện SEO và trải nghiệm người dùng.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Định nghĩa kiểu locale\n ├── hooks.server.ts # Quản lý routing theo locale\n ├── lib\n │ └── getLocale.ts # Kiểm tra locale từ header, cookies\n ├── params\n │ └── locale.ts # Định nghĩa tham số locale\n └── routes\n ├── [[locale=locale]] # Bao bọc trong nhóm route để đặt locale\n │ ├── +layout.svelte # Bố cục cục bộ cho route\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Bố cục gốc cho font chữ và kiểu toàn cục\n```\n\n### Bước 7: Xử lý phát hiện locale phía Server (Hooks)\n\nTrong SvelteKit, server cần biết locale của người dùng để render nội dung chính xác trong SSR. Chúng ta sử dụng `hooks.server.ts` để phát hiện locale từ URL hoặc cookies.\n\nTạo hoặc chỉnh sửa `src/hooks.server.ts`:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Kiểm tra xem đường dẫn hiện tại đã bắt đầu bằng một locale chưa (ví dụ: /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Nếu KHÔNG có locale trong URL (ví dụ: người dùng truy cập \"/\"), chuyển hướng họ\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Chuyển hướng tạm thời\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nSau đó, tạo một helper để lấy locale của người dùng từ request event:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * Lấy ngôn ngữ của người dùng từ sự kiện request.\n * Hàm này được sử dụng trong hook `handle` tại `src/hooks.server.ts`.\n *\n * Đầu tiên, nó cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (cookies hoặc header tùy chỉnh).\n * Nếu không tìm thấy ngôn ngữ, nó sẽ dùng phương pháp thương lượng \"Accept-Language\" của trình duyệt.\n *\n * @param event - Sự kiện request từ SvelteKit\n * @returns Ngôn ngữ của người dùng\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (Cookies hoặc headers)\n const storedLocale = getLocaleFromStorage({\n // Truy cập cookies của SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Truy cập headers của SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Dự phòng sử dụng đàm phán \"Accept-Language\" của trình duyệt\n const negotiatorHeaders: Record<string, string> = {};\n\n // Chuyển đổi đối tượng Headers của SvelteKit thành Record<string, string> thuần\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Kiểm tra locale từ header `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Trả về locale mặc định nếu không tìm thấy kết quả phù hợp\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` sẽ kiểm tra locale từ header hoặc cookie tùy theo cấu hình của bạn. Xem thêm tại [Cấu hình](https://intlayer.org/doc/configuration) để biết chi tiết.\n\n> Hàm `localeDetector` sẽ xử lý header `Accept-Language` và trả về kết quả phù hợp nhất.\n\nNếu locale chưa được cấu hình, chúng ta muốn trả về lỗi 404. Để dễ dàng hơn, ta có thể tạo một hàm `match` để kiểm tra xem locale có hợp lệ hay không:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Lưu ý:** Đảm bảo rằng file `src/app.d.ts` của bạn bao gồm định nghĩa locale:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nĐối với file `+layout.svelte`, chúng ta có thể xóa hết mọi thứ, chỉ giữ lại nội dung tĩnh, không liên quan đến i18n:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nSau đó, tạo một trang và layout mới trong nhóm `[[locale=locale]]`:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Sử dụng kiểu Load chung\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Khởi tạo Intlayer với locale lấy từ route\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Sử dụng từ điển nội dung layout\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Sử dụng từ điển nội dung trang chủ\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (Tùy chọn) Bước 8: Liên kết quốc tế hóa\n\nĐể tối ưu SEO, nên thêm tiền tố locale vào các route của bạn (ví dụ: `/en/about`, `/fr/about`). Thành phần này tự động thêm tiền tố locale hiện tại vào bất kỳ liên kết nào.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nNếu bạn sử dụng `goto` từ SvelteKit, bạn có thể dùng cùng logic với `getLocalizedUrl` để điều hướng đến URL đã được địa phương hóa:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy theo locale\n```\n\n### (Tùy chọn) Bước 9: Bộ chuyển đổi ngôn ngữ\n\nĐể cho phép người dùng chuyển đổi ngôn ngữ, cập nhật URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Sẽ đặt locale trong store và kích hoạt onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Tùy chọn) Bước 10: Thêm proxy backend\n\nĐể thêm proxy backend vào ứng dụng SvelteKit của bạn, bạn có thể sử dụng hàm `intlayerProxy` được cung cấp bởi plugin `vite-intlayer`. Plugin này sẽ tự động phát hiện locale tốt nhất cho người dùng dựa trên URL, cookie và sở thích ngôn ngữ trình duyệt.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (Tùy chọn) Bước 11: Thiết lập trình chỉnh sửa intlayer / CMS\n\nĐể 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](/vi/doc/concept/editor).\n\nĐể thiết lập CMS intlayer, bạn phải làm theo [tài liệu CMS intlayer](/vi/doc/concept/cms).\n\nĐể có thể hiển thị bộ chọn trình chỉnh sửa intlayer, bạn sẽ phải sử dụng cú pháp component trong nội dung intlayer của mình.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Cấu hình Git\n\nKhuyến nghị bỏ qua các tệp được tạo bởi Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Bỏ qua các tệp được tạo bởi Intlayer\n.intlayer\n```\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### Đi xa hơn\n\n- **Trình chỉnh sửa trực quan**: Tích hợp [Trình chỉnh sửa trực quan Intlayer](/vi/doc/concept/editor) để chỉnh sửa bản dịch trực tiếp từ giao diện người dùng.\n- **CMS**: Đưa việc quản lý nội dung của bạn ra bên ngoài bằng cách sử dụng [Intlayer CMS](/vi/doc/concept/cms).\n","about":"Khám phá cách làm cho trang web SvelteKit 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ó bằng cách sử dụng Server-Side Rendering (SSR).","url":"https://intlayer.org/vi/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Quốc tế hóa, Tài liệu, Intlayer, SvelteKit, JavaScript, SSR","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:2025-11-20Cập nhật lần cuối:2026-05-06

Xem mẫu ứng dụng trên GitHub

Trang này có một mẫu ứng dụng có sẵn.

Xem ứng dụng trưng bày

Trang này liên kết đến bản demo trực tiếp của mẫu.

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạn

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn

Lịch sử phiên bản

"Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
v8.9.04/5/2026
"Thêm lệnh init"
v7.5.930/12/2025
"Khởi tạo lịch sử"
v7.1.1020/11/2025

Nội dung của trang này đã được dịch bằng AI.

Xem phiên bản mới nhất của nội dung gốc bằng tiếng Anh

Chỉnh sửa tài liệu này

Nếu bạn có ý tưởng để cải thiện tài liệu này, vui lòng đóng góp bằng cách gửi pull request trên GitHub.

Liên kết GitHub tới tài liệu

Sao chép

Sao chép Markdown của tài liệu vào bộ nhớ tạm

Dịch trang web SvelteKit của bạn bằng Intlayer | Quốc tế hóa (i18n)

ide.intlayer.org

Mục lục

Intlayer là gì?

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. Nó hoạt động liền mạch với khả năng Server-Side Rendering (SSR) của SvelteKit.

Với Intlayer, bạn có thể:

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.
Định vị hóa độ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.
Tận dụng SSR của SvelteKit để quốc tế hóa thân thiện với SEO.

Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng SvelteKit

Để bắt đầu, hãy tạo một dự án SvelteKit mới. Dưới đây là cấu trúc cuối cùng mà chúng ta sẽ tạo:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Bước 1: Cài đặt các phụ thuộc

Cài đặt các gói cần thiết bằng npm:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Gói i18n cốt lõi.
svelte-intlayer: Cung cấp các context provider và store cho Svelte/SvelteKit.
vite-intlayer: Plugin Vite để tích hợp khai báo nội dung với quá trình build.

Bước 2: Cấu hình dự án của bạn

Tạo một file cấu hình trong thư mục gốc của dự án:

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn

Cập nhật vite.config.ts của bạn để bao gồm plugin Intlayer. Plugin này xử lý việc transpile các file nội dung của bạn.

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // thứ tự quan trọng, Intlayer nên được đặt trước SvelteKit});

Bước 4: Khai báo Nội dung của bạn

Tạo các file khai báo nội dung ở bất kỳ đâu trong thư mục src của bạn (ví dụ: src/lib/content hoặc cùng thư mục với các component của bạn). Các file này định nghĩa nội dung có thể dịch cho ứng dụng của bạn bằng cách sử dụng hàm t() cho từng locale.

Bước 5: Sử dụng Intlayer trong các Component của bạn

Bây giờ bạn có thể sử dụng hàm useIntlayer trong bất kỳ component Svelte nào. Hàm này trả về một store phản ứng tự động cập nhật khi locale thay đổi. Hàm sẽ tự động tuân theo locale hiện tại (cả trong SSR và điều hướng phía client).

Lưu ý: useIntlayer trả về một store của Svelte, vì vậy bạn cần sử dụng tiền tố `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Cách dịch ứng dụng SvelteKit của bạn – hướng dẫn i18n 2026 description: Khám phá cách làm cho trang web SvelteKit 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ó bằng cách sử dụng Server-Side Rendering (SSR). keywords:

Quốc tế hóa
Tài liệu
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Khởi tạo lịch sử

Dịch trang web SvelteKit của bạn bằng Intlayer | Quốc tế hóa (i18n)

Mục lục

Intlayer là gì?

Với Intlayer, bạn có thể:

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.
Định vị hóa độ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.
Tận dụng SSR của SvelteKit để quốc tế hóa thân thiện với SEO.

Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng SvelteKit

Để bắt đầu, hãy tạo một dự án SvelteKit mới. Dưới đây là cấu trúc cuối cùng mà chúng ta sẽ tạo:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Bước 1: Cài đặt các phụ thuộc

Cài đặt các gói cần thiết bằng npm:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Gói i18n cốt lõi.
svelte-intlayer: Cung cấp các context provider và store cho Svelte/SvelteKit.
vite-intlayer: Plugin Vite để tích hợp khai báo nội dung với quá trình build.

Bước 2: Cấu hình dự án của bạn

Tạo một file cấu hình trong thư mục gốc của dự án:

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn

Cập nhật vite.config.ts của bạn để bao gồm plugin Intlayer. Plugin này xử lý việc transpile các file nội dung của bạn.

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // thứ tự quan trọng, Intlayer nên được đặt trước SvelteKit});

Bước 4: Khai báo Nội dung của bạn

Bước 5: Sử dụng Intlayer trong các Component của bạn

để truy cập giá trị phản ứng của nó (ví dụ: $content.title).

src/lib/components/Component.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" tương ứng với key đã định nghĩa ở Bước 4  const content = useIntlayer("hero-section");</script><!-- Hiển thị nội dung dưới dạng nội dung đơn giản  --><h1>{$content.title}</h1><!-- Để hiển thị nội dung có thể chỉnh sửa bằng trình soạn thảo --><h1>{@const Title = $content.title}<Title /></h1><!-- Để render nội dung dưới dạng chuỗi --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Tùy chọn) Bước 6: Thiết lập routing

Các bước sau đây hướng dẫn cách thiết lập routing dựa trên locale trong SvelteKit. Điều này cho phép URL của bạn bao gồm tiền tố locale (ví dụ: /en/about, /fr/about) để cải thiện SEO và trải nghiệm người dùng.

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

.└─── src    ├── app.d.ts                  # Định nghĩa kiểu locale    ├── hooks.server.ts           # Quản lý routing theo locale    ├── lib    │   └── getLocale.ts          # Kiểm tra locale từ header, cookies    ├── params    │   └── locale.ts             # Định nghĩa tham số locale    └── routes        ├── [[locale=locale]]     # Bao bọc trong nhóm route để đặt locale        │   ├── +layout.svelte    # Bố cục cục bộ cho route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Bố cục gốc cho font chữ và kiểu toàn cục

Bước 7: Xử lý phát hiện locale phía Server (Hooks)

Trong SvelteKit, server cần biết locale của người dùng để render nội dung chính xác trong SSR. Chúng ta sử dụng hooks.server.ts để phát hiện locale từ URL hoặc cookies.

Tạo hoặc chỉnh sửa src/hooks.server.ts:

src/hooks.server.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Kiểm tra xem đường dẫn hiện tại đã bắt đầu bằng một locale chưa (ví dụ: /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Nếu KHÔNG có locale trong URL (ví dụ: người dùng truy cập "/"), chuyển hướng họ  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Chuyển hướng tạm thời    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Sau đó, tạo một helper để lấy locale của người dùng từ request event:

src/lib/getLocale.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Lấy ngôn ngữ của người dùng từ sự kiện request. * Hàm này được sử dụng trong hook `handle` tại `src/hooks.server.ts`. * * Đầu tiên, nó cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (cookies hoặc header tùy chỉnh). * Nếu không tìm thấy ngôn ngữ, nó sẽ dùng phương pháp thương lượng "Accept-Language" của trình duyệt. * * @param event - Sự kiện request từ SvelteKit * @returns Ngôn ngữ của người dùng */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (Cookies hoặc headers)  const storedLocale = getLocaleFromStorage({    // Truy cập cookies của SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Truy cập headers của SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Dự phòng sử dụng đàm phán "Accept-Language" của trình duyệt  const negotiatorHeaders: Record<string, string> = {};  // Chuyển đổi đối tượng Headers của SvelteKit thành Record<string, string> thuần  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Kiểm tra locale từ header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Trả về locale mặc định nếu không tìm thấy kết quả phù hợp  return defaultLocale;};

getLocaleFromStorage sẽ kiểm tra locale từ header hoặc cookie tùy theo cấu hình của bạn. Xem thêm tại Cấu hình để biết chi tiết.

Hàm localeDetector sẽ xử lý header Accept-Language và trả về kết quả phù hợp nhất.

Nếu locale chưa được cấu hình, chúng ta muốn trả về lỗi 404. Để dễ dàng hơn, ta có thể tạo một hàm match để kiểm tra xem locale có hợp lệ hay không:

/src/params/locale.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Lưu ý: Đảm bảo rằng file src/app.d.ts của bạn bao gồm định nghĩa locale:
typescript
Sao chép mã
Sao chép đoạn mã vào khay nhớ tạm (clipboard)
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Đối với file +layout.svelte, chúng ta có thể xóa hết mọi thứ, chỉ giữ lại nội dung tĩnh, không liên quan đến i18n:

src/+layout.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Sau đó, tạo một trang và layout mới trong nhóm [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Sử dụng kiểu Load chungexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Khởi tạo Intlayer với locale lấy từ route  $effect(() => {      setupIntlayer(data.locale);  });    // Sử dụng từ điển nội dung layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Sử dụng từ điển nội dung trang chủ    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Tùy chọn) Bước 8: Liên kết quốc tế hóa

Để tối ưu SEO, nên thêm tiền tố locale vào các route của bạn (ví dụ: /en/about, /fr/about). Thành phần này tự động thêm tiền tố locale hiện tại vào bất kỳ liên kết nào.

src/lib/components/LocalizedLink.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Trợ giúp thêm tiền tố URL với locale hiện tại  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Nếu bạn sử dụng goto từ SvelteKit, bạn có thể dùng cùng logic với getLocalizedUrl để điều hướng đến URL đã được địa phương hóa:

typescript

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy theo locale

(Tùy chọn) Bước 9: Bộ chuyển đổi ngôn ngữ

Để cho phép người dùng chuyển đổi ngôn ngữ, cập nhật URL.

src/lib/components/LanguageSwitcher.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Sẽ đặt locale trong store và kích hoạt onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Tùy chọn) Bước 10: Thêm proxy backend

Để thêm proxy backend vào ứng dụng SvelteKit của bạn, bạn có thể sử dụng hàm intlayerProxy được cung cấp bởi plugin vite-intlayer. Plugin này sẽ tự động phát hiện locale tốt nhất cho người dùng dựa trên URL, cookie và sở thích ngôn ngữ trình duyệt.

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Tùy chọn) Bước 11: Thiết lập trình chỉnh sửa intlayer / CMS

Để 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.

Để thiết lập CMS intlayer, bạn phải làm theo tài liệu CMS intlayer.

Để có thể hiển thị bộ chọn trình chỉnh sửa intlayer, bạn sẽ phải sử dụng cú pháp component trong nội dung intlayer của mình.

Component.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Hiển thị nội dung như nội dung đơn giản -->  <h1>{$content.title}</h1>  <!-- Hiển thị nội dung như một component (bắt buộc bởi trình chỉnh sửa) -->  {@const Component = $content.component}<Component /></div>

Cấu hình Git

Khuyến nghị bỏ qua các tệp được tạo bởi Intlayer.

.gitignore

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

# Bỏ qua các tệp được tạo bởi Intlayer.intlayer

(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ế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 giản hóa quy trình này, Intlayer đề xuất một trình biên dịch / trình trích xuất để chuyển đổi các thành phần của bạn và trích xuất nội dung.

Để thiết lập, bạn có thể thêm phần compiler vào tệp intlayer.config.ts của mình:

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Phần còn lại của cấu hình
  compiler: {
    /**
     * Cho biết trình biên dịch có nên được bật hay không.
     */
    enabled: true,

    /**
     * Xác định đường dẫn các tệp đầu ra
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 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ỏ.
     */
    saveComponents: false,

    /**
     * Tiền tố khóa từ điển
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Chạy trình trích xuất để chuyển đổi các thành phần và trích xuất nội dung

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npx intlayer extract

Cập nhật vite.config.ts của bạn để bao gồm plugin intlayerCompiler:

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Thêm plugin trình biên dịch ],});

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npm run build # Hoặc npm run dev

Đi xa hơn

Trình chỉnh sửa trực quan: Tích hợp Trình chỉnh sửa trực quan Intlayer để chỉnh sửa bản dịch trực tiếp từ giao diện người dùng.
CMS: Đưa việc quản lý nội dung của bạn ra bên ngoài bằng cách sử dụng Intlayer CMS.

Vite và Svelte

Vite và Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Sẽ đặt locale trong store và kích hoạt onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

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

Xem mẫu ứng dụng trên GitHub

Trang này có một mẫu ứng dụng có sẵn.

Xem ứng dụng trưng bày

Trang này liên kết đến bản demo trực tiếp của mẫu.

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạn

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn

Lịch sử phiên bản

"Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
v8.9.04/5/2026
"Thêm lệnh init"
v7.5.930/12/2025
"Khởi tạo lịch sử"
v7.1.1020/11/2025

Nội dung của trang này đã được dịch bằng AI.

Xem phiên bản mới nhất của nội dung gốc bằng tiếng Anh

Chỉnh sửa tài liệu này

Nếu bạn có ý tưởng để cải thiện tài liệu này, vui lòng đóng góp bằng cách gửi pull request trên GitHub.

Liên kết GitHub tới tài liệu

Sao chép

Sao chép Markdown của tài liệu vào bộ nhớ tạm

Dịch trang web SvelteKit của bạn bằng Intlayer | Quốc tế hóa (i18n)

ide.intlayer.org

Mục lục

Intlayer là gì?

Với Intlayer, bạn có thể:

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.
Định vị hóa độ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.
Tận dụng SSR của SvelteKit để quốc tế hóa thân thiện với SEO.

Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng SvelteKit

Để bắt đầu, hãy tạo một dự án SvelteKit mới. Dưới đây là cấu trúc cuối cùng mà chúng ta sẽ tạo:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Bước 1: Cài đặt các phụ thuộc

Cài đặt các gói cần thiết bằng npm:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Gói i18n cốt lõi.
svelte-intlayer: Cung cấp các context provider và store cho Svelte/SvelteKit.
vite-intlayer: Plugin Vite để tích hợp khai báo nội dung với quá trình build.

Bước 2: Cấu hình dự án của bạn

Tạo một file cấu hình trong thư mục gốc của dự án:

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn

Cập nhật vite.config.ts của bạn để bao gồm plugin Intlayer. Plugin này xử lý việc transpile các file nội dung của bạn.

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // thứ tự quan trọng, Intlayer nên được đặt trước SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // thứ tự quan trọng, Intlayer nên được đặt trước SvelteKit});

Bước 4: Khai báo Nội dung của bạn

Bước 5: Sử dụng Intlayer trong các Component của bạn

Lưu ý: useIntlayer trả về một store của Svelte, vì vậy bạn cần sử dụng tiền tố `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Cách dịch ứng dụng SvelteKit của bạn – hướng dẫn i18n 2026 description: Khám phá cách làm cho trang web SvelteKit 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ó bằng cách sử dụng Server-Side Rendering (SSR). keywords:

Quốc tế hóa
Tài liệu
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Khởi tạo lịch sử

Dịch trang web SvelteKit của bạn bằng Intlayer | Quốc tế hóa (i18n)

Mục lục

Intlayer là gì?

Với Intlayer, bạn có thể:

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.
Định vị hóa độ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.
Tận dụng SSR của SvelteKit để quốc tế hóa thân thiện với SEO.

Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng SvelteKit

Để bắt đầu, hãy tạo một dự án SvelteKit mới. Dưới đây là cấu trúc cuối cùng mà chúng ta sẽ tạo:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Bước 1: Cài đặt các phụ thuộc

Cài đặt các gói cần thiết bằng npm:

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Gói i18n cốt lõi.
svelte-intlayer: Cung cấp các context provider và store cho Svelte/SvelteKit.
vite-intlayer: Plugin Vite để tích hợp khai báo nội dung với quá trình build.

Bước 2: Cấu hình dự án của bạn

Tạo một file cấu hình trong thư mục gốc của dự án:

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn

Cập nhật vite.config.ts của bạn để bao gồm plugin Intlayer. Plugin này xử lý việc transpile các file nội dung của bạn.

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // thứ tự quan trọng, Intlayer nên được đặt trước SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // thứ tự quan trọng, Intlayer nên được đặt trước SvelteKit});

Bước 4: Khai báo Nội dung của bạn

Bước 5: Sử dụng Intlayer trong các Component của bạn

để truy cập giá trị phản ứng của nó (ví dụ: $content.title).

src/lib/components/Component.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" tương ứng với key đã định nghĩa ở Bước 4  const content = useIntlayer("hero-section");</script><!-- Hiển thị nội dung dưới dạng nội dung đơn giản  --><h1>{$content.title}</h1><!-- Để hiển thị nội dung có thể chỉnh sửa bằng trình soạn thảo --><h1>{@const Title = $content.title}<Title /></h1><!-- Để render nội dung dưới dạng chuỗi --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" tương ứng với key đã định nghĩa ở Bước 4  const content = useIntlayer("hero-section");</script><!-- Hiển thị nội dung dưới dạng nội dung đơn giản  --><h1>{$content.title}</h1><!-- Để hiển thị nội dung có thể chỉnh sửa bằng trình soạn thảo --><h1>{@const Title = $content.title}<Title /></h1><!-- Để render nội dung dưới dạng chuỗi --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Tùy chọn) Bước 6: Thiết lập routing

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

.└─── src    ├── app.d.ts                  # Định nghĩa kiểu locale    ├── hooks.server.ts           # Quản lý routing theo locale    ├── lib    │   └── getLocale.ts          # Kiểm tra locale từ header, cookies    ├── params    │   └── locale.ts             # Định nghĩa tham số locale    └── routes        ├── [[locale=locale]]     # Bao bọc trong nhóm route để đặt locale        │   ├── +layout.svelte    # Bố cục cục bộ cho route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Bố cục gốc cho font chữ và kiểu toàn cục

.└─── src    ├── app.d.ts                  # Định nghĩa kiểu locale    ├── hooks.server.ts           # Quản lý routing theo locale    ├── lib    │   └── getLocale.ts          # Kiểm tra locale từ header, cookies    ├── params    │   └── locale.ts             # Định nghĩa tham số locale    └── routes        ├── [[locale=locale]]     # Bao bọc trong nhóm route để đặt locale        │   ├── +layout.svelte    # Bố cục cục bộ cho route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Bố cục gốc cho font chữ và kiểu toàn cục

Bước 7: Xử lý phát hiện locale phía Server (Hooks)

Tạo hoặc chỉnh sửa src/hooks.server.ts:

src/hooks.server.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Kiểm tra xem đường dẫn hiện tại đã bắt đầu bằng một locale chưa (ví dụ: /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Nếu KHÔNG có locale trong URL (ví dụ: người dùng truy cập "/"), chuyển hướng họ  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Chuyển hướng tạm thời    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Kiểm tra xem đường dẫn hiện tại đã bắt đầu bằng một locale chưa (ví dụ: /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Nếu KHÔNG có locale trong URL (ví dụ: người dùng truy cập "/"), chuyển hướng họ  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Chuyển hướng tạm thời    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Sau đó, tạo một helper để lấy locale của người dùng từ request event:

src/lib/getLocale.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Lấy ngôn ngữ của người dùng từ sự kiện request. * Hàm này được sử dụng trong hook `handle` tại `src/hooks.server.ts`. * * Đầu tiên, nó cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (cookies hoặc header tùy chỉnh). * Nếu không tìm thấy ngôn ngữ, nó sẽ dùng phương pháp thương lượng "Accept-Language" của trình duyệt. * * @param event - Sự kiện request từ SvelteKit * @returns Ngôn ngữ của người dùng */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (Cookies hoặc headers)  const storedLocale = getLocaleFromStorage({    // Truy cập cookies của SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Truy cập headers của SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Dự phòng sử dụng đàm phán "Accept-Language" của trình duyệt  const negotiatorHeaders: Record<string, string> = {};  // Chuyển đổi đối tượng Headers của SvelteKit thành Record<string, string> thuần  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Kiểm tra locale từ header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Trả về locale mặc định nếu không tìm thấy kết quả phù hợp  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Lấy ngôn ngữ của người dùng từ sự kiện request. * Hàm này được sử dụng trong hook `handle` tại `src/hooks.server.ts`. * * Đầu tiên, nó cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (cookies hoặc header tùy chỉnh). * Nếu không tìm thấy ngôn ngữ, nó sẽ dùng phương pháp thương lượng "Accept-Language" của trình duyệt. * * @param event - Sự kiện request từ SvelteKit * @returns Ngôn ngữ của người dùng */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Cố gắng lấy ngôn ngữ từ bộ nhớ Intlayer (Cookies hoặc headers)  const storedLocale = getLocaleFromStorage({    // Truy cập cookies của SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Truy cập headers của SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Dự phòng sử dụng đàm phán "Accept-Language" của trình duyệt  const negotiatorHeaders: Record<string, string> = {};  // Chuyển đổi đối tượng Headers của SvelteKit thành Record<string, string> thuần  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Kiểm tra locale từ header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Trả về locale mặc định nếu không tìm thấy kết quả phù hợp  return defaultLocale;};

getLocaleFromStorage sẽ kiểm tra locale từ header hoặc cookie tùy theo cấu hình của bạn. Xem thêm tại Cấu hình để biết chi tiết.

Hàm localeDetector sẽ xử lý header Accept-Language và trả về kết quả phù hợp nhất.

Nếu locale chưa được cấu hình, chúng ta muốn trả về lỗi 404. Để dễ dàng hơn, ta có thể tạo một hàm match để kiểm tra xem locale có hợp lệ hay không:

/src/params/locale.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Lưu ý: Đảm bảo rằng file src/app.d.ts của bạn bao gồm định nghĩa locale:
typescript
Sao chép mã
Sao chép đoạn mã vào khay nhớ tạm (clipboard)
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Đối với file +layout.svelte, chúng ta có thể xóa hết mọi thứ, chỉ giữ lại nội dung tĩnh, không liên quan đến i18n:

src/+layout.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Sau đó, tạo một trang và layout mới trong nhóm [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Sử dụng kiểu Load chungexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Sử dụng kiểu Load chungexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Khởi tạo Intlayer với locale lấy từ route  $effect(() => {      setupIntlayer(data.locale);  });    // Sử dụng từ điển nội dung layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Khởi tạo Intlayer với locale lấy từ route  $effect(() => {      setupIntlayer(data.locale);  });    // Sử dụng từ điển nội dung layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Sử dụng từ điển nội dung trang chủ    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Sử dụng từ điển nội dung trang chủ    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Tùy chọn) Bước 8: Liên kết quốc tế hóa

src/lib/components/LocalizedLink.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Trợ giúp thêm tiền tố URL với locale hiện tại  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Trợ giúp thêm tiền tố URL với locale hiện tại  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Nếu bạn sử dụng goto từ SvelteKit, bạn có thể dùng cùng logic với getLocalizedUrl để điều hướng đến URL đã được địa phương hóa:

typescript

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy theo locale

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy theo locale

(Tùy chọn) Bước 9: Bộ chuyển đổi ngôn ngữ

Để cho phép người dùng chuyển đổi ngôn ngữ, cập nhật URL.

src/lib/components/LanguageSwitcher.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Sẽ đặt locale trong store và kích hoạt onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Sẽ đặt locale trong store và kích hoạt onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Tùy chọn) Bước 10: Thêm proxy backend

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Tùy chọn) Bước 11: Thiết lập trình chỉnh sửa intlayer / CMS

Để 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.

Để thiết lập CMS intlayer, bạn phải làm theo tài liệu CMS intlayer.

Để có thể hiển thị bộ chọn trình chỉnh sửa intlayer, bạn sẽ phải sử dụng cú pháp component trong nội dung intlayer của mình.

Component.svelte

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Hiển thị nội dung như nội dung đơn giản -->  <h1>{$content.title}</h1>  <!-- Hiển thị nội dung như một component (bắt buộc bởi trình chỉnh sửa) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Hiển thị nội dung như nội dung đơn giản -->  <h1>{$content.title}</h1>  <!-- Hiển thị nội dung như một component (bắt buộc bởi trình chỉnh sửa) -->  {@const Component = $content.component}<Component /></div>

Cấu hình Git

Khuyến nghị bỏ qua các tệp được tạo bởi Intlayer.

.gitignore

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

# Bỏ qua các tệp được tạo bởi Intlayer.intlayer

# Bỏ qua các tệp được tạo bởi Intlayer.intlayer

(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ế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 giản hóa quy trình này, Intlayer đề xuất một trình biên dịch / trình trích xuất để chuyển đổi các thành phần của bạn và trích xuất nội dung.

Để thiết lập, bạn có thể thêm phần compiler vào tệp intlayer.config.ts của mình:

intlayer.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Phần còn lại của cấu hình
  compiler: {
    /**
     * Cho biết trình biên dịch có nên được bật hay không.
     */
    enabled: true,

    /**
     * Xác định đường dẫn các tệp đầu ra
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 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ỏ.
     */
    saveComponents: false,

    /**
     * Tiền tố khóa từ điển
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Chạy trình trích xuất để chuyển đổi các thành phần và trích xuất nội dung

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npx intlayer extract

npx intlayer extract

Cập nhật vite.config.ts của bạn để bao gồm plugin intlayerCompiler:

vite.config.ts

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Thêm plugin trình biên dịch ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Thêm plugin trình biên dịch ],});

bash

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (clipboard)

npm run build # Hoặc npm run dev

npm run build # Hoặc npm run dev

Đi xa hơn

Trình chỉnh sửa trực quan: Tích hợp Trình chỉnh sửa trực quan Intlayer để chỉnh sửa bản dịch trực tiếp từ giao diện người dùng.
CMS: Đưa việc quản lý nội dung của bạn ra bên ngoài bằng cách sử dụng Intlayer CMS.

Vite và Svelte

Vite và Preact