Для настройки локализации нужно немного потрудиться. Первое что я сделаю скачаю файлы переводов. Переходим по адресу. Примеры всех созданных файлов можно будет забрать в конце материала
https://laravel-lang.github.io/lang/installation/composer.html // выбираем пакет для вашей версии и запускаем команду // у меня Laravel 8 composer require laravel-lang/lang:~8.0 // После установки пакета по путям можно забрать нужные вам файлы языков перевода и перекинуть их корень\resources\lang корень/vendor/laravel-lang/lang/json корень/vendor/laravel-lang/lang/src
Добавляем код для передачи данных в представление
// Правки в файле Providers/AppServiceProvider.php Inertia::share([ // ... 'locale' => function () { return app()->getLocale(); }, 'language' => function () { return translations( resource_path('lang/'. app()->getLocale() .'.json') ); }, // ... ]);
Добавляем файл со вспомогательной функцией
Эта функция возвращает файл перевода JSON, используемый в указанной выше языковой переменной.
// Путь к файлу app/helpers.php - этот файл необходимо создать function translations($json) { if(!file_exists($json)) { return []; } return json_decode(file_get_contents($json), true); }
// composer.json находится в корне
Затем нам нужно добавить созданный файл в autoload. Для этого отредактируйте composer.json добавив следующие строки
"autoload": { // ... "files": [ "app/helpers.php" ] },
После добавления запустите следующую команду терминала в корне вашего приложения Laravel.
composer dump-autoload
Компонент переключатель языков
Следующим шагом будет создание компонента Vue, чтобы пользователь мог переключать свои языковые предпочтения. Компонент будет простым с отображением ссылок по типу RU, EN
// Путь к файлу resources/js/Shared/LanguageSelector.vue файл необходимо создать <template> <div class="ml-4"> <inertia-link :href="route('language', ['ru'])"> ru </inertia-link> <inertia-link :href="route('language', ['en'])"> en </inertia-link> </div> </template> <script> export default { computed: { selectable_locale() { if (this.$page.props.locale == "ru") { return "en"; } return "ru"; }, }, }; </script>
Настройка путей для переключения языка
На предыдущем шаге есть inertia ссылка на маршрут «/language». Этому маршруту мы передаем код желаемого языка, а затем устанавливаем его в сессию, как показано ниже.
// Редактируем роуты routes/web.php Route::get('language/{language}', function ($language) { Session()->put('locale', $language); return redirect()->back(); })->name('language');
Создаем middleware
После того, как мы добавили код языка в сессию, нам нужно добавить middleware для проверки этого значения при каждом запросе страницы и убедиться, что мы передаем правильную переменную в представление (view).
//Пишем команду для создания middleware php artisan make:middleware SetLocale // Путь к файлу Http/Middleware/SetLocale.php добавляем код в handle namespace App\Http\Middleware; use Closure; class SetLocale { public function handle($request, Closure $next) { app()->setLocale(config('app.locale')); if(session()->has('locale')) { app()->setLocale(session('locale')); } return $next($request); } }
Регистрируем middleware
Убедитесь, что он зарегистрирован после того, как мы инициализировали Laravel Сессии т.е. наша строка должна находится ниже StartSession::class.
// Путь к файлу Http/Kernel.php protected $middlewareGroups = [ 'web' => [ // ... \Illuminate\Session\Middleware\StartSession::class, \App\Http\Middleware\SetLocale::class, // ... ], ];
Регистрируем mixin для переводов во Vue
С помощью этого кода мы будем транслировать наши файлы переводов(ru.json, en.json) в javascript. Откуда после будем брать значения ключей.
// необходимо подключить mixin(require("./base")) в app.js createApp({ render: () => h(InertiaApp, { initialPage: JSON.parse(el.dataset.page), resolveComponent: (name) => require(`./Pages/${name}`).default, }), }) .mixin({ methods: { route } }) .mixin(require("./base")) // вот так я его подключаю .use(InertiaPlugin) .mount(el);
Создаем сам файл base.js
// Путь к файлу resources/js/base.js файл необходимо создать module.exports = { methods: { /** * Translate the given key. */ __(key, replace = {}) { var translation = this.$page.props.language[key] ? this.$page.props.language[key] : key; Object.keys(replace).forEach(function (key) { translation = translation.replace(':' + key, replace[key]) }); return translation }, /** * Translate the given key with basic pluralization. */ __n(key, number, replace = {}) { var options = key.split('|'); key = options[1]; if(number == 1) { key = options[0]; } return tt(key, replace); }, }, }
Пример использования написанного функционала
Добавляем следующий код в ваш Vue компонент
// 30 Days это ключ перевода // __() - Данная конструкция используется для ключей {{ __("30 Days") }}
Добавить комментарий