本文探讨了在laravel多语言网站中，如何结合laravel内置的本地化功能与google translate element，实现对动态用户输入内容的翻译。针对laravel本地化无法直接处理数据库中用户提交数据的痛点，我们提出了一种客户端解决方案，通过css类控制翻译范围，并根据应用当前语言动态调整google翻译的目标语言，从而提供一个完整的、可定制的多语言用户体验。
在构建支持多语言的Web应用时，Laravel框架提供了强大的本地化功能来处理静态文本（即预定义的字符串）。然而，当涉及到需要翻译用户在表单中提交并存储到数据库的动态内容时，Laravel的内置本地化机制就显得力不从心了。本文将详细介绍如何利用Google Translate Element作为补充方案，以实现对这些动态内容的客户端翻译，并与Laravel的本地化功能无缝集成。
一、 Laravel内置本地化基础
首先，我们回顾一下Laravel实现多语言网站的基本步骤，这为理解后续的动态内容翻译奠定了基础。
-
语言文件创建： 在resources/lang目录下为每种语言创建对应的语言文件，例如en/message.php和fr/message.php。这些文件包含键值对，用于存储不同语言的静态文本。
// resources/lang/en/message.php <?php return [ 'page_title' => 'Welcome Page', 'welcome_message' => 'Hi, Welcome to this page', 'author_information' => 'My name is Sanjay. This blog is mine and we created this post for you to learn.', ]; // resources/lang/fr/message.php <?php return [ 'page_title' => 'Pagina de bienvenida', // 示例中为西班牙语，实际应为法语 'welcome_message' => 'Hola bienvenido a esta pagina', // 示例中为西班牙语，实际应为法语 'author_information' => 'Mi nombre es Sanjay. Este blog es mío y creamos esta publicación para que aprendas.', // 示例中为西班牙语，实际应为法语 ]; -
路由定义： 定义用于显示页面和切换语言的路由。
// routes/web.php use App\Http\Controllers\LocalizationController; Route::get('/', [LocalizationController::class, "index"]); Route::get('change/lang', [LocalizationController::class, "lang_change"])->name('LangChange'); -
语言控制器：LocalizationController负责处理语言切换逻辑，它会根据用户选择的语言设置应用的区域设置（locale）并存储到会话中。
// app/Http/Controllers/LocalizationController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\App; class LocalizationController extends Controller { public function index() { return view('language'); } public function lang_change(Request $request) { App::setLocale($request->lang); session()->put('locale', $request->lang); return view('language'); } } -
视图集成： 在视图中，使用__('message.key')辅助函数来显示本地化的静态文本，并通过下拉列表结合JavaScript实现语言切换。
<!-- resources/views/language.blade.php --> <body> <div class="container"> <div class="row" style="text-align: center;margin-top: 40px;"> <h2>How to Create Multi Language Website in Laravel - Online Web Tutor Blog</h2><br> <div class="col-md-2 col-md-offset-3 text-right"> <strong>Select Language: </strong> </div> <div class="col-md-4"> <select class="form-control Langchange"> <option value="en" {{ session()->get('locale') == 'en' ? 'selected' : '' }}>English</option> <option value="es" {{ session()->get('locale') == 'es' ? 'selected' : '' }}>Spanish</option> </select> </div> <h1 style="margin-top: 80px;">{{ __('message.page_title') }}</h1> <h2 style="margin-top: 80px;">{{ __('message.welcome_message') }}</h2> <h3 style="margin-top: 80px;">{{ __('message.author_information') }}</h3> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> var url = "{{ route('LangChange') }}"; $(".Langchange").change(function(){ window.location.href = url + "?lang="+ $(this).val(); }); </script> </body>
上述设置可以很好地处理预定义文本的翻译。然而，当用户通过表单提交数据并存储到数据库，然后这些数据在页面上显示时，它们将以用户输入的原始语言显示，而不会根据当前的应用程序语言环境进行翻译。
二、 动态用户输入内容翻译的挑战
Laravel的本地化机制主要针对开发者预先定义的字符串，通过语言文件进行管理。对于用户提交的、存储在数据库中的内容（例如评论、文章正文、产品描述等），Laravel本身并没有提供直接的翻译机制。如果需要翻译这些动态内容，通常需要以下两种策略：
- 后端翻译： 在数据存储或显示前，通过调用翻译API（如Google Cloud Translation API、DeepL API等）进行翻译，并将翻译结果存储到数据库中，或者在每次请求时进行实时翻译。这种方法可以提供高质量的翻译，但增加了开发复杂度和潜在的API成本。
- 前端翻译： 在浏览器端利用JavaScript库或服务（如Google Translate Element）对页面上的特定内容进行实时翻译。这种方法实现相对简单，但翻译质量和SEO效果可能不如后端翻译。
本文将重点介绍第二种——前端翻译方案，特别是如何利用Google Translate Element来解决这一问题。
三、 引入Google Translate Element实现动态翻译
Google Translate Element是一个免费的客户端工具，允许用户在浏览器中翻译网页内容。通过巧妙地结合其功能与Laravel应用，我们可以实现对动态内容的翻译。
1. 基本集成
首先，在你的Blade模板中引入Google Translate Element的JavaScript代码。
<!-- 将以下代码放置在<body>标签内的任意位置，通常是页脚或需要翻译内容的区域 -->
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>这段代码会在id="google_translate_element"的div中显示一个语言选择器，允许用户手动选择翻译语言。默认情况下，它会尝试翻译整个页面。
2. 精细化翻译控制：translate 和 notranslate 类
为了避免Google Translate Element翻译已被Laravel本地化处理过的静态文本，并确保只翻译动态内容，我们可以利用Google Translate Element提供的CSS类：
- notranslate 类： 带有此类的HTML元素及其子元素将不会被Google Translate Element翻译。
- translate 类： 带有此类的HTML元素及其子元素将强制被Google Translate Element翻译。
实施策略： 将整个<body>标签或大部分静态内容包裹在notranslate类中，然后仅对那些包含用户输入（从数据库获取）的动态内容元素添加translate类。
<body>
<div class="container notranslate"> <!-- 整个容器设为不翻译 -->
<!-- ... 你的Laravel本地化内容，如导航、标题等 ... -->
<h1 style="margin-top: 80px;">{{ __('message.page_title') }}</h1>
<h2 style="margin-top: 80px;">{{ __('message.welcome_message') }}</h2>
<h3 style="margin-top: 80px;">{{ __('message.author_information') }}</h3>
<!-- 示例：这里是来自数据库的用户输入内容 -->
<div class="user-generated-content translate">
<p>This paragraph contains user-submitted data from the database, which will be translated.</p>
<p>Here is another piece of dynamic content.</p>
</div>
</div>
<!-- Google Translate Element 放在此处，或页面底部 -->
<div id="google_translate_element"></div>
<script type="text/javascript">
// ... Google Translate Element 初始化代码 ...
</script>
</body>通过这种方式，我们可以精确控制哪些内容由Laravel本地化处理，哪些内容由Google Translate Element处理。
3. 结合应用语言动态切换翻译目标
为了提供更流畅的用户体验，我们可以让Google Translate Element的翻译行为与Laravel应用的当前语言环境保持一致，而不是让用户手动选择。这可以通过JavaScript动态设置Google Translate Element的参数和googtrans cookie来实现。
以下是一个根据应用当前语言动态设置翻译源和目标的示例：
<!-- 将此代码放置在<body>标签内的任意位置，通常在页脚 -->
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
var currentLang = ""; // Google Translate Element 认为的原始语言
var targetLang = ""; // Google Translate Element 翻译的目标语言
// 获取当前HTML文档的语言设置，这通常与Laravel的App::getLocale()一致
// 假设 document.documentElement.lang 反映了 Laravel 的当前 locale
var appLocale = document.documentElement.lang || 'en'; // 默认为英文
// 根据应用的当前语言环境，设置Google Translate的源语言和目标语言
// 这里的逻辑是：如果应用语言是'en'，则假定动态内容默认是'ar'并翻译到'en'
// 如果应用语言是'ar'，则假定动态内容默认是'en'并翻译到'ar'
// 这种设置非常具体，需要根据你的实际情况调整。
// 更通用的做法可能是：假设用户输入内容通常是某种默认语言（如'en'），
// 然后将其翻译到当前的 appLocale。
if (appLocale === "en") {
currentLang = "ar"; // 假设原始内容是阿拉伯语
targetLang = "en"; // 翻译成英语
} else if (appLocale === "ar") {
currentLang = "en"; // 假设原始内容是英语
targetLang = "ar"; // 翻译成阿拉伯语
} else {
// 对于其他语言，可以设置一个默认的翻译逻辑
// 例如：假设原始内容是英语，翻译到当前appLocale
currentLang = "en";
targetLang = appLocale;
}
function googleTranslateElementInit() {
// 设置 googtrans cookie 来强制 Google Translate 进行翻译
// 格式为 /source_language/target_language
setCookie('googtrans', '/' + currentLang + '/' + targetLang, 1);
new google.translate.TranslateElement({
pageLanguage: currentLang, // 告诉Google Translate页面的原始语言
includedLanguages: 'en,ar', // 允许翻译到的目标语言列表 (根据你的需求调整)
autoDisplay: false // 不显示默认的语言选择器
}, 'google_translate_element');
}
// 辅助函数：设置Cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>代码说明：
- div id="google_translate_element" style="display:none;"：隐藏Google Translate Element默认的语言选择器，因为我们希望自动控制翻译。
- appLocale：尝试获取当前HTML文档的语言属性，这通常由Laravel在渲染视图时设置。
- currentLang 和 targetLang：根据appLocale动态确定Google Translate的“源语言”和“目标语言”。请注意，示例中的逻辑假设了动态内容的原始语言是固定在'en'或'ar'之间切换的，并翻译到另一个语言。在实际应用中，你可能需要更通用的逻辑，例如假设所有用户输入默认为英文，然后将其翻译到当前的appLocale。
- setCookie('googtrans', '/' + currentLang + '/' + targetLang, 1);：这是强制Google Translate Element进行特定语言对翻译的关键。它设置了一个名为googtrans的Cookie，其值形如/源语言/目标语言。
- pageLanguage: currentLang：告知Google Translate Element页面的原始语言是什么。
- includedLanguages: 'en,ar'：指定Google Translate Element可以翻译到的语言列表。你可以根据你的应用需求添加更多语言。
- autoDisplay: false：确保不显示Google Translate Element默认的语言选择下拉框。
通过这种方式，当用户切换Laravel应用的语言时，页面上带有translate类的动态内容也会自动被Google Translate Element翻译成对应的目标语言，从而实现无缝的多语言体验。
四、 总结与注意事项
结合Laravel的内置本地化和Google Translate Element为处理多语言应用中的静态与动态内容提供了一个灵活的解决方案。
优势：
- 成本效益： Google Translate Element是免费的，易于集成。
- 快速实现： 相比于后端翻译API，前端集成更为快捷。
- 混合模式： 能够有效区分并处理静态（Laravel本地化）和动态（Google Translate Element）内容。
注意事项：
- 翻译质量： Google Translate Element提供的是机器翻译，其质量可能不如专业人工翻译或更高级的付费翻译API。
- SEO影响： 客户端翻译的内容不会被搜索引擎索引，因此对于需要SEO的动态内容，此方案可能不适用。在这种情况下，后端翻译并存储翻译结果是更好的选择。
- 用户体验： 客户端翻译可能存在轻微的延迟，页面加载后内容可能会先以原始语言显示，然后才被翻译。
- googtrans Cookie： 依赖于设置googtrans Cookie来控制翻译行为，这是一种非官方的控制方式，未来可能会有变动，或者在某些浏览器/安全设置下表现不一致。
- 语言逻辑： 动态设置currentLang和targetLang的逻辑需要根据你的应用实际情况（例如，用户输入
