皆さん、こんにちは。管理人です。今回はシリーズ「Laravel で電子掲示板を作ろう」の第5回目となります。
UI の微調整（日本語化）
まず、UI に一部英語の表記が残ってしまっているので、それらを日本語にしたいと思います。resources/views/layouts/guest.blade.php の3つの行（の a タグの中身）を次のように修正して下さい。（38 行目において © となっているところは © に置き換えて下さい。）
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="flex flex-wrap justify-between">
<div class="px-4 py-4">
<a href="/" class="text-sm text-gray-700 dark:text-gray-500 underline">トップページ</a>
</div>
@if (Route::has('login'))
<div class="px-4 py-4 text-right sm:block">
@auth
<a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">ダッシュボード</a>
@else
<a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">ログイン</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">会員登録</a>
@endif
@endauth
</div>
@endif
</div>
<div class="font-sans text-gray-900 antialiased px-4">
<div class="max-w-2xl mx-auto prose">
{{ $slot }}
</div>
</div>
<footer class="text-white h-10 bg-green-700 text-center mt-10">
<small class="leading-10">© {{ config('app.name') }}</small>
</footer>
</body>
</html>
すると、ブラウザで見た際、右上にある文字がログイン中は「ダッシュボード」に、ログアウトすると「ログイン」「会員登録」になるかと思います。
さらに、これから記事などにユーザーの氏名が表示されるようにしたいと思うので、会員登録のページにおいて「氏名」となっているところを「ユーザー名（公開されます）」に変更したいと思います。そのためには、ファイル lang/ja.json の 84 行目あたりにある記述「”Name”: “氏名”,」を「”Name”: “ユーザー名（公開されます）”,」に変更すれば良いです。
（略）
"Manage API Tokens": "APIトークン管理",
"Manage Role": "役割管理",
"Manage Team": "チーム管理",
"Name": "ユーザー名（公開されます）",
"New Password": "新しいパスワード",
"Not Found": "見つかりません",
"of": "の",
（略）さらに、.env ファイルの APP_NAME の値を “Laravel 掲示板” にしておきます。すると、ブラウザで見た際、タブやフッターに表示される名前が変わるかと思います。
APP_NAME="Laravel 掲示板"
（以下略）UI の微調整（タブの表示名の変更）
続いて、ブラウザでいずれかの記事にアクセスした際、タブに表示される名前に記事のタイトルが含まれるようにしたいので、resources/views/post.blade.php と resources/views/layouts/guest.blade.php を次のように編集します（マイナスの行を削除してプラスの行を追加します）。
<x-guest-layout>
+ <x-slot name="title">{{ $post['title'] }}</x-slot>
+
<h1>{{ $post['title'] }}</h1>
<p>{{ $post['content'] }}</p>
（以下略） <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
- <title>{{ config('app.name', 'Laravel') }}</title>
+ <title>{{ (isset($title) ? $title . ' | ' : '') . config('app.name', 'Laravel') }}</title>
（以下略）
さらに、ログインした際に見ることができるページがいくつかありますが（ダッシュボードなど）、それらのタブのところに表示される文字列も変えたいので、以下に挙げる5つのファイルを次のように編集します。
<x-app-layout>
+ <x-slot name="title">新しい記事の作成</x-slot>
+
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
新しい記事の作成
</h2>
</x-slot>
（以下略） <x-app-layout>
+ <x-slot name="title">ダッシュボード</x-slot>
+
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}（あなたの記事一覧）
</h2>
</x-slot>
（以下略） <x-app-layout>
+ <x-slot name="title">記事の編集</x-slot>
+
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
記事の編集
</h2>
</x-slot>
（以下略） <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
- <title>{{ config('app.name', 'Laravel') }}</title>
+ <title>{{ (isset($title) ? $title . ' | ' : '') . config('app.name', 'Laravel') }}</title>
（以下略） <x-app-layout>
+ <x-slot name="title">プロフィール</x-slot>
+
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Profile') }}
</h2>
</x-slot>
（以下略）
コメント