Sveltekit I18n Template

xijaja

一个使用 SvelteKit 和 Paraglide 构建的现代化国际化 Web 应用程序模板。

Demo Download

SvelteKit 国际化模板

一个使用 SvelteKit 和 Paraglide 构建的现代化国际化 Web 应用程序模板。

🌟 特性

✅ 现代化技术栈: SvelteKit 2.0+ 和 Svelte 5.0+
🌍 国际化支持: 使用 @inlang/paraglide-js 实现多语言支持
🎨 现代化 UI: TailwindCSS 4.0+ 样式框架
🚀 高性能: Vercel 部署优化
🛠️ 开发体验: TypeScript + ESLint + Prettier

📦 技术栈

SvelteKit: 现代化的 Svelte 元框架
Svelte 5.0: 最新的 Svelte 版本
TypeScript: 类型安全的 JavaScript

🚀 快速开始

前置条件

确保你已经安装了以下工具：

Node.js 18+ 或 Bun
pnpm、npm 或 yarn

安装依赖

# 使用 bun，或使用 npm、pnpm
bun install

开发模式

# 启动开发服务器，或使用 npm、pnpm
bun run dev

访问 http://localhost:5173 查看你的应用。

🌍 国际化配置

添加新语言

在 messages/ 目录中创建新的语言文件：
```
touch messages/fr.json  # 法语示例
```
在 project.inlang/settings.json 中添加新语言：
```
{
    "locales": ["en", "zh", "fr"]
}
```

在语言文件中添加翻译内容：

{
    "$schema": "https://inlang.com/schema/inlang-message-format",
    "name": "Votre nom",
    "welcome": "Bienvenue sur SvelteKit"
}

在组件中使用翻译

<script lang="ts">
    import { m } from '$lib/paraglide/messages';
</script>

<h1>{m.welcome()}</h1><p>{m['about.description']({ name: 'SvelteKit' })}</p>

语言切换

项目已经包含了语言切换功能，位于导航栏的下拉菜单中。你可以通过以下方式程序化切换语言：

import { setLocale } from '$lib/paraglide/runtime';

// 切换到中文
setLocale('zh');

// 切换到英文
setLocale('en');

📚 学习资源

Happy Coding! 🎉

Top categories