本文探讨了在laravel多语言网站中，如何结合laravel内置的本地化功能与google translate element，实现对动态用户输入内容的翻译。针对laravel本地化无法直接处理数据库中用户提交数据的痛点，我们提出了一种客户端解决方案，通过css类控制翻译范围，并根据应用当前语言动态调整google翻译的目标语言，从而提供一个完整的、可定制的多语言用户体验。
在构建支持多语言的Web应用时，Laravel框架提供了强大的本地化功能来处理静态文本（即预定义的字符串）。然而，当涉及到需要翻译用户在表单中提交并存储到数据库的动态内容时，Laravel的内置本地化机制就显得力不从心了。本文将详细介绍如何利用Google Translate Element作为补充方案，以实现对这些动态内容的客户端翻译，并与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本身并没有提供直接的翻译机制。如果需要翻译这些动态内容，通常需要以下两种策略：
本文将重点介绍第二种——前端翻译方案，特别是如何利用Google Translate Element来解决这一问题。
Google Translate Element是一个免费的客户端工具，允许用户在浏览器中翻译网页内容。通过巧妙地结合其功能与Laravel应用，我们可以实现对动态内容的翻译。
首先，在你的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中显示一个语言选择器，允许用户手动选择翻译语言。默认情况下，它会尝试翻译整个页面。
为了避免Google Translate Element翻译已被Laravel本地化处理过的静态文本，并确保只翻译动态内容，我们可以利用Google Translate Element提供的CSS类：
实施策略： 将整个<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处理。
为了提供更流畅的用户体验，我们可以让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>代码说明：
通过这种方式，当用户切换Laravel应用的语言时，页面上带有translate类的动态内容也会自动被Google Translate Element翻译成对应的目标语言，从而实现无缝的多语言体验。
结合Laravel的内置本地化和Google Translate Element为处理多语言应用中的静态与动态内容提供了一个灵活的解决方案。
优势：
注意事项：
以上就是Laravel多语言应用中动态用户输入内容的翻译策略的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
411
收藏
