Q&A
bladeのテンプレートのことですか？もう少し具体的に質問を書き直してください。あとソースコードも載せてください。
前提・実現したいこと
laravelには、継承という便利な技がありますが、
layoutを継承したある特定なページだけの背景色を変えたい場合はどうすればよろしいでしょうか？
継承させないで書き直す以外の方法があれば教えてください。
継承先
@extends('frontend.layouts.app') @section('title', $user->name.'さんのマイページ') @section('content')
継承元
A:layouts app.blade.php <!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-'); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>@yield('title', config('app.name', 'Laravel'))</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> @yield('css') </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> 略 </nav> <main class="py-4"> 略 @yield('content') 略 </main> <footer> 略 </footer> </div> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> @yield('scripts') </body> </html>
長いため、一部略しました。
継承先のページのＣＳＳのみを独自に設定するには、どういったコードを入力したらよろしいでしょうか。
A:layouts app.blade.php <!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-'); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>@yield('title', config('app.name', 'Laravel'))</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> @yield('css') </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> 略 </nav> <main class="py-4"> 略 @yield('content') 略 </main> <footer> 略 </footer> </div> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> @yield('scripts') </body> </html> B.my_page.blade.php @extends('frontend.layouts.app') @section('title', $user->name.'さんのマイページ') @section('content') <div class="mb-3" id="userShow"> @include('frontend.user.show') </div> <div class="mb-3" id="callLogsShow"> @include('frontend.call_logs.show') </div> <div class="mb-3" id="pointLogsShow"> @include('frontend.point_logs.show') </div> @endsection cssで、bodyの background-color: #fff;になっているのですが、 Bのページだけ、背景色を変えたいという意味です。 長いため、一部略しました。
回答2件
0
bodyタグにIDをもたせる方法はいかがでしょうか？
- 継承元
html
1<body id="@yield('body_id', 'default')"> 2 ... 3</body>
- 継承先
html
1@section('body_id', 'back-blue')
- CSS
css
1 2#back-blue { 3 background-color: blue; 4} 5
投稿2018/09/20 06:20
総合スコア155
0
ベストアンサー
私はページIDをbladeに渡して、テンプレートにlinkで{{$pageid}}.cssみたいに定義しておいて、そのCSSにページ独自で指定したい物を指定しています。
他で指定していても、上書きできるのでその方法はどうですか？
投稿2018/09/05 14:50
総合スコア202
ご回答ありがとうございます。
何となくコーディングをしていたので、テンプレートlinkで定義するの解釈がよく分かっておらず、今調べながら実装中です。
<link href="{{ asset('css/$pageid.css') }}" rel="stylesheet">
みたいに定義しておき、コントローラから
$pageid = XXXX
を渡します。
必要なければCSSは配置しなくてもOKで、必要あればXXXX.cssを配置すればできますよ。
もしくは質問にあるbladeをで「@yield('css')」が定義されているので、継承先で
@push('css')
<style>...</style>
@endpush
を書けばスタイルを変更できます。
あなたの回答
tips
プレビュー
