尝试引用主布局时，Laravel @extends 无法正常工作

Question

I have an issue with the @extends() function for Laravel.我对@extends()函数有问题。 My views don't seem to extend the layout at all.我的观点似乎根本没有扩展布局。 I don't know how to fix this.我不知道如何解决这个问题。

Here is the main layout file (it's located in views>layouts>app.blade.php):这是主要的布局文件（它位于 views>layouts>app.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', 'Pet Me') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('/js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
</head>
<body>


<div id="app">
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Pet Me') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav mr-auto">

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Authentication Links -->
                    @guest
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @if (Route::has('register'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                            </li>
                        @endif
                    @else
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    @csrf
                                </form>
                            </div>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

    @if ($errors->any())
        <div>
            Errors:
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('message'))
        <p><b>{{session ('message')}}</b></p>
    @endif

    <main class="py-4">
        @yield('content')
    </main>
</div>
</body>
</html>

and this is one of the views I am trying to have that extend app (located in views>home.blade.php):这是我试图扩展应用程序的视图之一（位于 views>home.blade.php）：

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Answer 1

Your code is extending the layout correctly as it shows the content of the <nav> and also the content from your home.blade.php file.您的代码正确扩展了布局，因为它显示了<nav>的内容以及 home.blade.php 文件中的内容。 It seems to me that your CSS is not loading correctly.在我看来，您的 CSS 未正确加载。

I recommend you check in the console that the app.css file is loading correctly.我建议您在控制台中检查 app.css 文件是否正确加载。 If not please make sure that the app.css file is present on the following path from your the root directory of your Laravel project-如果没有，请确保 app.css 文件位于 Laravel 项目根目录的以下路径中-

public > css > app.css

Also, it would be more helpful if you could share the screenshot of your console.此外，如果您可以共享控制台的屏幕截图会更有帮助。

Laravel initialises the project with app.css file, placed in the public/css directory. Laravel 使用 app.css 文件初始化项目，放置在 public/css 目录中。 This file is noting but a minified version of Bootstrap 's CSS file ( docs ).该文件只是Bootstrap的 CSS 文件 ( docs ) 的缩小版本。 In case your file is deleted for some reason.如果您的文件因某种原因被删除。 THere is how you can get it -这是你如何获得它 -

OPTION 1 Using the CDN of bootstrap's css file.选项 1使用引导程序的 css 文件的 CDN。

To do this replace <link href="{{ asset('/css/app.css') }}" rel="stylesheet"> with <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> .为此，请将<link href="{{ asset('/css/app.css') }}" rel="stylesheet">替换为<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 。 You can get the cdn fromhere .您可以从这里获取 CDN。

OPTION 2选项 2

Download Bootstrap from here .从这里下载 Bootstrap。
Unzip the downloaded folder.解压下载的文件夹。
Go to the css folder.转到 css 文件夹。
Copy the bootstrap.min.css and paste in public/css folder in your Laravel project.复制 bootstrap.min.css 并粘贴到 Laravel 项目中的 public/css 文件夹中。
Rename the pasted file to app.css.将粘贴的文件重命名为 app.css。

Your css should load now.您的 css 应该现在加载。

One probable reason your app.css is maybe because you have executed the php artisan preset none command, which removes Laravel's default frontend scaffolding ( docs ).您的 app.css 的一个可能原因可能是因为您执行了php artisan preset none命令，该命令删除了 Laravel 的默认前端脚手架 ( docs )。

尝试引用主布局时，Laravel @extends 无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-16 18:14:26

尝试引用主布局时，Laravel @extends 无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-16 18:14:26

解决方案1
1 已采纳 2019-12-16 18:14:26