Q&A前提・実現したいこと
閲覧頂きありがとうございます。
早速ですが、下記の内容が解決できず困っています。
■ header.blade.phpのデータを継承ができない。
PHP Laravelを使ってHtmlとcssをリファクタリングしています。
index.blade.php に @section と @yield を使用して
header.blade.phpのデータを継承を試みているのですがうまくいきません。
**app.blade.php** <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WW</title> <meta name="description" content="日々新しいプログラミング情報を皆に"> <link rel="icon" type="image/png" href="img/favicon.png"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> @yield('content') </body> </html> ーーーーーーーーーーーーーーーーーーーーー **index.blade.php** @extends('layouts.app') @section('content') <div id="home" class="big-bg"> yield('header') **←←←←←←←←←←←←←←←←←←ここに header.blade.php を継承したい** <div class="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>今日も早朝からプログラミング</p> <a class="button" href="menu">一覧を見る</a> </div><!-- /.home-content --> </div><!-- /#home --> @endsection ーーーーーーーーーーーーーーーーーーーーー **header.blade.php 継承ができないテンプレート** @section('header') <header class="page-header wrapper"> <h1><a href="home"><img class="logo" src="img/logo.svg" alt="ホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news">ニュース</a></li> <li><a href="menu">一覧</a></li> <li><a href="contact">コンタクト</a></li> </ul> </nav> </header> @endsection
試したこと
スペルミスの確認や、@includeでの対応など。
補足情報（FW/ツールのバージョンなど）
◆app.blade.php と index.blade.php について
下記２つの継承は問題なく行われています。
・index.blade.php の @section('content') から app.blade.php の @yield('content') への継承
・app.blade.php から @extends('layouts.app')への継承
各データの階層
使用しているPCなど
・ macOS Catalina バージョン10.15.2
・ フレームワーク Laravel
他にも必要な情報があった場合、恐れ入りますが
コメントを頂けますと助かります。
以上、よろしくお願いいたします。
参考にした記事
https://qiita.com/kamikoloss/items/b7ec871657d25a00ef67
https://qiita.com/awesam86/items/0bc8c3f70222220259b0
回答3件
0
ベストアンサー
継承の概念が多分理解しきれていないのかと思います。
継承は元となるファイルを拡張してあげるイメージで、継承元はあくまで一つです。今回の場合ですと表示するファイルはindexで継承元はapp、headerは継承元の関係にはなりません。(indexを継承元にしてheaderを表示するファイルにすれば多重継承で実現出来るがファイルの意味が変わってしまう)
おそらく質問者さんがやりたいことはincludeかcomponentを使って実現できるかと思います。
投稿2020/02/27 03:03
総合スコア683
0
Views以下にcomponentsフォルダを作成し、header.blade.phpを移動させる
ーーーーーーーーーーーーーーーーーーーーー
header.blade.php componentの元
ーーーーーーーーーーーーーーーーーーーーー
**index.blade.php **
@extends('layouts.app')
@section('content')
<div id="home" class="big-bg">@component('components.header') ← このように修正
@endcomponent
</div><!-- /#home --> @endsection<div class="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>おしゃれなカフェで癒やされてみませんか？無添加の食材で体の中からリフレッシュ。</p> <a class="button" href="menu">メニューを見る</a> </div><!-- /.home-content -->
◆注意 @endcomponentで閉じないと表示されませんでした。
以上の流れで解決できました。
投稿2020/02/27 05:31
総合スコア7
0
Views以下にcomponentsフォルダを作成し、header.blade.phpを移動させる
ーーーーーーーーーーーーーーーーーーーーー
header.blade.php componentの元
ーーーーーーーーーーーーーーーーーーーーー
**index.blade.php **
@extends('layouts.app')
@section('content')
<div id="home" class="big-bg">@component('components.header') ← このように修正
@endcomponent
</div><!-- /#home --> @endsection<div class="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>おしゃれなカフェで癒やされてみませんか？無添加の食材で体の中からリフレッシュ。</p> <a class="button" href="menu">メニューを見る</a> </div><!-- /.home-content -->
◆注意 @endcomponentで閉じないと表示されませんでした。
以上の流れで解決できました。
投稿2020/02/27 05:24
総合スコア7
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/27 05:16
2020/02/27 06:03