多くはこちらから参照しました
https://laravel.com/docs/12.x/blade
環境
sailを利用したlaravelプロジェクト
共通フォーマットを用意
resources/views/layouts/app.blade.phpをもとに新規作成
フォント設定とjqueryは設定しなくてもだいじょうぶです
jqueryはCDNから引っ張ることにしました
resources/views/layouts/base.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}- @yield('title', 'ホーム')</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<main>
@yield('content')
</main>
</div>
@yield('js')
</body>
</html>
@yield('<任意の値>')を埋め込みたい場所に記載することで、ほかのbladeで書いたものをそのまま埋め込みできます
テンプレートを適用する
@extends('layouts.base')を1行目にかきます
@section('<任意の値>')...@endsectionで指定した箇所に埋め込みできます
other.blade.php
// @extend(resources/views/以下のフォルダパスをカンマ区切りで指定)
@extends('layouts.base')
// @yieldで埋め込み指定した場所に記載される
@section('js')
...
@endsection
@section('content')
...
@endsection
タグの閉じ方は以下の2通りあるらしく、どちらの書き方でも表示できました
@section('title', 'ダミー入力確認 - ')
@section('title')ダミー入力確認 - @endsection