close

レイアウトの構築 Laravel- 柔軟で保守可能なインターフェイスの作成

では Laravel 、レイアウトは Web アプリケーションのユーザー インターフェイスを構築する際に重要な役割を果たします。  レイアウトは、や など header の 共通セクションを含む、Web ページの全体的な構造を表します 。 この記事では、柔軟で保守可能なインターフェイスを作成するためにレイアウトを構築する方法を検討します 。 footer sidebar Laravel

まず、Web サイトの基本的なレイアウトを作成しましょう。 app.blade.php まず、ディレクトリ内に という名前のファイルを作成します 。 このファイルは、Web サイト全体のメイン レイアウトとして機能します。 resources/views/layouts

ファイルの内容の例を次に示します app.blade.php。 

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

このレイアウトでは、 @yield ディレクティブを使用してレイアウト内の動的セクションを定義します。 たとえば、 @yield('title') 子が ページ タイトルを上書きして設定できるようにします。 同様に、 子が ページのメインコンテンツを挿入できるようにします。 views @yield('content') views

レイアウトが作成されたら、 このレイアウトを利用する子を作成できます。 たとえば、同様のレイアウトのページを作成するには、ディレクトリ に という名前のファイルを作成します 。 このファイルは  レイアウトを拡張し、ページの特定のコンテンツを定義します 。 views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

上記の例では、 @extends ディレクティブを使用してレイアウトを継承します app.blade.php  。 次に、ディレクティブを使用して、  ページの  およびセクションの @section 特定のコンテンツを定義します。 title content

最後に、URL をそれぞれの にリンクするルートを定義する必要があります 。 views

たとえば、 routes/web.php  ファイルに次のルートを追加できます。 

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

この例では、「/」 URL は にリンクされ welcome.blade.php view、 /about URL は about.blade.php view.

結論として、 でレイアウトを構築すると、 Laravel Web アプリケーションの共有インターフェイスを作成し、 や などの共通セクションを管理できるように header なり footer ます sidebar。 レイアウトと child を使用すると 、柔軟で保守しやすいインターフェイスを で構築できます 。 views Laravel