Laravelで、Bladeファイル上の処理だけで、カレントURLを取得し、メニューの色を変更できる方法を解説します。
コントローラーを使わないのでテンプレートにも使えますし、foreachを使った部分でもOK。
メニューの色を変えて、ユーザービリティを高めていきましょう。
Laravelで現在のURLを取得してメニューの色を変えたりハイライトする方法
まずは基本編から。
次のリンクメニューを変更し、ユーザーがこのメニューにいるときには、色を変更するようにします。
|
1 |
<a href="{{route('post.create')}}" class="list-group-item list-group-item-action bg-light">新規投稿</a> |
次のようにコードに修正を加えます。
|
1 |
<a href="{{route('post.create')}}" class="{{url()->current() == route('post.create') ? 'list-group-item list-group-item-action bg-info text-white' : 'list-group-item list-group-item-action bg-light'}}">新規投稿</a> |
Bootstrapを使っていますが、もちろん、通常のクラス名を使っても大丈夫です。
分かりやすくクラス内のコードをまとめると、次のとおり。
{{url()->current() == route(‘ルート名’) ? ‘変更後のクラス名’ : ‘通常のクラス名’}}”>
url()->current() で、ユーザーが現在いるURLを指します。
その後、最初に【現在のURLになったときのクラス名】をいれ、コロンでくぎった後に【通常のクラス名】を指定します。
if文を使って書いた場合
上記のコードは三項演算子を使用して書きました。
もちろん、ifを使っても同じ動きをするコードを作れます。
その場合は、次のようになります。
ifの場合には、ルート名を{{}}で囲いません。
また、クラス名もクオテーションで囲いません。
foreach文を使っている場合
foreach文でも同じように使えます。
ルートと一緒に変数を引き渡す場合には、この変数も入れてあげます。
次のようになります。
|
1 2 3 4 5 |
@foreach ($posts as $post) <li><a href="{{route('post.show', $post->id)}}" class="{{url()->current() == route('post.show', $post->id) ? '変更後のクラス名' : '通常のクラス名''}}"> {{$post->title}}</a></li> @endforeach |
foreach部分も、ユーザーが現在いる場所だけ色を変えることができます。
