Laravel 13系で外部ファイル(CSS / JS)の読み込みと共通パーツ化する方法

Laravel 13系でBootstrap 5系のCSS及びJavaScriptファイルを設置しページ内で読み込ませたい。また、それらを利用してヘッダーやフッター等、サイト内の共通パーツを作成して複数のページからテンプレートとして使用したい。ついでにファビコンも設置したい。以下に対応方法をメモ。

対応方法

Bootstrapファイルの設置

公式サイトからBootstrapをダウンロードして以下の通り設置する。

laravel/
└── public/
    ├── css/
    │   └── bootstrap.min.css
    └── js/
        └── bootstrap.bundle.min.js

（必要に応じて）リバースプロキシ用の設定

Bootstrapのファイルを読み込もうとするとHTTPS接続しているのに、ソースコード上ではHTTPで読み込む形になっていた。そのため「/bootstrap/app.php」に以下を追記する。

->withMiddleware(function (Middleware $middleware): void {
    ##### 追記ここから
    # リバースプロキシを信頼する設定（HTTPS認識のため）
    $middleware->trustProxies(at: '*');
    ##### 追記ここまで
})

ファビコンの設置

「laravel/public」直下にあるfavicon.icoを上書きするか、「laravel/public/images」ディレクトリ作成してそこにファイルをアップロードする。今回は前者の上書きする形を取った。

共通パーツの作成

「/resources/views/partials」ディレクトリを作成し、以下のヘッダー・フッター・headタグ内用の共通パーツを設置する。

ヘッダー（/header.blade.php）

<header class="bg-light py-3 border-bottom">
    <div class="container">
        header
    </div>
</header>

フッター（footer.blade.php）

<footer class="bg-dark text-white text-center py-4">
    <div class="container">
        <p class="mb-0">footer</p>
    </div>
</footer>

headタグ内用（meta.blade.php）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>@yield('title', 'デフォルトタイトル')<</title>
<link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>

テンプレートの作成

「/resources/views/layouts」ディレクトリを作成し、以下ファイルを設置する。

<!DOCTYPE html>
<html lang="ja">
<head>
    @include('partials.meta')
</head>
<body class="d-flex flex-column min-vh-100">
    @include('partials.header')

    <main class="flex-grow-1 container my-5">
        @yield('content')
    </main>

    @include('partials.footer')
</body>
</html>

テンプレートの利用方法

先日作成したHello Worldページを使うような場合、以下の形になる。

@extends('layouts.app')

@section('title', 'Hello Worldのタイトル')

@section('content')

    <h1>
        Hello World
    </h1>

@endsection

ブラウザからアクセスすると以下のようにヘッダー、フッターが表示される筈。

リファレンス

Blade テンプレート

https://laravel-jp.toolboxforweb.xyz/docs/blade