Ваш app.blade.php должен выглядеть следующим образом:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Test') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('javascript');
</body>
</html>
Это ваш основной файл макета. Вы хотите использовать этот файл макета и добавить контент или дополнительные функции javascript, если хотите расширить его в других файлах блейдов.
Чтобы сделать это хорошим способом, мы используем ключевое слово @yield('javascript')
, чтобы добавить файл или функцию javascript.
Таким образом, ваши другие блейд-файлы, которые расширяют этот блейд-файл, должны выглядеть следующим образом:
@extends('layouts.app')
@section('content')
// some content
@endsection
@section('javascript')
// your javascript
@endsection
Сначала вы загружаете файл макета, а затем вы можете вставить свой конкретный контент и javascript в каждый раздел, где вы использовали ключевое слово yield('xxx')
После просмотра исходного кода:
Вы загружаете jquery в ваш home.blade.php, что не идеально, если вы хотите загрузить его, вы должны загрузить его в свой php-файл основного блейда. Но вам на самом деле не нужно загружать его, если вы используете файл laravels default app.js
. Для файла app.js
по умолчанию уже требуется require('./bootstrap');
. Этот файл уже содержит jquery, если вы его не меняли.
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}
Так что проверьте, требует ли ваш app.js
файл начальной загрузки, и проверьте, содержит ли ваш файл начальной загрузки jquery, если да, вам не нужно загружать jquery в свой блейд-файл.
Таким образом, вы должны загрузить файл app.js
в свой основной блейд. Загрузите это так внизу:
...
<script src="{{ asset('js/app.js') }}"></script>
@yield('javascript')
</body>
</html>