57 个版本
| 新 0.1.19 | 2024 年 8 月 19 日 |
|---|---|
| 0.1.18 | 2024 年 8 月 18 日 |
| 0.1.8 | 2024 年 7 月 1 日 |
| 0.1.7 | 2024 年 6 月 29 日 |
| 0.0.14 | 2024 年 2 月 15 日 |
在 Web 编程 中排名 1114
每月下载量 994
90KB
1.5K SLoC
leptos-fluent
使用 fluent-templates 为 Leptos 提供国际化的框架。
安装
将以下内容添加到您的 Cargo.toml 文件中
[dependencies]
leptos-fluent = "0.1"
fluent-templates = "0.10"
[features]
hydrate = [
"leptos-fluent/hydrate"
]
ssr = [
"leptos-fluent/ssr",
"leptos-fluent/actix", # actix and axum are supported
]
如果您正在使用 cargo-leptos 构建项目，请使用以下命令监视 locales/ 文件夹：
[package.metadata.leptos]
watch-additional-files = ["locales"] # Relative to Cargo.toml
用法
给定以下目录结构
.
├── 📄 Cargo.toml
├── 📁 locales
│ ├── 📁 en
│ │ └── 📄 main.ftl
│ └── 📁 es
│ └── 📄 main.ftl
└── 📁 src
├── 📄 main.rs
└── 📄 lib.rs
# locales/en/main.ftl
hello-world = Hello, world!
hello-args = Hello, { $arg1 } and { $arg2 }!
# locales/es/main.ftl
hello-world = ¡Hola, mundo!
hello-args = ¡Hola, { $arg1 } y { $arg2 }!
您可以使用 leptos-fluent 如下：
use fluent_templates::static_loader;
use leptos::*;
use leptos_fluent::{expect_i18n, leptos_fluent, move_tr, tr};
static_loader! {
static TRANSLATIONS = {
locales: "./locales",
fallback_language: "en",
};
}
#[component]
fn App() -> impl IntoView {
// See all options in the reference at
// https://mondeja.github.io/leptos-fluent/leptos_fluent.html
leptos_fluent! {{
// Path to the locales directory, relative to Cargo.toml.
locales: "./locales",
// Static translations struct provided by fluent-templates.
translations: [TRANSLATIONS],
// Check translations correctness in the specified files.
#[cfg(debug_assertions)]
check_translations: "./src/**/*.rs",
// Next options are all opt-in and can be enabled
// separately as needed.
// Client side options
// -------------------
// Synchronize `<html lang="...">` attribute with the
// current active language.
sync_html_tag_lang: true,
// Synchronize `<html dir="...">` attribute with `"ltr"`,
// `"rtl"` or `"auto"` depending on active language.
sync_html_tag_dir: true,
// Update language on URL parameter when changes.
set_language_to_url_param: true,
// Set initial language of the user from
// URL in local storage.
initial_language_from_url_param_to_localstorage: true,
// Set initial language of the user from
// URL in a cookie.
initial_language_from_url_param_to_cookie: true,
// Key used to get and set the current language of the
// user on local storage. By default is `"lang"`.
localstorage_key: "language",
// Get initial language from local storage if not found
// in an URL param.
initial_language_from_localstorage: true,
// Set the initial language of the user from
// local storage to a cookie.
initial_language_from_localstorage_to_cookie: true,
// Update language on local storage when changes.
set_language_to_localstorage: true,
// Get initial language from `navigator.languages`
// if not found in local storage.
initial_language_from_navigator: true,
// Set initial language of the user from
// the navigator to local storage.
initial_language_from_navigator_to_localstorage: true,
// Set initial language of the user from
// the navigator to a cookie.
initial_language_from_navigator_to_cookie: true,
// Attributes to set for language cookie.
// By default is `""`.
cookie_attrs: "Secure; Path=/; Max-Age=600",
// Update language on cookie when the language changes.
set_language_to_cookie: true,
// Set initial language from a cookie to local storage.
initial_language_from_cookie_to_localstorage: true,
// Server side options
// -------------------
// Set initial language from the `Accept-Language`
// header of the request.
initial_language_from_accept_language_header: true,
// Server and client side options
// ------------------------------
// Name of the cookie to get and set the current active
// language. By default, it is `"lf-lang"`.
cookie_name: "lang",
// Set initial language from cookie.
initial_language_from_cookie: true,
// URL parameter to use setting the language in the URL.
// By default is `"lang"`.
url_param: "lang",
// Set initial language of the user from an URL parameter.
initial_language_from_url_param: true,
// Desktop applications (feature `system`)
// ---------------------------------------
// Set initial language from the system locale.
initial_language_from_system: true,
// Set initial language of the user from
// the system locale to a data file.
initial_language_from_system_to_data_file: true,
// Get initial language from a data file.
initial_language_from_data_file: true,
// Key to use to name the data file. Should be unique per
// application. By default is `"leptos-fluent"`.
data_file_key: "my-app",
// Set the language selected to a data file.
set_language_to_data_file: true,
}};
view! {
<TranslatableComponent />
<LanguageSelector />
}
}
#[component]
fn TranslatableComponent() -> impl IntoView {
// Use `tr!` and `move_tr!` macros to translate strings:
view! {
<p>
<span>{move || tr!("hello-world")}</span>
<span>{move_tr!("hello-args", {
"arg1" => "foo",
"arg2" => "bar",
})}</span>
</p>
}
// The `tr!` macro must be inside a reactive context or the
// translation will not be updated on the fly when the language changes.
}
#[component]
fn LanguageSelector() -> impl IntoView {
// `expect_i18n()` to get the i18n context
// `i18n.languages` is a static array with the available languages
// `i18n.language.get()` to get the current language
// `lang.activate()` to set the current language
// `lang.is_active()` to check if a language is the current selected one
view! {
<fieldset>
{
move || expect_i18n().languages.iter().map(|lang| {
view! {
<div>
<input
type="radio"
id=lang
name="language"
value=lang
checked=lang.is_active()
on:click=move |_| lang.activate()
/>
<label for=lang>{lang.name}</label>
</div>
}
}).collect::<Vec<_>>()
}
</fieldset>
}
}
功能
- 服务器端渲染:
ssr - hydration:
hydrate - Actix Web 集成:
actix - Axum 集成:
axum - 夜间工具链:
nightly - 桌面应用程序:
system - JSON 语言文件:
json（默认启用） - YAML 语言文件:
yaml - JSON5 语言文件:
json5 - 跟踪支持:
tracing - 调试:
debug
资源
依赖项
~23–39MB
~584K SLoC