本文旨在指导如何在Laravel多语言网站中，结合Laravel内置的本地化功能与Google翻译工具，实现对用户动态输入内容的自动翻译。文章将详细阐述如何配置Google翻译以选择性翻译页面元素，并根据应用语言动态调整翻译目标，从而提供一个全面的多语言解决方案，确保网站内容的完整性和用户体验。
Laravel本地化处理静态内容
在构建多语言网站时，Laravel提供了强大的本地化（Localization）功能，主要用于管理应用程序中预定义的静态文本，如页面标题、欢迎消息、表单标签等。其核心机制包括：
-
语言文件结构： 在 resources/lang 目录下创建不同语言的文件夹（如 en、fr），并在其中放置包含键值对的PHP文件（如 messages.php）。
// resources/lang/en/messages.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/messages.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');// 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 redirect()->back(); // 切换语言后重定向回原页面 } } -
视图中的使用： 在Blade模板中使用 __() 辅助函数或 @lang 指令来显示对应语言的文本。
<!-- resources/views/language.blade.php --> <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> <h1>{{ __('messages.page_title') }}</h1> <h2>{{ __('messages.welcome_message') }}</h2> <h3>{{ __('messages.author_information') }}</h3> <script type="text/javascript"> var url = "{{ route('LangChange') }}"; $(".Langchange").change(function(){ window.location.href = url + "?lang="+ $(this).val(); }); </script>
这种方法非常适合管理应用程序的硬编码文本。然而，它无法直接翻译从数据库中动态加载的用户输入内容，例如用户评论、文章正文或产品描述。
动态用户输入内容的翻译挑战
当用户通过表单提交数据并存储到数据库中时，这些数据通常以用户输入的原始语言存储。如果网站支持多语言，并且用户希望以不同的语言查看这些动态内容，Laravel的本地化机制就显得力不从心了。因为本地化文件是预先定义的，无法实时处理数据库中不断变化的、非结构化的用户生成内容。为了解决这一问题，我们需要引入第三方翻译服务。
集成Google翻译工具实现选择性翻译
Google翻译工具提供了一种便捷的方式，可以在客户端实现网页内容的自动翻译。通过巧妙地配置，我们可以让它只翻译页面上的动态用户输入部分，而保留静态内容的Laravel本地化结果。
-
基本集成步骤
首先，在你的Blade模板中引入Google翻译的JavaScript库，并初始化翻译元素。
<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的div中显示Google翻译的语言选择器，并默认将页面内容从英文翻译为用户选择的语言。
-
核心机制：translate 与 notranslate 类
Google翻译提供了一对特殊的CSS类，允许开发者精确控制哪些内容需要被翻译，哪些内容应保持不变：
- class="translate"：带有此类的HTML元素及其子内容将被Google翻译处理。
- class="notranslate"：带有此类的HTML元素及其子内容将不会被Google翻译处理。
-
应用策略
为了实现对动态内容的精准翻译，我们可以采用以下策略：
- 将页面的大部分静态内容（包括由Laravel本地化处理的部分）包裹在带有 notranslate 类的容器中，例如整个 标签或主要的 div。
- 仅对那些从数据库中加载的、需要被翻译的动态用户输入内容（如评论文本、文章详情）应用 translate 类。
<body class="notranslate"> <!-- Laravel本地化处理的静态内容，不会被Google翻译 --> <h1>{{ __('messages.page_title') }}</h1> <p class="notranslate">这段静态文本不会被翻译。</p> <!-- 从数据库加载的用户评论，会被Google翻译 --> <div class="user-comment translate"> <p>{{ $comment->text }}</p> </div> <!-- 另一段动态内容，也会被翻译 --> <h3 class="translate">{{ $post->title }}</h3> <div id="google_translate_element" style="display:none;"></div> <!-- Google Translate 脚本 --> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </body>通过这种方式，我们可以确保Laravel的静态文本本地化功能不受影响，同时为动态内容提供自动翻译。通常，我们会将 google_translate_element 隐藏起来 (display:none;)，因为我们不希望用户看到默认的语言选择器，而是通过应用程序自身的语言切换机制来控制翻译。
根据应用语言动态调整Google翻译目标
为了让Google翻译与Laravel应用的语言切换保持同步，我们需要通过JavaScript动态设置Google翻译的源语言和目标语言。这通常通过设置 googtrans cookie来完成，并结合 google.translate.TranslateElement 的初始化参数。
-
setCookie 辅助函数
由于Google翻译的动态设置依赖于cookie，我们需要一个简单的JavaScript函数来设置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=/"; } -
动态语言切换逻辑
在 googleTranslateElementInit 函数中，我们可以根据当前页面的语言（通常由Laravel设置到 html> 标签的 lang 属性上，即 document.documentElement.lang）来动态决定Google翻译的源语言和目标语言。
假设我们的应用程序主要在英文和阿拉伯文之间切换，并且动态内容可能以这两种语言之一存储，我们需要根据当前应用的显示语言来决定翻译方向。
<div id="google_translate_element
