快速開始

SvelteKit

本頁示範 Intor 在 SvelteKit 專案中的最小整合流程。

安裝

本範例以 SvelteKit minimal 模板為基礎，建立方式可參考官方文件：SvelteKit 。

安裝 Intor：

npm install intor
yarn add intor
pnpm add intor
bun add intor

安裝完成後，需調整 vite.config.ts，以確保 Intor 在 SSR 環境中能被正確打包與執行。

export default defineConfig({
  plugins: [sveltekit()],
  ssr: { noExternal: ["intor"] }, // Ensure Intor is bundled for SSR
});

專案結構

index.json
U
index.json
U
+layout.server.ts
U
+layout.svelte
M
+page.svelte
M
intor-config.ts
U
app.d.ts
M
app.html
M
hooks.server.ts
U

整合步驟

♯1 翻譯內容

在專案中建立 messages 資料夾，並依語系建立子資料夾，每個語系提供一個 index.json。

index.json
U
index.json
U
{
  "hello": "Hello, {name}",
  "rich": "A <tag>text</tag>."
}
{
  "hello": "Bonjour, {name}",
  "rich": "Un <tag>texte</tag>."
}

♯2 設定檔

在 src/lib/ 下建立 i18n/ 資料夾，並於其中建立 intor-config.ts。
本範例採用最基本的翻譯內容載入方式，直接將 messages 定義於設定檔中。

詳見：載入翻譯內容 

intor-config.ts
U
import { defineIntorConfig } from "intor";
import EN from "../../../messages/en/index.json";
import FR from "../../../messages/fr/index.json";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  messages: {
    en: EN,
    fr: FR,
  },
});

♯3 初始化

  1. 在 src/ 下建立 hooks.server.ts，用於處理請求流程。
hooks.server.ts
U
import { createIntorHandler } from "intor/svelte-kit";
import { intorConfig } from "$lib/i18n/intor-config";

export const handle = createIntorHandler(intorConfig);

  1. 修改 app.d.ts，補齊相關型別定義。
app.d.ts
M
import type { InboundContext } from "intor";

declare global {
  namespace App {
    interface Locals {
      intor: InboundContext;
    }
  }
}

export {};

  1. 修改 app.html，設定語言屬性佔位。
app.html
M
// ...
<html lang="%lang%">
// ...

  1. 在 src/routes/ 下建立 +layout.server.ts，並呼叫 intor() 初始化翻譯系統。
+layout.server.ts
U
import { intor } from "intor/server";
import { intorConfig } from "$lib/i18n/intor-config";

export const load = async ({ locals, fetch }) => {
  const intorValue = await intor(intorConfig, locals.intor.locale, { fetch });
  return { intorValue };
};

  1. 修改 +layout.svelte，使用 IntorProvider 包裹整個應用。
+layout.svelte
M
<script lang="ts">
  import favicon from "$lib/assets/favicon.svg";
  import { IntorProvider } from "intor/svelte";

  let { children, data } = $props();
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
</svelte:head>

<IntorProvider value={data.intorValue}>
  {@render children()}
</IntorProvider>

使用範例

透過 useTranslator 取得翻譯相關能力：

  • t：取得對應文字
  • tRich：渲染包含語意 tag 的結構化翻譯內容

透過 useNavigation 取得導航相關能力：

  • goto：負責處理頁面導航與語系切換
+page.svelte
M
<script lang="ts">
  import { useTranslator } from "intor/svelte";
  import { useNavigation } from "intor/svelte-kit";

  const { t, tRich } = useTranslator();
  const { goto } = useNavigation();
</script>

<p>{$t("hello", { name: "Intor" })}</p>

<p>{@html $tRich("rich", { tag: (children) => `<b>${children}</b>` })}</p>

<button onclick={() => goto("/", { locale: "en" })}>English</button>
<button onclick={() => goto("/", { locale: "fr" })}>French</button>

Server-side

於 server-side 中，也可以透過 getTranslator() 取得相同的翻譯能力。
可用於 metadata 生成、API routes 或其他 server-only 執行環境。

+layout.server.ts
M
import { getTranslator } from "intor/server";

// ...

const { t } = await getTranslator(intorConfig, {
  locale: locals.intor.locale,
});
載入翻譯內容
深入了解 Intor 在 SvelteKit 專案中的翻譯內容載入方式。
路由與導向
深入瞭解 Intor 在 SvelteKit 專案中的路由整合方式。
型別安全
深入了解如何在 SvelteKit 專案中啟用 Intor 的型別安全機制。

On this page